Search code examples
reactjsmaterial-uireact-chartjsreact-chartjs-2

Title is undefined in react-chart

I am building a covid-19 tracker, but when data is displayed on the graph using react charts title is coming out to be undefined

This is my chart code

 <div >
  {data?.length > 0 && (
    <Line
      data={{
        datasets: [
          {
            backgroundColor: "rgba(204, 16, 52, 0.5)",
            borderColor: "#CC1034",
            data: data,
          },
        ],
      }}
      options={options}
    />
  )}
</div>

These are my option parameters

 const options = {
  legend: {
    display: false,
  },
  elements: {
    point: {
      radius: 0,
    },
  },
  maintainAspectRatio: false,
  tooltips: {
    mode: "index",
    intersect: false,
    callbacks: {
      label: function (tooltipItem, data) {
        return numeral(tooltipItem.value).format("+0,0");
      },
    },
  },
  scales: {
    xAxes: [
      {
        type: "time",
        time: {
          format: "MM/DD/YY",
          tooltipFormat: "ll",
        },
      },
    ],
    yAxes: [
      {
        gridLines: {
          display: false,
        },
        ticks: {
          // Include a dollar sign in the ticks
          callback: function (value, index, values) {
            return numeral(value).format("0a");
          },
        },
      },
    ],
  },
};

Although legend is set to false I am getting an error. Please tell me where I am going wrong, that will be helpful.

Image of a chart. enter image description here

Solution

  • You need to pass the label property here

    data={{
  datasets: [
    {
      backgroundColor: "rgba(204, 16, 52, 0.5)",
      borderColor: "#CC1034",
      data: data,
      label: "your label" // <-- pass this 
    },
  ],
}}