How to change position and styling of Tooltip in React Chart.js?

Question

I'm using line chart in my React Project. What I need to do is to customize the styling of tooltip and change its position. Currently it shows at the bottom left of the chart when hovered(although it shows on the hovered point of line in its official documentation). Here is my code:

import React from "react";
import { CChart } from "@coreui/react-chartjs";
import "./App.css";
const StatsChart = () => {
  const data = {
    labels: ["January", "February", "March", "April", "May", "June"],
    given: [5000, 6000, 4500, 7000, 5500, 8000],
    raised: [4000, 5500, 3500, 6000, 5000, 7000]
  };

  const options = {
    plugins: {
      legend: {
        display: false
      },
      tooltip: {
        enabled: true
      }
    }
  };

  return (
    <div className="px-6 pt-6">
      <h1>My design:</h1>
      <CChart
        options={options}
        type="line"
        data={{
          labels: data.labels,
          datasets: [
            {
              label: "Given",
              backgroundColor: "rgba(220, 220, 220, 0.2)",
              borderColor: "#00ADE9",
              pointBackgroundColor: "#00ADE9",
              pointRadius: "0",
              pointBorderColor: "#fff",
              data: data.given.map((val) => val / 100)
            },
            {
              label: "Raised",
              backgroundColor: "rgba(151, 187, 205, 0.2)",
              borderColor: "#00c98b",
              pointBackgroundColor: "#00c98b",
              pointRadius: "0",
              pointBorderColor: "#fff",
              data: data.raised.map((val) => val / 100),
              borderDash: [5, 5]
            }
          ]
        }}
      />

      <h1>What I need:</h1>
      <img src="/line-chart.png" />
    </div>
  );
};

export default StatsChart;

And here is the link of codesandbox example for better demonstration and also have attached the image of what's needed: https://codesandbox.io/s/line-chart-idf789?file=/src/App.js:0-1492

score 0 · Answer 1 · answered Jun 19 '23 at 10:45

The tooltip in Chart.js is rendered inside a div with a class charts-tooltip . You can add some custom CSS rules to style your tooltip box. I was able to change its position by setting the position to absolute.

For example, the following CSS will change the background color of the tooltip to white, the text color to blue, and the border to a 1px solid blue line:

.chartjs-tooltip {
  background: $white;
  color: $blue;
  position: absolute;
  border: 1px solid $blue;
}

How to change position and styling of Tooltip in React Chart.js?

1 Answers1