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 Query

More Query from same tag