Chartjs-Not able to hide the (indicator) box which is next to the label in Line Graph

by

0👍

You need to check if the response you are getting from API is empty or not. If empty then do not create a graph. Simple.

let data = {…}; // your API response

let isEmpty = Object.values(data.datasets).every(dataset => dataset.data.length === 0);

Now check here if isEmpty value and then create graph if it returns the true value

0👍

Adding legend property as none can remove the indicator box.

import React from 'react';
import {
    Chart as ChartJS,
    CategoryScale,
    LinearScale,
    BarElement,
    Title,
    Tooltip,
    Legend,
} from 'chart.js';
import { Bar } from 'react-chartjs-2';

ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);

export const options = {
    maintainAspectRatio: false, 
    responsive: true, 
    plugins: {
        legend: {
            position: 'none', // set this none to remove indicator box
        },
        title: {
            display: true,
            text: '',
        },
    },
    scales: {
        x: {
            grid: {
                display: false,
            },
        },
    },
};

const labels = ['January', 'Feb', 'Mar', 'April', 'May', 'June', 'July'];

export const data = {
    labels,
    datasets: [
        {
            label: 'Revenue',
            barThickness: 24,
            borderRadius: 4,
            hoverBackgroundColor: '#62D974',
            backgroundColor: 'red',
            data: [200, 400, 200, 100, 120, 600, 500, 600],
            backgroundColor: '#62D974',
        },
    ],
};

const BarChart = () => {
    return <Bar options={options} data={data} />;
};
export default BarChart;

0👍

you have to add a useEffect function in the code, and maintain a separate state for dataSets. Use that state variable for the datasets. If there are not data, update the state and use it in datasets.

const [stateVaraible, useStateVariable] = useState([])

stateVaraible = [{}] // if there is only one object

export const data = {
  labels,
  datasets: [stateVaraible]. // update this variable if not data is there
};

Leave a comment