I want to create a Line chart, styled as an Area Chart, in React by using the chartJS library ('react-chartjs-2')
This is what I want to achieve, like background (fill) with some opacity below the line:
Code:
import React from 'react';
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend,
} from 'chart.js';
import { Line } from 'react-chartjs-2';
import faker from 'faker';
ChartJS.register(
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend
);
export const options = {
responsive: true,
plugins: {
legend: {
position: 'top' as const,
},
title: {
display: true,
text: 'Chart.js Line Chart',
},
},
};
const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
export const data = {
labels,
datasets: [
{
label: 'Dataset 1',
data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
borderColor: 'rgb(255, 99, 132)',
backgroundColor: '#000000',
fill: {
target: 'origin',
above: 'rgb(255, 0, 0)', // Area will be red above the origin
below: '#000000' // And blue below the origin
}
},
{
label: 'Dataset 2',
data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
borderColor: 'rgb(53, 162, 235)',
backgroundColor: 'rgba(53, 162, 235, 0.5)',
},
],
};
export function App() {
return <Line options={options} data={data} />;
}
How can I achieve this with ChartJS ('react-chartjs-2')?
Yes -- ChartJS/react-chartjs-2 does support this. In order to do this, you need to:
Filler
plugin (Mentioned in the docs for Area Charts)tension
of the line (to make the lines curve), and;fill
options for the dataset.Following these steps this will produce:
For example:
import React from "react";
import { Line } from "react-chartjs-2";
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend,
Filler // 1. Import Filler plugin
} from "chart.js";
import faker from "faker";
ChartJS.register(
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend,
Filler // 1. Register Filler plugin
);
export const options = {
responsive: true,
tension: 0.3 // 2. Set the tension (curvature) of the line to your liking. (You may want to lower this a smidge.)
};
const labels = ["January", "February", "March", "April", "May", "June", "July"];
export const data = {
labels,
datasets: [
{
label: "Dataset 1",
data: labels.map(() => faker.datatype.number({ min: 0, max: 500 })),
borderColor: "rgb(255, 99, 132)",
backgroundColor: "rgba(255, 0, 0)",
fill: {
target: "origin", // 3. Set the fill options
above: "rgba(255, 0, 0, 0.3)"
}
},
{
label: "Dataset 2",
data: labels.map(() => faker.datatype.number({ min: 0, max: 500 })),
borderColor: "rgb(53, 162, 235)",
backgroundColor: "rgba(53, 162, 235, 0.3)",
fill: "origin" // 3. Set the fill options
}
]
};
export function App() {
return <Line options={options} data={data} />;
}
Working CodeSanbox: https://codesandbox.io/s/chartjs-area-chart-p1o023?file=/App.tsx:817-846