CODEWITHSUNDEEP
javascriptchartshighcharts
Tik
Tik

Reputation: 23

Is there a way to fill different colors up to the desired point in Highcharts gauge graph?

I have an highchart gauge graph that is working fine. I however want to fill with colors depending on the percentages as below. The colors should fill up to the point marked by the percentage and the rest should remain grey color.

0 - 25% - red
25 - 75 - yellow
75 - 100 - green

From my plotted example, the colors should fill up yellow to point 45 as is within the second band.

Does anyone assist with this?

Highcharts.chart('guage_chart', {

  chart: {
    type: 'gauge',
    backgroundColor: 'transparent'
  },

  title: {
    text: 'Percentage of Samples Processed',
    style: {
      color: '#FFF',
      fontSize: '80%',
    }

  },
  tooltip: {
    enabled: false
  },
  pane: {
    background: null,
    startAngle: -90,
    endAngle: 90,
    center: ['50%', '50%']
  },
  credits: {
    enabled: false
  },
  // the value axis
  yAxis: {
    min: 0,
    max: 100,
    lineWidth: 0,
    minorTickInterval: 'auto',
    minorTickWidth: 0,
    minorTickLength: 0,
    minorTickPosition: 'outside',
    minorTickColor: '#666',

    tickPixelInterval: 0,
    tickWidth: 0,
    tickPosition: 'outside',
    tickLength: 0,
    tickColor: '#666',
    labels: {
      step: 1,
      rotation: '',
      y: 20,
      style: {
        color: '#FFF',
        cursor: 'default',
        fontSize: '14px'
      }
    },
    title: {
      text: 'Progress',
      style: {
        color: '#FFF'
      },
      y: 50
    },
    plotBands: [{
      from: 0,
      to: 25,
      color: 'rgb(192, 0, 0)', // red
      thickness: '50%'
    }, {
      from: 25,
      to: 75,
      color: 'rgb(255, 192, 0)', // yellow
      thickness: '50%'
    }, {
      from: 75,
      to: 100,
      color: 'rgb(155, 187, 89)', // green
      thickness: '50%'
    }]
  },

  series: [{
    name: 'Progress',
    data: [45] // the data to be plotted
  }]

}, );
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<body style="background-color:powderblue;">

  <div id="guage_chart"> </div>

</body>

Upvotes: 1

Views: 678

Answers (1)

ppotaczek
ppotaczek

Reputation: 39099

You can create plot bands array based on series data and color limits. Example:

const colorLimits = [25, 75, 100];
const colors = ['red', 'yellow', 'green'];

const seriesData = 45;
const plotBands = [{
    from: 0,
    to: seriesData,
    thickness: '50%',
    color: colors[colorLimits.indexOf(colorLimits.find(limit => seriesData < limit))]
}, {
    from: seriesData,
    to: 100,
    thickness: '50%',
    color: 'gray'
}];

Highcharts.chart('container', {
    ...
    yAxis: {
        ...,
        plotBands
    },
    series: [{
        ...
        data: [seriesData] // the data to be plotted
    }]
});

Live demo: http://jsfiddle.net/BlackLabel/t0z1mf69/

API Reference: https://api.highcharts.com/highcharts/yAxis.plotBands

Upvotes: 2

Related Questions