JSFiddle - React, Tailwind, and code Playground

by Torstein Hønsi

HTML

<script type="text/javascript" src="http://www.highcharts.com/js/highcharts.js"></script>

<div id="container" style="height: 300px"></div>

JavaScript

/**
 * Event handler for applying different colors above and below a threshold value. 
 * Currently this only works in SVG capable browsers. A full solution is scheduled
 * for Highcharts 3.0. In the current example the data is static, so we don't need to
 * recompute after altering the data. In dynamic series, the same event handler 
 * should be added to yAxis.events.setExtremes and possibly other events, like
 * chart.events.resize.
 */
function applyGraphGradient() {
    
    // Options
    var threshold = 0,
        colorAbove = '#EE4643',
        colorBelow = '#4572EE';
        
    // internal
    var series = this.series[0], 
        i,
        point;
        
    if (this.renderer.box.tagName === 'svg') {
        
        var translatedThreshold = series.yAxis.translate(threshold),
            y1 = Math.round(series.yAxis.len - translatedThreshold),
            y2 = y1 + 2; // 0.01 would be fine, but IE9 requires 2
        
        // Apply gradient to the path
        series.graph.attr({
            stroke: {
                linearGradient: [0, y1, 0, y2],
                stops: [
                    [0, colorAbove],
                    [1, colorBelow]
                ]
            }
         });
        

    
        // Apply gradient to the area
        if (series.area) {
            series.area.attr({
                fill: {
                    linearGradient: [0, y1, 0, y2],
                    stops: [
                        [0, colorAbove],
                        [1, colorBelow]
                    ]
                }
             });
        }        
    }
    
    
    // Apply colors to the markers
    for (i = 0; i < series.data.length; i++) {
        point = series.data[i];
        point.color = point.y < threshold ? colorBelow : colorAbove;
        if (point.graphic) {
            point.graphic.attr({
                fill: point.color
            });
        }
    }
    
    // prevent the old color from coming back after hover
   ...