Search code examples
chartshighchartsarea

Graph multicolor area line

i need to create graph as showed on image.

One line with color filled area, if point value is more than zero than color of line and area is green, else red.

How can i do this? JS (some plugin?) or PHP (imagick, gd)

Solution

  • You can use Highcharts area series type and define negativeColor for it. Check the docs and example posted below.

    HTML:

    <script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

    JS:

    Highcharts.chart('container', {
  chart: {
    type: 'area'
  },
  series: [{
    color: 'rgba(0, 255, 0, 0.7)',
    negativeColor: 'rgba(255, 0, 0, 0.7)',
    fillOpacity: 0.2,
    marker: {
        enabled: false
    },
    data: [5, 3, 4, 7, 2, -3, -5, -2, -7, -4, 0, 3, 4, 2, 5, 1]
  }]
});

    Demo:
    https://jsfiddle.net/BlackLabel/xa91d8o7/4/

    Docs:
    https://www.highcharts.com/demo/area-negative
    https://api.highcharts.com/highcharts/series.area