CODEWITHSUNDEEP
csshighchartsgradient
Victor Castillo Torres
Victor Castillo Torres

Reputation: 10811

How to achieve this graph with highcharts

How could I achieve the chart below as accurate as possible?

I'm trying to achieve the chart in the picture below with highcharts, the problem I have is that I can't achieve the gradients and the purple cut-line

this is what I have donde so far : jsFiddle

$(function () {
    $('#container').highcharts({
    chart: {
      type: 'areaspline'
    },
  options: {
    title: {
      text: "Historical report"
    },
    heigth: 200

  },
  legend: {
    layout: 'vertical',
    align: 'left',
    verticalAlign: 'top',
    x: 150,
    y: 100,
    floating: true,
    borderWidth: 1,
    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
  },
  xAxis: {
    categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
    plotBands: [
      {
        from: 4.5,
        to: 6.5,
        color: 'rgba(68, 170, 213, .2)'
      }
    ]
  },
  yAxis: {
    title: {
      text: 'Fruit units'
    }
  },
  tooltip: {
    shared: true,
    valueSuffix: ' units'
  },
  credits: {
    enabled: false
  },
  plotOptions: {
    areaspline: {
      fillOpacity: 0.5
    }
  },
  series: [
    {
      name: 'John',
      data: [3, 9, null, 5, 4, 10, 12],
      lineColor: "#5A66AF"
    }, {
      name: 'Jane',
      data: [1, 10, null, 3, 3, 5, 4],
      lineColor: '#47a06b'
    }, {
      name: 'Roberto',
      data: [10, 15, null, 15, 9, 9, 4],
      lineColor: '#2ba9db'
    }
  ]
});

});

enter image description here

Upvotes: 0

Views: 57

Answers (1)

jlbriggs
jlbriggs

Reputation: 17791

The line is achieved by the DashStyle property:

The gradient fill is a matter of defining the gradient stops in the fillColor property:

(though, FWIW, that extreme white end to the gradient is reeeeally distracting...)

Upvotes: 2

Related Questions