score:2

Accepted answer

yes -- chartjs/react-chartjs-2 does support this. in order to do this, you need to:

  1. import/register the chart.js filler plugin (mentioned in the docs for area charts)
  2. set the tension of the line (to make the lines curve), and;
  3. set the fill options for the dataset.

following these steps this will produce:

example of line chart as area chart

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


Related Query

More Query from same tag