0

I have a highchart of type "arearange" line, such like

http://jsfiddle.net/gh/get/jquery/3.1.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/arearange-line/

I want to use negative color for line, whenever the line is going beyond (or crossing) the range value. To achive this we can use "threshold" in "series" attribute, but my problem is, i do not have a single threshold value, when ever the line crosses the range value, i want to plot the line in negative color.

Below is the sample code can be executed in above fiddle link. Where i mentioned few values (for example) to be plotted in negative color, which is indicated in below code with command line ("Here i want a negative color").

$(function () {

    var ranges = [
            [1246406400000, 14.3, 27.7],
            [1246492800000, 14.5, 27.8],
            [1246579200000, 15.5, 29.6],
            [1246665600000, 16.7, 30.7],
            [1246752000000, 16.5, 25.0],
            [1246838400000, 17.8, 25.7],
            [1246924800000, 13.5, 24.8],
            [1247011200000, 10.5, 21.4],
            [1247097600000, 9.2, 23.8],
            [1247184000000, 11.6, 21.8],
            [1247270400000, 10.7, 23.7],
            [1247356800000, 11.0, 23.3],
            [1247443200000, 11.6, 23.7],
            [1247529600000, 11.8, 20.7],
            [1247616000000, 12.6, 22.4],
            [1247702400000, 13.6, 19.6],
            [1247788800000, 11.4, 22.6],
            [1247875200000, 13.2, 25.0],
            [1247961600000, 14.2, 21.6],
            [1248048000000, 13.1, 17.1],
            [1248134400000, 12.2, 15.5],
            [1248220800000, 12.0, 20.8],
            [1248307200000, 12.0, 17.1],
            [1248393600000, 12.7, 18.3],
            [1248480000000, 12.4, 19.4],
            [1248566400000, 12.6, 19.9],
            [1248652800000, 11.9, 20.2],
            [1248739200000, 11.0, 19.3],
            [1248825600000, 10.8, 17.8],
            [1248912000000, 11.8, 18.5],
            [1248998400000, 10.8, 16.1]
        ],
        averages = [
            [1246406400000, 81.5],**//Here i want a negative color**
            [1246492800000, 22.1],
            [1246579200000, 3], **//Here i want a negative color**
            [1246665600000, 23.8],
            [1246752000000, 21.4],
            [1246838400000, 21.3],
            [1246924800000, 18.3],
            [1247011200000, 15.4],
            [1247097600000, 16.4],
            [1247184000000, 17.7],
            [1247270400000, 17.5],
            [1247356800000, 17.6],
            [1247443200000, 17.7],
            [1247529600000, 16.8],
            [1247616000000, 17.7],
            [1247702400000, 16.3],
            [1247788800000, 17.8],
            [1247875200000, 18.1],
            [1247961600000, 17.2],
            [1248048000000, 14.4],
            [1248134400000, 13.7],
            [1248220800000, 15.7],
            [1248307200000, 34.6],**//Here i want a negative color**
            [1248393600000, -15.3],
            [1248480000000, 15.3],
            [1248566400000, 15.8],
            [1248652800000, 15.2],
            [1248739200000, 14.8],
            [1248825600000, 14.4],
            [1248912000000, 15],
            [1248998400000, 90.6] `//Here i want a negative color`
        ];


    Highcharts.chart('container', {

        title: {
            text: 'July temperatures'
        },

        xAxis: {
            type: 'datetime'
        },

        yAxis: {
            title: {
                text: null
            }
        },

        tooltip: {
            crosshairs: true,
            shared: true,
            valueSuffix: '°C'
        },

        legend: {
        },

        series: [{
            name: 'Temperature',
            data: averages,
            zIndex: 1,
            marker: {
                fillColor: 'white',
                lineWidth: 2,
                lineColor: Highcharts.getOptions().colors[0]
            }
        }, {
            name: 'Range',
            data: ranges,
            type: 'arearange',
            lineWidth: 0,
            linkedTo: ':previous',
            color: Highcharts.getOptions().colors[0],
            fillOpacity: 0.3,
            zIndex: 0
        }]
    });
});
user2000189
  • 479
  • 4
  • 6
  • 22
  • How should a negative point be colored? Should it color its marker, line connecting the next point, previous point or both points? The whole line or only part of it which is above/under the area? – morganfree Dec 20 '16 at 13:21

1 Answers1

1

