CODEWITHSUNDEEP
reactjschart.js
Vincent Teyssier
Vincent Teyssier

Reputation: 2217

chartjs: bars smaller than actual column, tooltip doesn't display

enter image description here

As you can see my bars are not covering the entire width of the label 'column'. My tooltip only shows if I am exactly hovering the bar, or, if I remove the bars, exactly on the line point.

options: {
    plugins: {
        legend: { display: false },
        title: { display: false },
        tooltip: {
            displayColors: false, backgroundColor: '#ffffff',
            bodyColor: '#595f69', bodyFont: {size: 14},
            borderColor: '#595f69', borderWidth: 1,
            titleFont: {size: 0}
        }
    },
    responsive: true, aspectRatio: 4,
    scales: {
        y: { display: true, suggestedMin: 0, suggestedMax: 80, ticks: { stepSize: 20 } },
        y1: {display: false, suggestedMin: 0, suggestedMax: 80, ticks: { stepSize: 2 }},
        x: { grid: { drawBorder: false, display: false } }

I tried plugins like chartjs crosshair, but don't manage to make it work with typescript.

How can I make it so that anywhere my mouse hover in the label 'column' area, the tooltip displays?

Upvotes: 0

Views: 1235

Answers (2)

LeeLenalee
LeeLenalee

Reputation: 31371

You can set the intersect property to false to always get the tooltip without needing to intersect the bar exactly:

var options = {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      borderWidth: 1
    }]
  },
  options: {
    plugins: {
      tooltip: {
        intersect: false
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"></script>
</body>

Upvotes: 3

Jesper
Jesper

Reputation: 1086

You can make your own tooltip by editing the callbacks, i had to get the nearest values around my cursor, from all datasets, on my line chart. this works for me on Chartjs 2.9.3:

tooltips: {
    mode: "x",
    position: "nearest",
    intersect: false,
    callbacks: {
        beforeBody: function(tooltipItems, allData) {
            let x = tooltipItems[0].x; // get x coordinate

            let datasets = allData.datasets; // datasets
    
            let values = [];
            for (i in datasets) {
                let dataset = datasets[i]; 

                let meta = this._chart.getDatasetMeta(i); // dataset metadata
                let xScale = this._chart.scales[meta.xAxisID]; // dataset's x axis
                let xValue = xScale.getValueForPixel(x); // we get the x value on the x axis with x coordinate

                let data = dataset.data // data

                // search data for the first value with a bigger x value
                let index = data.findIndex(function(o) { 
                    return o.x >= xValue; 
                });

                let value = data[index]; // this is our nearest value

                // format label
                if (isNaN(value.ymax)) {
                    values.push(`${dataset.label}: ${value.y}\n`);
                } else {
                    values.push(`${dataset.label}: ${value.y}, min: ${value.ymin}, max: ${value.ymax}\n`)
                }
            }

            return values.join(""); // return label
        },

        label: function() { // this needs to be empty

        },
    }
},

Upvotes: 0

Related Questions