Add different colour in X-range bar based on percentage

Question

I want to add different colours for parts of the bar based on partialfill.

At the moment when the partialfill is 0.5 (50%) it makes half of the bar darker green. Is there a way to define colour in bar based on percentage?

For example 0-49 make the partialfill red and the rest white. 50-100 make the partial fill green and the rest white etc.

https://jsfiddle.net/sg0co5au/11/

Highcharts.chart('container', {
    chart: {
        type: 'xrange'
    },
    title: {
        text: 'Highcharts X-range'
    },
    xAxis: {
        type: 'datetime'
    },
    yAxis: {
        title: {
            text: ''
        },
        categories: ['Prototyping', 'Development', 'Testing'],
        reversed: true
    },
    series: [{
        name: 'Project 1',
        // pointPadding: 0,
        // groupPadding: 0,
        borderColor: 'gray',
        pointWidth: 20,
        colour:'#FF0000',
        data: [{
            x: Date.UTC(2014, 10, 21),
            x2: Date.UTC(2014, 11, 2),
            y: 0,
            partialFill: 0.50,
            color:'#469E5A'
        }, 
        ],
        dataLabels: {
            enabled: true
        }
    }]

});

score 0 · Answer 1 · answered Jul 22 '18 at 22:20

I see that the background rectangle is of class "highcharts-point highcharts-color-0 highcharts-partfill-original" with fill value #469E5A. Change that to "white" where ever you have defined its CSS.

The overlay on that is <rect x="6.5" y="85.5" width="696" height="20" rx="3" ry="3" class="highcharts-partfill-overlay" clip-path="url(#highcharts-51rfx2r-4)" stroke="gray" stroke-width="1" fill="rgb(0,82,14)"></rect>

For the color by percentage use a variable to store the percentage like percent

if(percent<=49){
    document.getElementsByClassName("highcharts-partfill-overlay").setAttribute("fill", "red")
}
else if(percent>49){
    document.getElementsByClassName("highcharts-partfill-overlay").setAttribute("fill", "green")
}

You can change the color of the background box similarly using document.getElementsbyClassName()

score 0 · Answer 2 · answered Jul 23 '18 at 12:34

Yes, you can set the color of your fill after the chart loads by checking against how much of the bar is filled.

First, set the chart options to a variable so you can refer to them later

var thisChart = Highcharts.chart('container', { /* your options here */ });

Next, after the chart loads, check to see whether the fill is below or above 50 (in this case, 0.5 to match the value you set in partialFill), and use the series.update() function (https://api.highcharts.com/class-reference/Highcharts.Series#update) to change the color:

if (thisChart.series[0].data[0].partialFill < 0.5) {
  thisChart.series[0].update({
    partialFill: {
      fill: 'red'
    }
  });
} else {
  thisChart.series[0].update({
    partialFill: {
      fill: '#469E5A'
    }
  });
}

I made a few minor changes to your code. First, I explicitly set the series fill color to the green you chose. Then, I set the color of your data to white. What this does is make the color of the partial fill to the series' color, and the other space to white. Then, when you check the partialFill value after the chart is drawn, if the value is below 0.5, the filled value will be red instead.

  series: [{
    name: 'Project 1',
    borderColor: 'gray',
    pointWidth: 20,
    partialFill: {
      fill:'#469E5A' /* default color of the filled part of the bar */
    },
    data: [{
      x: Date.UTC(2014, 10, 21),
      x2: Date.UTC(2014, 11, 2),
      y: 0,
      partialFill: 0.50,
      color: 'white' /* color of the unfilled part of the bar */
    }],
    dataLabels: {
      enabled: true
    }
  }]

See an updated version of your fiddle here: https://jsfiddle.net/brightmatrix/sg0co5au/46/

I hope this information is helpful for you.

Add different colour in X-range bar based on percentage

2 Answers2