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 Query
- How To Change The Color of specific span of data in a chart
- How to change the background color of measure tool in stock chart in highstock?
- How to Change the color of the text in donut chart
- How to change the color of single point in spiderweb chart
- Highcharts - Column Chart Drilldown, how to change the drilldown bar color based on some value
- how to change the color of column in chart ?
- How to change the series color and mark after I draw the line chart in highcharts?Does it has databound event?
- How to change the background color the chart area in high charts?
- How to change the label color of Y-Axis on click in angular Gantt chart High Chart
- highcharts: How do I change the color of the chart above?
- How to fill the blank space between the bars with specific color in gantt chart of highcharts?
- how to change my pie chart color according to the value
- how to change the slice color in donut chart on click of slice?
- How to set specific color for each data in pie chart using phplot.php
- How do I hide the code for the chart data in highcharts?
- How to use the tooltip formatter and still display chart color (like it does by default)?
- How to change the text color in Highcharts
- Change series data dynamically in react-highcharts without re-render of the chart
- How to disable the on-hover color change in Highcharts?
- Highcharts, How can I change the datalable distance in a pie chart based on the value
- How to extract the data from highstock chart
- Highcharts Bubble Chart - How to move an individual point's data label (dataLabel) to the front/top
- How to set series-label to false by default and change the color of series label text in highchart
- How to show the json data in Pie chart HighChart?
- HighCharts: How to Determine on Click Event what Data Grouping the Chart is Currently In?
- How can i get the json data with the specific between Year?
- In highcharts how do I change the color of the line above the categories?
- How do I change a specific bar color in Highcharts Bar Chart?
- How to change color of donut chart in highchart?
- how to change color of line chart in highchart based on a categorical column in r?
More Query from same tag
- Highcharts - Change line color between points
- HighCharts Rendering Issue
- Different border radius
- Border is partially hidden on hover in Highcharts column and pie charts
- Customize legend pie highchart into tag div
- How to remove margins in highmaps?
- How to show 12AM and 12PM on x-axis using highcharts library
- How to set brightness effects on specific columns on the stacked column/bar chart when using Highcharts?
- Highcharts: Is it possible to show Sunburst chart series data labels outside the leaf level nodes with connectors?
- How do I implement solid colours for zone boundaries in Highcharts?
- Display parts of subtitle on different sides with HighCharts
- Highcharts: how to handle touch events via plotOptions.series.events
- Enable and disable Highcharts tooltip with drill menu
- How to specify a range of data when using HighCharts with <table>?
- Switch from pie to column and show labels
- RoR, Javascript - how to automatically update charts from table?
- How to force display of x-axis labels in Highcharts?
- Highcharts hide not active series from legend when taking screenshot
- pie chart highcharts from django query
- Alternating x-Axis plotbands with highstock
- ToolTip in Highcharts
- Creating graph with x-axis only using D3
- How can I put the Highchart to the html page
- Facing issue with generate image using Highcharts Node.js Module
- How to grab correct highchart number in selectors using Selenium Webdriver with Python with several charts on the page?
- Highcharts ajax not working
- Use series data but display custom text on top of columns Highchart
- How to get index of clicked point in scatter plot
- Remove step line points
- Rendering pie chart using xtype and Ext.create