Question

52

Change Chart.js tooltip caret position

rated 0 times [ 58] [ 6] / answers: 1 / hits: 31649 / 7 Years ago, thu, may 18, 2017, 12:00:00

I created a doughnut chart using Chart.js 2.5. The issue I’m having is with the tooltip. When I hover over the chart, a tooltip is displayed with a caret that always stays in the left or right side, like this:

side

I want to change the caret position so that it always show in the bottom. Is that possible?

Here is my chart code

var myChart = new Chart(ctx, {

    type: 'doughnut',

    data: {

        labels: ['Jan', 'Feb', 'Mar'],

        datasets: [{

            label: 'dataset',

            data: [30, 50, 20],

            backgroundColor: [

            'rgb(153, 102, 255)',

            'rgb(255, 205, 86)',

            'rgb(54, 162, 235)'

            ],

        }],

    }

})

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

deanna

Add To Favorites

Follow

Total Points: 84

Total Questions: 86

Total Answers: 107

Location: Cyprus

Member since Wed, Dec 8, 2021

3 Years ago

deanna questions

1 CastError: Cast to ObjectId failed for value XXXXXXXXXX (type string) at path _id for model XXXX

Thu, Apr 21, 22, 00:00, 2 Years ago

1 Next.js behavior on back button pressed

Mon, Sep 6, 21, 00:00, 3 Years ago

1 React-Router + Typescript error while wrapping component with Router No overload matches this call

Sat, Feb 13, 21, 00:00, 3 Years ago

1 Use the webpack asset module with a custom output filename

Sun, Jan 17, 21, 00:00, 3 Years ago

1 React js random color

Sun, Nov 15, 20, 00:00, 4 Years ago

View All

answered 7 Years ago jaylynbrynnk · Accepted Answer

You could set yAlign property to bottom for tooltips in your chart options to display tooltip's caret always at the bottom position ...

options: {

    tooltips: {

        yAlign: 'bottom'

    }

}

ᴅᴇᴍᴏ

var ctx = document.getElementById(chart).getContext(2d);

var myChart = new Chart(ctx, {

    type: 'doughnut',

    data: {

        labels: ['Jan', 'Feb', 'Mar'],

        datasets: [{

            label: 'dataset',

            data: [30, 50, 20],

            backgroundColor: ['rgb(153, 102, 255)', 'rgb(255, 205, 86)', 'rgb(54, 162, 235)']

        }]

    },

    options: {

        responsive: false,

        tooltips: {

            yAlign: 'bottom'

        }

    }

});

<script src=https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js></script>

<canvas id=chart height=180></canvas>