Using zones or multicolor series plugin can give you expected effect. You can also find the answer to your question here, at the official Highcharts forum: http://forum.highcharts.com/highcharts-usage/arearange-dynamic-threshold-value-change-color-t37236/.

$(function() {
  var ranges = [
      [1246406400000, 14.3, 27.7],
      [1246492800000, 14.5, 27.8],
      [1246579200000, 15.5, 29.6],
      [1246665600000, 16.7, 30.7],
      [1246752000000, 16.5, 25.0],
      [1246838400000, 17.8, 25.7],
      [1246924800000, 13.5, 24.8],
      [1247011200000, 10.5, 21.4],
      [1247097600000, 9.2, 23.8],
      [1247184000000, 11.6, 21.8],
      [1247270400000, 10.7, 23.7],
      [1247356800000, 11.0, 23.3],
      [1247443200000, 11.6, 23.7],
      [1247529600000, 11.8, 20.7],
      [1247616000000, 12.6, 22.4],
      [1247702400000, 13.6, 19.6],
      [1247788800000, 11.4, 22.6],
      [1247875200000, 13.2, 25.0],
      [1247961600000, 14.2, 21.6],
      [1248048000000, 13.1, 17.1],
      [1248134400000, 12.2, 15.5],
      [1248220800000, 12.0, 20.8],
      [1248307200000, 12.0, 17.1],
      [1248393600000, 12.7, 18.3],
      [1248480000000, 12.4, 19.4],
      [1248566400000, 12.6, 19.9],
      [1248652800000, 11.9, 20.2],
      [1248739200000, 11.0, 19.3],
      [1248825600000, 10.8, 17.8],
      [1248912000000, 11.8, 18.5],
      [1248998400000, 10.8, 16.1]
    ],
    averages = [{
        x: 1246406400000,
        y: 81.5,
        segmentColor: Highcharts.getOptions().colors[3],
        marker: {
          fillColor: Highcharts.getOptions().colors[3]
        }
      },
      [1246492800000, 22.1],
      [1246579200000, 23],
      [1246665600000, 23.8],
      [1246752000000, 21.4],
      [1246838400000, 21.3],
      [1246924800000, 18.3],
      [1247011200000, 15.4],
      [1247097600000, 16.4],
      [1247184000000, 17.7], {
        x: 1247270400000,
        y: 17.5,
        segmentColor: Highcharts.getOptions().colors[3]
      }, {
        x: 1247356800000,
        y: 77.6,
        segmentColor: Highcharts.getOptions().colors[3],
        marker: {
          fillColor: Highcharts.getOptions().colors[3]
        }
      },
      [1247443200000, 17.7],
      [1247529600000, 16.8],
      [1247616000000, 17.7],
      [1247702400000, 16.3],
      [1247788800000, 17.8],
      [1247875200000, 18.1],
      [1247961600000, 17.2],
      [1248048000000, 14.4],
      [1248134400000, 13.7],
      [1248220800000, 15.7], {
        x: 1248307200000,
        y: 14.6,
        segmentColor: Highcharts.getOptions().colors[3],
      }, {
        x: 1248393600000,
        y: -5,
        segmentColor: Highcharts.getOptions().colors[3],
        marker: {
          fillColor: Highcharts.getOptions().colors[3]
        }
      },
      [1248480000000, 15.3],
      [1248566400000, 15.8],
      [1248652800000, 15.2],
      [1248739200000, 14.8],
      [1248825600000, 14.4],
      [1248912000000, 15],
      [1248998400000, 13.6]
    ];

  Highcharts.chart('container', {
    title: {
      text: 'July temperatures'
    },
    xAxis: {
      type: 'datetime'
    },
    yAxis: {
      title: {
        text: null
      }
    },
    tooltip: {
      crosshairs: true,
      shared: true,
      valueSuffix: '°C'
    },
    series: [{
      name: 'Temperature',
      data: averages,
      type: 'coloredline',
      zIndex: 1,
    }, {
      name: 'Range',
      data: ranges,
      type: 'arearange',
      lineWidth: 0,
      linkedTo: ':previous',
      color: Highcharts.getOptions().colors[0],
      fillOpacity: 0.3,
      zIndex: 0
    }]
  });
});

API Reference:

http://api.highcharts.com/highcharts/series%3Cline%3E.zones

Examples:

http://jsfiddle.net/k1bL3umw/ - using zones

http://jsfiddle.net/q0uh8z34/ - using multi color series plugin

pawel_d
  • 3,061
  • 1
  • 8
  • 13