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

Question

If there is no value in graph API response, then graph should not be plotted and also all the legends/label should be hidden

(Multiple y-axis)

When there is no value in y-axis, I am able to hide the graph.
But, unable to hide the indicator(box) which is next to the label.

I tried using some conditions to hide the label but not the indicator

Please refer to the image attached above.

Please help!

App.js

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

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

export const options = {
  responsive: true,
  interaction: {
    mode: "index",
    intersect: false,
  },
  stacked: false,
  plugins: {
    // legend: {
    //   display:false
    // },
    title: {
      display: true,
      text: "Chart.js Line Chart - Multi Axis",
    },
  },

  scales: {
    y: {
      // position: "center",
      type: "linear",
      display: true,
      position: "left",
      min: 0,
      max: 400,
      grid: {
        drawOnChartArea: false,
      },
      ticks: { count: 5 },
      offset: true,
    },
    x: {
      offset: true,
      grid: {
        drawOnChartArea: false,
      },
    },
    y1: {
      type: "linear",
      display: true,
      position: "left",
      grid: {
        drawOnChartArea: false,
      },
      ticks: {
        count: 5,
      },
      min: 0,
      max: 100,
    },
  },
};

const labels = [
  "11:40",
  "11:50",
  "00:00",
  "00:10",
  "00:20",
  "00:30",
  "00:40",
  "00:50",
];
const LineChartData = {
  TransactionId: 749508,

  ChargingRate: "45.3014",

  SoC: [
    // {
    //   ValueTimeStamp: "2023-07-27T09:46:50.000Z",
    //   MeterValue: "97",
    //   Unit: "Percent",
    // },
    // {
    //   ValueTimeStamp: "2023-07-27T09:46:46.000Z",
    //   MeterValue: "97",
    //   Unit: "Percent",
    // },
    // {
    //   ValueTimeStamp: "2023-07-27T09:45:46.000Z",
    //   MeterValue: "96",
    //   Unit: "Percent",
    // },
    // {
    //   ValueTimeStamp: "2023-07-27T09:44:46.000Z",
    //   MeterValue: "95",
    //   Unit: "Percent",
    // },
    // {
    //   ValueTimeStamp: "2023-07-27T09:43:46.000Z",
    //   MeterValue: "93",
    //   Unit: "Percent",
    // },
    // {
    //   ValueTimeStamp: "2023-07-27T09:42:46.000Z",
    //   MeterValue: "92",
    //   Unit: "Percent",
    // },
    // {
    //   ValueTimeStamp: "2023-07-27T09:41:46.000Z",
    //   MeterValue: "90",
    //   Unit: "Percent",
    // },
    // {
    //   ValueTimeStamp: "2023-07-27T09:40:47.000Z",
    //   MeterValue: "88",
    //   Unit: "Percent",
    // },
  ],
  Power: [
    {
      ValueTimeStamp: "2023-07-27T09:46:50.000Z",
      MeterValue: "0.0",
      Unit: "W",
    },
    {
      ValueTimeStamp: "2023-07-27T09:46:46.000Z",
      MeterValue: "31593.0",
      Unit: "W",
    },
    {
      ValueTimeStamp: "2023-07-27T09:45:46.000Z",
      MeterValue: "37282.0",
      Unit: "W",
    },
    {
      ValueTimeStamp: "2023-07-27T09:44:46.000Z",
      MeterValue: "44406.0",
      Unit: "W",
    },
    {
      ValueTimeStamp: "2023-07-27T09:43:46.000Z",
      MeterValue: "50854.0",
      Unit: "W",
    },
    {
      ValueTimeStamp: "2023-07-27T09:42:46.000Z",
      MeterValue: "58069.0",
      Unit: "W",
    },
    {
      ValueTimeStamp: "2023-07-27T09:41:46.000Z",
      MeterValue: "63113.0",
      Unit: "W",
    },
    {
      ValueTimeStamp: "2023-07-27T09:40:47.000Z",
      MeterValue: "59418.0",
      Unit: "W",
    },
  ],
};

export const data = {
  labels,
  datasets: [
    {
      data: LineChartData.SoC.map((meterValue) => {
        return meterValue.MeterValue;
      }),
      label: LineChartData.SoC.length === 0 ? "" : "Consumption",
      borderColor: "rgb(255, 99, 132)",
      backgroundColor: "rgba(255, 99, 132, 0.5)",
      yAxisID: "y",
    },
    {
      label: "Power",
      data: LineChartData.Power.map((meterValue) => {
        return meterValue.MeterValue;
      }),
      borderColor: "rgb(53, 162, 235)",
      backgroundColor: "rgba(53, 162, 235, 0.5)",
      yAxisID: "y1",
    },
  ],
};
console.log(data);

export default function App() {
  return (
    <div>
      {LineChartData.Power.length === 0 ? (
        ""
      ) : (
        <Line options={options} data={data} />
      )}
    </div>
  );
}

NOTE: Commented lines under Soc array represent that Soc doesn't have data. Therefore, expected result should be like: 1.Graph for that SoC will not be plotted 2.Label for Soc will not be shown if no data is available. 3.Also the indicator(box) next to label will not be shown.

Please include a runnable example code, possibly as a stackblitz or codesandbox. BTW there's no image in the post, you may edit the question to correct the image problem, but without code it's very unlikely anyone will answer it. — kikon, Aug 04 '23 at 19:57
Please provide enough code so others can better understand or reproduce the problem. — Abhishek Vyas, Aug 05 '23 at 07:06

score 0 · Answer 1 · answered Aug 07 '23 at 09:10

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

Aman Gupta · Answer 2 · 2023-08-08T12:15:33.310

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;

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Aug 12 '23 at 05:56

score 0 · Answer 3 · answered Aug 08 '23 at 13:00

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
};

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

3 Answers3