react I want to hide the y-axis values and tooltip in the react chart

Question

I am using react-chart-2.
When I hover the line graph, the tooltip is displayed, but I want to hide the tooltip when I hover the line graph.
I also want to hide the numbers 0,0.1,0.2 to 1 on the left (y-axis) of the line graph.
How can I implement this to hide the y-axis of the line graph?
Also, how do I hide the tooltip in the line graph?　
　 code

import React from "react";
import { Bar } from "react-chartjs-2";

const data = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [
    {
      label: "Sales",
      type: "line",
      data: [51, 300, 40, 49, 60, 37, 40],
      fill: false,
      borderColor: "#555555",
      backgroundColor: "#555555",
      pointBorderColor: "#000000",
      pointBackgroundColor: "#EC932F",
      pointHoverBackgroundColor: "#EC932F",
      pointHoverBorderColor: "#EC932F",
      yAxisID: "y-axis-1"
    },
    {
      type: "bar",
      label: "Visitor",
      data: [200, 185, 590, 621, 250, 400, 95],
      fill: false,
      backgroundColor: "#F7C520",
      borderColor: "#F7C520",
      hoverBackgroundColor: "#E6B71E",
      hoverBorderColor: "#E6B71E",
      yAxisID: "y-axis-1"
    }
  ]
};

const options = {
  responsive: true,
  tooltips: {
    mode: "label"
  },
  elements: {
    line: {
      fill: false
    }
  },
  scales: {
    xAxes: [
      {
        display: true,
        gridLines: {
          display: true
        }
      }
    ],
    yAxes: [
      {
        type: "linear",
        display: true,
        position: "left",
        id: "y-axis-1",
        gridLines: {
          display: true
        }
      },
      {
        type: "linear",
        display: true,
        position: "right",
        id: "y-axis-2",
        gridLines: {
          display: false
        }
      }
    ]
  }
};

class MixExample extends React.Component {
  render() {
    return (
      <div>
        <h2>Mixed data Example</h2>
        <Bar data={data} options={options} />
      </div>
    );
  }
}

export default MixExample;

score 0 · Accepted Answer · answered Dec 08 '21 at 01:55

react-chartjs-2 has 2 major versions relevant to this issue: v2, which has support for chart.js 2.9.4 and below, and v3, which significantly changes a lot of options and configurations, and which supports chart.js 3.0.0 and above.

The original fork of your codesandbox link uses chart.js: 2.9.4 and react-chartjs-2: 2.1.1, which differs from the sandbox link you provided, which uses chart.js: 3.5.1 and react-chartjs-2: 3.0.4. Notably, instead of structuring your options object like

scales: {
  x-axes: [ /* array of axis options... */],
  y-axes: [ /* array of axis options... */],
}

where each axis has an axisID property, you structure them with the axisID as the key and the rest of the original options object is the value, such as:

scales: {
    "x-axis-1": {
      display: true,
      gridLines: {
        display: false
      }
    },
    "y-axis-1": {
      type: "linear",
      display: false,
      position: "left"
    }
}

Furthermore, the tooltip can be disabled by moving the tooltip into plugins, as the chart.js docs say that tooltip is a part of plugins:

global options for the chart tooltips is defined in Chart.defaults.plugins.tooltip

Therefore, to disable the tooltip entirely:

plugins: {
  tooltip: {
    enabled: false
  }
}

Since you want to only disable the tooltip for a single dataset, the solutions found here may be of some use, but I haven't tried either for myself. It may also be possible to set the global default for Chart.JS tooltips to false, then enable it on a dataset-by-dataset basis, as displayed here, accessing it via react-chartjs-2's chart ref.

For that level of customization, I would highly suggest starting from the beginning with the most up-to-date version of react-chartjs-2 and the examples therein, rather than your current v2-configured starting point.

react I want to hide the y-axis values and tooltip in the react chart

1 Answers1