[Chartjs]-How to add Chart background borderColor gradient to Next.js

by

1👍

✅

This is because in chart.js V3 the line chart does not fill by default. You will need to import the filler plugin and tell the dataset to fill like so:

import {Chart, Filler} from 'chart.js'
import {Chart as ReactChart, Line} from 'react-chartjs-2'

Chart.register(Filler);

const data = {
  labels: labels,
  datasets: [{
    data: data,
    fill: true // Set fill to true to enable the backgroundColor under the line
  }]
}

0👍

//Importing stuff
import React from 'react';

import { Chart as ChartJS, ArcElement, CategoryScale, LinearScale, PointElement, LineElement, Filler, Tooltip, Legend, ScriptableContext, } from "chart.js";
import { Chart as ReactChart, Line } from "react-chartjs-2";
ChartJS.register(ArcElement, Tooltip, Filler, Legend, CategoryScale, LinearScale, PointElement, LineElement);

// init our Line Chart with gradient of course

export const CoinPriceChart = (props) => {

    const data = {
        labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14"],
        datasets: [
            {
                data: [22, 45, 23, 41, 18, 11, 32, 31, 63, 54, 45, 49, 54, 36],
                pointRadius: 0,
                pointHoverRadius: 2,
                backgroundColor: (context: ScriptableContext<"line">) => {
                    const ctx = context.chart.ctx;
                    const gradient = ctx.createLinearGradient(0, 0, 0, 250);
                    gradient.addColorStop(0, "rgba(91,56,237,0.45)");
                    gradient.addColorStop(1, "rgba(91,56,237,0.0)");
                    return gradient;
                }, //background gradient color
                borderColor: "rgba(91,56,237,255)", //line color
                fill: true, // this line allow us to use background gradient

            }
        ],
    };


    return (
        <div
            {...props}
        >
            <Line id="myChart" data={data} /> 
        </div>
    );
};

And here below result how it looks like:

enter image description here

And do not forget about importing this component to your main app.js file

import { CoinPriceChart } from '../shared/components';//your path of course

            <CoinPriceChart data={coinData}></CoinPriceChart>

Leave a comment