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

by

0👍

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

Leave a comment