CODEWITHSUNDEEP
javascriptangularjschart.js
Vibhor
Vibhor

Reputation: 115

Multi- Line title in chart.js not working

I have my chat.js title as

 new Chart(document.getElementById(z).getContext('2d'), {

            type: 'doughnut',
            data: {
                datasets: [{
                    backgroundColor: $scope.bgColor,
                    data:  [
                      some stuff
                    ]
                }],
                 labels: [some stuff],

            },
            options: {
                title: {
                    display: true,
                    text: ['Title Line One', 'Title Line Two']
                },

                cutoutPercentage: 80,
                hover: {mode: null},
                elements: {
                    center: {
                        text:  [
                           some stuff ],
                        color: '#FF6384', // Default is #000000
                        fontStyle: 'Arial', // Default is Arial

                    }
                },
                legend: {
                    display: false
                },

            }
        });

however the title is not coming in two lines , the documentation here says that an array input will give multiline title , which it is not clearly giving

Upvotes: 0

Views: 2165

Answers (2)

Dmitry
Dmitry

Reputation: 2806

Make sure that you're using Chart.js version 2.7.0 or higher.

Chart.js version 2.6.0 does not have this feature.

Chart.js version 2.7.0 does.

Upvotes: 0

ItsT-Mo
ItsT-Mo

Reputation: 123

Your example should work fine. Make sure the rest of the code is formatted correctly as well.

Here is a working example: https://codepen.io/ItsT-Mo/pen/rPNrGm (The title is defined in Line 12)

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['One', 'Two', 'Three'],
        datasets: [{
            label: 'Testdata',
            data: [1, 2, 3]
        }]
    },
    options: {
        title: {
            display: true,
            text: ['Title Line One', 'Title Line Two']
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

If it still doesn't work, inspect the page and make sure both lines are in the DOM. If they are but not both are shown, then one line of the title might be obscured by some CSS.

Upvotes: 2

Related Questions