CODEWITHSUNDEEP
javascripthtmlreactjschartschart.js
D.Zet
D.Zet

Reputation: 779

ChartJS - tooltip of one element is covering point that user should be able to select

I have chord generated by ChordJS library. Almost everything is great but with some specific data I have problem becouse of tooltip position. I tried to change this with different options but I couldn't handle that - there are two separatet views at my chord. One with columns so every point inside of column is triggering tooltip. Second one is bar char with some points to select and only when mouse is at these points tooltip is shown.

Here You can see tooltip for column - it's covering bar with point to select.

enter image description here

Here is point at barchart:

enter image description here

I think I have to handle that with options parameter so here what I have for that moment ('tooltips' were changed a lot of times)

    chartOptions = {
    // Set colors on bars when clicked
    onClick: function (e, activeElements) {
        if (activeElements[0]) {
            let barNumber = this.data.datasets[0].backgroundColor.length
            var elementIdx = activeElements[0]._index;
            let colors = self.fillColorArray(mintColor, yellowColor, yellowColor, elementIdx, barNumber);
            this.data.datasets[0].backgroundColor = colors;
            self.props.selectCharBar(elementIdx);
        }
    },
    scaleShowVerticalLines: false,
    responsive: true,
    scales: {
        xAxes: [{
            id: 'xAxisA',
            gridLines: {
                offsetGridLines: true
            }
        }],
        yAxes: [{
            id: 'yAxisA',
            type: 'linear',
            position: 'left',
            ticks: {
                min: 0,
                callback: function (value, index, values) {
                    return value.toLocaleString();
                }
            }
        }]
    },
    legend: {
        labels: {
            //Workaround for legend color change when first bar selected by user:
            generateLabels: function (chart) {
                let labels = ChartJs.defaults.global.legend.labels.generateLabels(chart);
                if (labels[0]) labels[0].fillStyle = mintColor;
                return labels;
            }
        }
    },
    tooltips: {
        position: 'average',
        intersect: true,
    }
};

What I want to achieve? Probably position of tooltip to mirror reflection of it can help but I have problems to do that. Or maybe someone has other idea?

Upvotes: 0

Views: 320

Answers (1)

H. Figueiredo
H. Figueiredo

Reputation: 928

So, I think I've figured out your problem! Your tooltip parameters should be inside an options argument!

Like this: 

options:{
  tooltips: {
      custom:function(tooltipModel)
      {
        tooltipModel.yAlign="bottom";
        tooltipModel.y=tooltipModel.y-30;
      },
      intersect:true
    }
}

I would advise that you wouldn't make the tooltip follow the mouse, it can easily block more elements rather than making them visible.

I've prepared a fiddle with random data, and with a custom function I've forced the tooltip to always be on top. You can also console.log(tooltipModel) and mess around with the parameters for the intended styles.

Hope this helps you.

JSFiddle

Upvotes: 1

Related Questions