Search code examples
javascriptchartshighcharts

How can add new plotBand to gauge type of highchart?

I have used the following JSFIDDLE gauge chart. I am looking for to add new plotBand at spesific range of (from ,to).

But, when i add new plotBand, by the followind command:

chart.yAxis[0].addPlotBand({
                from: 0,
                to: 100,
                color: "#E0E0E0",
                thickness: "10%",
            });

the new added plotBand does not completely cover the old plotBand and the old one's border is visible!. How can hide completely the old one? I must say that, using addPlotBand function is my only approach to add plotband.

Solution

  • This is caused due to SVG artifacts. As a workaround, set the plotBands border width at 0.5 - 1.

      chart.yAxis[0].addPlotBand({
    borderColor: "#E0E0E0",
    borderWidth: 0.5,
    from: 0,
    to: 100,
    color: "#E0E0E0",
    thickness: "10%",
  });

    Demo: https://jsfiddle.net/BlackLabel/gzbsw80f/