score:1
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.
Source: stackoverflow.com
Related Articles
- How To Change The Color of specific span of data in a chart
- Change color code on colum, depending on data value (highchartJS)
- How to set specific color for each data in pie chart using phplot.php
- Highcharts - change background color along specific date range
- Change series data dynamically in react-highcharts without re-render of the chart
- Change color of area chart programmatically in highcharts
- change legend color high charts based on data
- highcharts: column chart color change based on value
- Highcharts --- Change sliced color on drilldown pie chart
- Highcharts: Change Highlight Color of Column Chart
- How do I change a specific bar color in Highcharts Bar Chart?
- How to change color of donut chart in highchart?
- Highcharts: Change needle color of Gauge Chart on Hover
- how to change color of line chart in highchart based on a categorical column in r?
- Change color in specific columns w/ multiple series
- How to change the background color of measure tool in stock chart in highstock?
- Change color of stacked bar chart
- highcharts pie chart color for dynamic data
- Change line color in area-spline chart in Highcharts
- Change color of pie chart on drilldown
- Highcharts: Change color of Pie Chart section without slice animation
- How to Change the color of the text in donut chart
- How can I put custom color in High Charts PIE data | Slice and want to change slice text
- How to change color of bar in column chart with different level of percentage in highcharts
- Pie chart Slice color Change Dynamically in Highcharts
- Pie chart color change High Chart Library
- change datalabels color in a HighCharts chart when hovering without updating the series
- How to change the color of single point in spiderweb chart
- Changing Color of Data Labels in HighCharts Bar Chart
- highcharts change series color when data is dynamically inserted
- Irregular Display of Chart In Highstocks
- How to skip a value in highcharts.js?
- how to set a rangeSelector for highstock
- The continuous update highcharts with more data plotting the continuity is not visible so we need that continuity in the centre of the graph
- How do I dynamically update the range inside a Gauge (HighCharts)?
- Highcharts: Remove left and right padding in column chart
- How to serialize JSON without outputting quotes around certain values
- high charts parse json data
- "Extend" highcharts chart add properties and functions, prototype
- Technique to use to reduce the number of javascript lines to write
- Controlling when boost mode is used in HighCharts?
- Vue project: object does not support this property or method "hasOwnProperty" IE11
- HighCharts getJson - Unable to display
- Highcharts: Heatmap using CSV
- How to create more gap between axis labels on a stacked bar chart?
- Multiple data series and multiple data tooltip with HighMaps
- Vertically re-order nodes in Highcharts sankey-diagram
- Is it possible to hide the line & symbol next to Highcharts legend items?
- How to convert long string into CSV using the export-csv plugin for HighCharts
- Redrawing the tooltip inside of the tooltip positioner callback