4

I'm trying to fit line charts into some very small table cells:

enter image description here

As you can see, the rightmost point's tooltip gets slightly cut off. This is the only one that causes a problem.

The easiest fix would probably be to put a higher z-index on the tooltip, but I've googled it and I don't think that's possible. Instead, is it possible to make the tooltip display on the left side of the point instead of below it? That's what the second to last point does:

enter image description here

Here are my chart options:

public lineChartOptions:any = {
responsive: false,
tooltips: {
  yPadding: 2,
  xPadding: 2,
  caretPadding: 5,
  caretSize: 3,
  displayColors: false,
},
layout: {
  padding: {
    left: 5,
    right: 5,
    top: 5,
    bottom: 5,
  }
},
scales: {
  yAxes: [{
    ticks: {
      //stepSize: 50,
      max: 150,
      beginAtZero: true,
      display: true,
    }
  }],
  xAxes: [{
    display: false,
  }]
}
};

Any help is appreciated.

Jesper
  • 2,644
  • 4
  • 30
  • 65

0 Answers0