CODEWITHSUNDEEP
javascriptreactjschartshighchartsreact-highcharts
Arslan Tariq
Arslan Tariq

Reputation: 2528

Gradient fill for react-highcharts' line chart

I have created a line chart using react-highcharts. And this is how it looks: lineChart. Now, I am trying to add color-fill gradient under the line and this is what I am doing:

render() {
  let config = {
    chart: {
      animation: {
        duration: 1000
      }
    },
    plotOptions: {
      area: {
        lineWidth: 1,
        marker: {
          enabled: false,
          states: {
            hover: {
              enabled: true,
              radius: 5
            }
          }
        },
        shadow: false,
        states: {
          hover: {
            lineWidth: 1
          }
        }
      }
    },
    rangeSelector: {
      buttons: [{
        type: 'month',
        count: 1,
        text: '1m'
      }, {
        type: 'month',
        count: 3,
        text: '3m'
      }, {
        type: 'month',
        count: 6,
        text: '6m'
      }, {
        type: 'year',
        count: 1,
        text: '1y'
      }, {
        type: 'all',
        text: 'All'
      }],
      selected: 0,
      inputEnabled: false,
    },
    title: {
      text: 'Progress Chart'
    },
    series: [{
      name: 'Account Balance',
      data: this.getProgressData(),
      type: 'area',
      fillColor: {
        linearGradient: [0, 0, 0, 300],
        stops: [
          [0, '#4286f4'],
          [1, '#ffffff']
        ]
      },
      tooltip: {
        valueDecimals: 2
      }
    }],
    yAxis: { gridLineWidth: 0 },
    xAxis: { gridLineWidth: 2 },
  };

  return(
    <div>
      <ReactHighstock config={config}/>
    </div>
  )
}

I am getting the gradient working but the problem is I am getting a flat chart without pikes, like this: lineChartWithGradient. I want my chart to look like the previous one but with a gradient color-fill.

Upvotes: 4

Views: 2167

Answers (1)

Kamil Kulig
Kamil Kulig

Reputation: 5826

Please notice how values on your x axis changed. Line chart adjust extremes using minimum and maximum value. Area chart has additional parameter threshold (http://api.highcharts.com/highcharts/plotOptions.area.threshold) that specifies where the area should start. It's 0 by default.

You can find the minimum in your data and set threshold like this:

var data = [50, 71.5];
(...)
// chart options
threshold: Math.min(...data)

Live working example: http://jsfiddle.net/kkulig/fznqthhw/

Upvotes: 2

Related Questions