Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chart.js doughnut chart tooltip size?

i'm want to resize tooltips on chart. I've used global settings but doesn't work. Tooltips on my charts are too small. Here is the view

$(document).ready(function () {
    // Chart options
    Chart.defaults.global.legend.display = false;
    Chart.defaults.global.titleFontSize = 20;
    var ctx = document.getElementById("Chart1");
    var myChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: [
                "Produkty",
                ""
            ],
            datasets: [
            {
                data: <?=json_encode(array_values($values));?>,
                backgroundColor: [
                    "#2ecc71",
                    "#3498db"
                ],
                hoverBackgroundColor: [
                    "#27ae60",
                    "#2980b9"
                ]
            }]
        },
        options: {
            cutoutPercentage: 80
        }
    });
});
like image 216
Zomfire Avatar asked Jan 26 '17 15:01

Zomfire


2 Answers

You can change the title font size too.

options: {
  tooltips: {
    titleFontSize: 10,
    bodyFontSize: 10
  }
}
like image 169
tiagorockman Avatar answered Nov 05 '22 06:11

tiagorockman


options: {
     tooltips: { bodyFontSize: 20 }
}
like image 1
Gobinathan Avatar answered Nov 05 '22 06:11

Gobinathan