Chartjs-Chart.js – Hide tooltip caret

by

3👍

✅

To hide tooltip­‘s caret, you’d need to set caretSize property to 0 for tooltips, in your chart options, as such :

options: {
   tooltips: {
      caretSize: 0
   },
   ...
}

1👍

I remember using them some time ago.
Basically to turn them off is to put the caretSize to zero.

// Options
{
    tooltips: {
        caretSize: 0
    }
}

Here’s the option list (although not complete) taken from the repository

{
    enabled: true,
    custom: null,
    mode: 'nearest',
    position: 'average',
    intersect: true,
    backgroundColor: 'rgba(0,0,0,0.8)',
    titleFontStyle: 'bold',
    titleSpacing: 2,
    titleMarginBottom: 6,
    titleFontColor: '#fff',
    titleAlign: 'left',
    bodySpacing: 2,
    bodyFontColor: '#fff',
    bodyAlign: 'left',
    footerFontStyle: 'bold',
    footerSpacing: 2,
    footerMarginTop: 6,
    footerFontColor: '#fff',
    footerAlign: 'left',
    yPadding: 6,
    xPadding: 6,
    caretPadding: 2,
    caretSize: 5,
    cornerRadius: 6,
    multiKeyBackground: '#fff',
    displayColors: true,
    borderColor: 'rgba(0,0,0,0)',
    borderWidth: 0
}

Leave a comment