Custom Tooltip for ng2-charts

user_10484916 0
Viewed 2042

I was doing some research and I was wondering if it is possible to make a custom tooltip like in chart.js, I couldn't find anything. I would like to add some css to my tooltip! I am using angular5.

ng2-charts angular5 typescript
1 Answers

Try to add this in your chart options:

public barChartOptions: ChartOptions = {
...
 tooltips: {
      backgroundColor: 'rgba(255,255,0,0.5)',
      bodyFontColor: 'blue',
      borderColor: '#0ff',
      borderWidth: 5,
      caretPadding: 10,
      displayColors: false,
      enabled: true,
      intersect: true,
      mode: 'x',
      titleFontColor: '#333',
      titleMarginBottom: 10,
      xPadding: 20,
      yPadding: 15,
      // If you want to custom the value
      callbacks: {
        label: function (tooltipItem, data) {
          const datasetLabel = data.datasets[tooltipItem.datasetIndex].label || '';
          return  datasetLabel + ': $' + tooltipItem.yLabel;
        }
      }
    },
}

See also this answer: https://stackoverflow.com/a/54890570

user_65787230
Related