score:1
Accepted answer
You can use dynamically calculated zones, for example:
events: {
load: function() {
let points = this.series[0].points,
zones = [],
color;
function addZone(value, color) {
zones.push({
value: value,
color: color
});
}
points.forEach(function(p, i) {
if (points[i - 1]) {
if (p.y >= points[i - 1].y) {
if (color && color !== 'green') {
addZone(points[i - 1].x, 'red');
}
color = 'green';
} else if (p.y <= points[i - 1].y) {
if (color && color !== 'red') {
addZone(points[i - 1].x, 'green');
}
color = 'red';
}
}
addZone(p.x, color);
});
this.series[0].update({
zones: zones
});
}
}
Live demo: http://jsfiddle.net/BlackLabel/jmckag4q/1/
API Reference: https://api.highcharts.com/highcharts/series.line.zones
Source: stackoverflow.com
Related Query
- Highcharts: how to assign different colours to a spline depending on positive or negative slope?
- How to have multiple highcharts with different series data in vuejs without repeating code
- Highcharts column drilldown, assign two different colours to the two different drilldown columns?
- How to access different contexts of 'this' in HighCharts callback (Angular / Typescript)
- Highcharts stacked column how to use different label on each category
- How do i add mouse wheel code in Angular2 highcharts in typescript
- how to display 2 same highcharts without duplicate the code
- How to match columns height with spline in Highcharts
- how can i add in highcharts a different dashStyle just for a part of the graph
- Highcharts - how to export chart with different scale in one click
- How to edit tooltip in Highcharts C# code
- how to use highcharts tooltip formatter in python code
- How to add different click events on each pie of a pie chart created by highcharts usin jquery
- Highcharts - Cross browser charts have different Y axis ranges, how can I ensure consistency?
- how to show column and area charts with different y axis with same category and same x axis in highcharts
- How to change color of bar in column chart with different level of percentage in highcharts
- How to make buttons filter different data based on a category they select in Highcharts heatmap?
- How can I combine highcharts with different but similar x-axis categories?
- How to make sure that highcharts spline graphs stays between 0 and 1?
- How can I apply different background color to entire tooltip for different series in highcharts
- How can I prepare a Group Stacked Bar Chart in Highcharts using multiple and different types of data?
- How do i show Last seven days of a week from current date in area spline categories highcharts
- How to use a different formatter on Highcharts in each curve of the same graphic?
- how to give different names on tooltip for one series in highcharts R
- Highcharts Gantt - how to use a different shape for the milestone markers?
- How can I sort the stacked bar charts in Highcharts by the sum of positive response?
- How to style two different legends in HighCharts
- How to change tick and minorTick color in different interval in highcharts gauge charts
- How to set a different border line of every single point or serie in Highcharts scatter plot?
- How to modify the code so that Highcharts graph does not cover fixed navigation bar at the top of the page?
More Query from same tag
- Highcharts data series issue with ajax/json and PHP
- How to position the dataLabel for highcharts on the same side of the x-axis?
- How to add math equations in highcharts?
- Why isn't the xAxis showing the date?
- Highcharts column chart extends off container and doesn't properly show X axis
- HighCharts: How to display unique text for yAxis Label in a spline chart
- Highchart plugin creating different Y-axis scale on different browsers
- Highcharts gauge not shown
- Highcharts - How to I disable a series when I enable another one?
- Highcharts add ellipsis for long data
- Highcharts gantt or any chart x-axis scroll position to be at the start/left side on loading chart
- Highcharts DateTime xAxis and tooltip formatting issue
- How to align the legends in reactjs Highcharts
- Fixing dataLabel position in pie charts Highcharts even when data is changing
- X-axis range changes based on hidden Series
- max Y Axis value in a Highchart
- Higcharts - marginBottom does not let rendering xAxis series ellipsis
- Change xAxis label style on data series click, Highcharts/React
- Json quotes highcharts
- Highcharts spiderweb chart resizes axis after calling series.setData
- Trying to produce a pop up when the chart is clicked. The pop up is a close button
- Trying to create Highcharts element in Polymer
- axis labels overlap each other in polar chart
- Highcharts date misunderstood
- Highcharts: Disabling/Enabling enableMouseTracking after initial render
- Strip/escape special characters from Google Spreadsheet field before passing data to Highcharts Graph
- Simplifying if else statements
- Highcharts Timeline Renaming Series Labels
- Set highstock chart navigator max range by default
- In a Highchart, how to display the legend text in next row if the text is too long?