Open mnsrv opened 8 years ago
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" />;
},
});
@sashamjolnir, any luck getting gradient fills with react-chartjs?
Has anyone figured this out yet? 😔
I solved this by using chartjs by itself, not this library
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?