score:2
i suggest using this mathematical concept: https://en.wikipedia.org/wiki/line%e2%80%93line_intersection but it works only for straight lines, so if you want to use it, you will have to change the type of your chart from areasplinerange to arearange.
js function that checks intersection coordinates:
function checklineintersection(a1, a2) {
if (a1 && a2) {
var sax = a2.x - a1.x,
say = a2.high - a1.high,
sby = a2.low - a1.low,
sabx = a1.plotx - a2.plotx,
saby = a1.high - a1.low,
u,
t;
u = (-say * sabx + sax * saby) / (-sax * say + sax * sby);
t = (sax * saby - sby * sabx) / (-sax * say + sax * sby);
if (u >= 0 && u <= 1 && t >= 0 && t <= 1) {
return {
plotx: a1.x + (t * sax),
ploty: a1.high + (t * say)
};
}
}
return false;
}
and highcharts approach to calculate the zones and properly update series:
chart: {
events: {
load() {
let chart = this,
series = chart.series[0],
data = series.data,
cross,
negative = true,
howmanyintersections = 0,
zones = [];
data.foreach((point, i) => {
if (point.low > point.high && negative) {
howmanyintersections++;
negative = !negative;
cross = checklineintersection(data[i - 1], point)
zones.push({
value: cross.plotx,
fillcolor: 'red'
})
} else if (point.low < point.high && !negative) {
howmanyintersections++;
negative = !negative;
cross = checklineintersection(data[i - 1], point)
zones.push({
value: cross.plotx,
fillcolor: 'green'
})
}
})
if (howmanyintersections % 2) {
zones.push({
fillcolor: 'green'
})
} else {
zones.push({
fillcolor: 'red'
})
}
series.update({
zones: zones
})
}
}
},
jsfiddle: https://jsfiddle.net/blacklabel/0qzsm83j
i've got the power!
Source: stackoverflow.com
Related Query
- Highcharts: areasplinerange with fill color that takes account of direction of range
- Fill area beneath scatter points with color in Highcharts 3d scatter plot
- How to export highcharts with specified fill color for highcharts background?
- Using a fill pattern instead of colour with HighCharts
- Highcharts - Column With Negative Values - Column Color
- Highcharts - Global configuration with common code and unique data & Headings
- creating a bar chart using Highcharts with React - getting an error that rendering div isn't found
- Highcharts - Negative color with 'line' type polar chart
- Setting highcharts datalabels backgroundColor with the same color of its serie
- Negative color with area color fill and yAxis
- Highcharts with range out of bound value highlight with different color
- what means ${demo.css} in example files of highcharts ? That piece of code seems to be literal
- Highcharts - Export with background color
- passing formatting JavaScript code to HighCharts with JSON
- Highcharts column chart color by single color but with different brightness level as per respective column value
- Highcharts fill map based on data values with React TypeScript
- color in legend with range highcharts
- How to change color of bar in column chart with different level of percentage in highcharts
- Highcharts add an image to that chart with an onClick event attached to it
- Highcharts datalabels with gradient color
- highcharts redraw() with function that references newly redrawn chart
- Highcharts for multiple plot lines each with a different color and show tooltip?
- Change the legend in highcharts heatmap to show instead of a color bar, a set of fixed icons with hide and show on click
- Highlight a line with different color in Parallel coordinate chart with Highcharts
- Highcharts spider chart with radial gradient fill not centered
- What's the code in Highcharts such that the bars (columns) in the same group use the same color?
- How to manage event through a fill color with highchart?
- HighCharts does not contain a constructor that takes 1 argument in ASP.Net MVC C#
- highcharts polar chart with gradient color fills
- In highcharts how can I provide data with values x, y, title so that I can put the title in the tooltip?
More Query from same tag
- Wider navigator columns in Highstock
- Highcharts dynamic property updates when zooming
- Highcharts has incorrect vertical bar position
- How to read serie names from data table for the legend
- Highcharts how to zoom in programmatically? same as when you select and area for zooming visually?
- Plugin to convert JSON object from API to Highcharts format
- Highchart IRREGULAR Spline with drilldown - cannot get drilldown functional
- Hide Highcharts series through legend without having an empty space between them
- Disable "fill" attribute when using Styled CSS
- highstock: PlotlLines text legend does not work when having 2 x-axes
- Highlight Highcharts Organization Chart nodes
- How to load more than on CSV file in highcharts?
- Grouping x axis labels for histogram in high charts
- Render Highcharts canvas as a PNG on the page
- How to add different series data for each categories in Stacked Column chart in Highcharts?
- How to display only last point on highcharts and that point should travel with chart line?
- Combination of charts in highcharts overlapping each other
- Highstock graph shows points instead of line at certain zoom levels
- Highstock And Highcharts: How I use StockChart and pie chart on the same page
- Parse an array in js
- How dynamically set the zoom level on highcharts?
- Chart not visible
- How do I create a pie chart from VML shapes?
- Highcharts Timeline Renaming Series Labels
- Highcharts SVG accessibility
- how to draw column with value=0 in highcharts
- Highcharts change pointPlacement through javascript
- Highcharts - Disable the legend of secondary y axis by default
- Remove grid lines in highcharter R
- Highcharts - async drill-down in tree-map with thousands of items