CODEWITHSUNDEEP
jquerychart.js
Christian Oliver
Christian Oliver

Reputation: 3

Chart.js - Hide tooltip caret

I am using chart.js 2.6.0. I want to hide the tooltip caret. I tried using 'caret: false' in tooltips option but it didn't work. How can I actually hide the caret?

options: {
      tooltips: {
         caret: false,
      },
      scales: {
         yAxes: [{
            ticks: {
               beginAtZero: true,
            }
         }]
      }
   }

Thanks in advance for your help!

Upvotes: 0

Views: 2210

Answers (2)

James
James

Reputation: 698

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
}

Upvotes: 2

ɢʀᴜɴᴛ
ɢʀᴜɴᴛ

Reputation: 32889

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
   },
   ...
}

Upvotes: 4

Related Questions