Styling background (fill) with ChartJs and React

Question

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')?

Does the documentation for ChartJS say that it can create this type of chart? — Andy, Mar 09 '22 at 18:03
They say that everything is the same as in chartJS, the type of chart is Line - in the documentation they say that we can use it. Maybe I doing it with wrong way? — Time Buy, Mar 09 '22 at 18:18
Does this answer your question? [react-chartjs-2 fill property not working?](https://stackoverflow.com/questions/70257425/react-chartjs-2-fill-property-not-working) — LeeLenalee, Mar 09 '22 at 19:35

Steve · Accepted Answer · 2022-03-09T19:28:28.727

Yes -- ChartJS/react-chartjs-2 does support this. In order to do this, you need to:

Import/register the chart.js Filler plugin (Mentioned in the docs for Area Charts)
Set the tension of the line (to make the lines curve), and;
Set the 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

Great answer. Thanks a lot! How can I send you Beer? :) – Time Buy Mar 10 '22 at 13:35 — Time Buy, Mar 10 '22 at 13:35
That was amazing expatiation. – dipenparmar12 Apr 13 '23 at 10:31 — dipenparmar12, Apr 13 '23 at 10:31

Styling background (fill) with ChartJs and React

1 Answers1