How to add Chart background borderColor gradient to Next.js

user_17880509 0
Viewed 116

I want to add gradient to my chart background. Here below an example:

enter image description here

I'm using Next.js and react-chart.js.

Here below an example of my code:


import { ChartProps } from "./Chart.props";
import styles from "./Chart.module.css";
import React, { useState, useEffect, useRef } from 'react';

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

import { optionsChart } from "./ChartConfig.js";




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,
                borderColor: "rgba(91,56,237,255)",

            }
        ],
        options: {
            ...optionsChart
        },
    };


    return (
        <div
            className={styles.CardList}
            {...props}
        >
            <Line id="myChart" data={data} options={optionsChart}/>
        </div>
    );
};

Once I'd tried something like this:

enter image description here

But in React (not in Node.js). In Node.js it doesn't work for me.

And here below how my chart looks like (now):

enter image description here

Waiting for your propositions. Thanks in advance!

react-chartjs chart.js next.js line charts
2 Answers

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
  }]
}
user_86829830 
//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>
user_178805090
Related