score:1

Accepted answer

The most compact way is to update the series with zones.

document.getElementById('apply').addEventListener('click', function() {
    var from = document.getElementById('from').value;
    var to = document.getElementById('to').value;

    chart.series[0].update({
        zones: [{
            value: from
        }, {
            value: to,
            color: 'red'
        }]
    });
});

Live demo: https://jsfiddle.net/BlackLabel/94pvnzme/

API Reference:

https://api.highcharts.com/highcharts/series.line.zones

https://api.highcharts.com/class-reference/Highcharts.Series#update

score:0

You can use update() method but you wrote:

I want this to happen dynamically and without rendering or redrawing.

Which can be a bit of a problem because:

Update the series with a new set of options. For a clean and precise handling of new options, all methods and elements from the series are removed, and it is initialized from scratch.

Source: documentation

but I think it's the smoothest solution.

const chart = Highcharts.chart('container', {
    chart: {
        zoomType: 'x',
    },
    title: {
        text: 'changing color of data in chart '
    },
      
    series: [{
        data: [[1,1],[2,2],[3,3],[4,4],[5,5]],
        color:' #333'
    },
    {
        data: [[6,6],[7,7],[8,8],[9,9],[10,10]],
        color:' #a55'
    },
    {
        data: [[11,11],[12,12],[13,13],[14,14],[15,15]],
        color:' #333'
    },]

});

document.querySelector('button').addEventListener('click', event => {
  chart.series[1].update({
     color: 'red'
  })
})
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/boost.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<title>index</title>
<div id="container"></div>
<div id="tooltip_showcase"></div>
<button type="button">change color</button>

score:0

I want this to happen dynamically and without rendering or redrawing the entire chart.

[EDIT] Actually, it is possible to do it without re-rendering the chart:

const myChart = Highcharts.chart('container', {
  chart: {
    zoomType: 'x',
  },
  title: {
    text: 'changing color of data in chart '
  },
  series: [{
    data: [ [1, 1], [2, 2], [3, 3], [4, 4], [5, 5], [6, 6], [7, 7], [8, 8], [9, 9], [10, 10], [11, 11], [12, 12], [13, 13], [14, 14], [15, 15] ],
    color: '#ccc'
  }]
});

// function to loop through the data and set the color
function setDataColors(dataElems, startIdx, endIdx, rangeColor, defColor) {
  dataElems.forEach((item, index) => {
    item.setAttribute('fill', index >= startIdx && index <= endIdx ? rangeColor : defColor);
  });
}

// update the points color whenever the desired event occurs
document.getElementById('btnUpdCol').addEventListener('click', () => {
  // select the data points elements
  const dataPoints = document.querySelectorAll('.highcharts-series-0.highcharts-tracker > path');
  // set their color
  setDataColors(dataPoints, 6, 10, '#aff', '#333');
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/boost.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<title>index</title>


<div id="container"></div>
<div id="tooltip_showcase"></div>
<button id="btnUpdCol">update color</button>

But with this approach you will have to handle quite a bit of interaction: for example, if you mouse-over a data point or zoom in/out, the point(s) interested by this interaction will regain the original color.

I do not think it is possible but, If you are fine re-rendering the chart you can have just one data series, use an array for the colors property and set to true the property colorByPoint

const myChart = Highcharts.chart('container', {
  chart: {
    zoomType: 'x',
  },
  title: {
    text: 'changing color of data in chart '
  },
  series: [{
    data: [ [1, 1], [2, 2], [3, 3], [4, 4], [5, 5], [6, 6], [7, 7], [8, 8], [9, 9], [10, 10], [11, 11], [12, 12], [13, 13], [14, 14], [15, 15] ],
    colors: ['#f00'],
    colorByPoint: true // <--
  }]
});

// function to loop through the data and set the color
function setDataColors(data, startIdx, endIdx, inRangeColor, defColor) {
  return data.map((item, index) => {
    return index >= startIdx && index <= endIdx ? inRangeColor : defColor;
  });
}

// update the chart series whenever the desired event occurs
document.getElementById('btnUpdCol').addEventListener('click', () => {
  myChart.series[0].update({
    colors: setDataColors(myChart.series[0].data, 5, 9, '#aff', '#333')
  });
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/boost.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<title>index</title>


<div id="container"></div>
<div id="tooltip_showcase"></div>
<button id="btnUpdCol">update color</button>

With this approach you let the library deal with the behavior of the chart when you zoom-in/out, mouse-over a point etc. as the new colors are "recorded" in the Highchart object.


Related Articles