Gradient fill in LineChart

[mnsrv]

How can i do gradient in LineChart like this using react-chartjs? As I think, I need to reach DOM element canvas, add gradient, then pass it in data object (datasets => fillColor). But how can I do this in using react-chartjs. I tried wait when componentDidMount, then get element through ref, add gradient, change State. But it didn't work. I think it must be more React way to do this. How it can be done by this component?

import React from 'react';
const LineChart = require('react-chartjs').Line;

export default React.createClass({
  getInitialState() {
    return {
      data: {
        labels: this.props.data.map(obj => obj.datetime),
        datasets: [
          {
            fillColor: 'red',
            data: this.props.data.map(obj => obj.price),
          },
        ],
      },
    };
  },
  componentDidMount() {
    const _chartObject = this.refs.chart.getCanvas().getContext('2d');
    const gradient = _chartObject.createLinearGradient(0, 0, 0, 400);
    gradient.addColorStop(0, 'rgba(250,174,50,1)');
    gradient.addColorStop(1, 'rgba(250,174,50,0)');
    this.setState({
      data: {
        labels: this.props.data.map(obj => obj.datetime),
        datasets: [
          {
            fillColor: gradient,
            data: this.props.data.map(obj => obj.price),
          },
        ],
      },
    });
  },
  render() {
    this.chartOptions = {
      // Boolean - If we should show the scale at all
      showScale: false,
      // Boolean - Whether to show a dot for each point
      pointDot: false,
      // Boolean - Whether to show a stroke for datasets
      datasetStroke: false,
    };
    return (
      <LineChart
        data={this.state.data}
        options={this.chartOptions} width="300" height="150" ref="chart"
      />
    );
  },
});

[mnsrv]

This code in pure Chart.js works.

import React from 'react';
import Chart from 'chart.js';

export default React.createClass({
  componentDidMount() {
    const ctx = this.refs.chart.getContext('2d');
    const x = this.props.data.map(obj => obj.datetime);
    const y = this.props.data.map(obj => obj.price);
    const gradient = ctx.createLinearGradient(0, 0, 0, 400);
    gradient.addColorStop(0, 'rgba(250,174,50,1)');
    gradient.addColorStop(1, 'rgba(250,174,50,0)');
    const data = {
      labels: x,
      datasets: [
        {
          fillColor: gradient,
          data: y,
        },
      ],
    };
    const options = {
      // Boolean - If we should show the scale at all
      showScale: false,
      // Boolean - Whether to show a dot for each point
      pointDot: false,
      // Boolean - Whether to show a stroke for datasets
      datasetStroke: false,
    };
    /* eslint new-cap: ["error", {"capIsNewExceptions": ["Line"]}] */
    const myLineChart = new Chart(ctx).Line(data, options);
  },
  render() {
    return <canvas className="chart" width="300" height="150" ref="chart" />;
  },
});

[andrewcoelho]

@sashamjolnir, any luck getting gradient fills with react-chartjs?

[yocontra]

Has anyone figured this out yet? 😔

[mnsrv]

I solved this by using chartjs by itself, not this library