ChartJs title not showing

user_2214980 0
Viewed 27975

I'm using ChartJS version 2.6.0. and I'm having some difficulties with the 'title' option of the chart. It's simply not showing on the rendered chart. I'm following the documentation, and passing the title in as described:

var options = {
    type: 'line',
    data: data,
    title: {
        display: true,
        text: 'PLEASE DISPLAY FOR HEAVEN\'S SAKE'
    },
    responsive: true,
    bezierCurve: true,
    legend: {
        display: true,
        labels: {
            fontColor: 'rgb(255, 99, 132)'
        }
    },
    pointHitDetectionRadius: 1,
    events: ['click']
}

var canvas = document.getElementById("chartId");
var ctx = canvas.getContext("2d");
var chart = new Chart(ctx, options);

However, the title simply wont show. Here is a fiddle with a dougnut chart, that has the same issue. What am I missing here?

chart.js javascript
5 Answers

You need to wrap the title object inside an options object like

var myChart = new Chart(ctx, {
    type: 'doughnut',
    options: {
        plugins: {
            title: {
                display: true,
                text: 'TEST'
            }
        }
    } 
....

Here are the docs for a full list of all the options, chartjs:title

var data = [2137680, 6282693, 805566, 2568163, 598599, 3189284, 599112, 926340, 5548295, 11847685, 66445];
var labels = ["Management", "Finance", "Human Resources", "Business Development and Marketing", "Information Technology", "Professional Development and Training", "Knowledge Management", "Logistics", "Support", "Business Services", "Other"];
var bgColor = ["#878BB6", "#FFEA88", "#FF8153", "#4ACAB4", "#c0504d", "#8064a2", "#772c2a", "#f2ab71", "#2ab881", "#4f81bd", "#2c4d75"];

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'doughnut',
  options: {
    title: {
      display: true,
      text: 'TEST'
    }
  },
  data: {
    labels: labels,
    datasets: [{
      data: data,
      backgroundColor: bgColor
    }]
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400">
</canvas>

https://jsfiddle.net/unf4exa2/

user_27379780

Please try adding options object inside for title

https://jsfiddle.net/Jaffreena/ha19ozqy/93/

var data = [2137680, 6282693, 805566, 2568163, 598599, 3189284, 599112, 926340, 5548295, 11847685, 66445];
var labels = ["Management", "Finance", "Human Resources", "Business Development and Marketing", "Information Technology", "Professional Development and Training", "Knowledge Management", "Logistics", "Support", "Business Services", "Other"];
var bgColor = ["#878BB6", "#FFEA88", "#FF8153", "#4ACAB4", "#c0504d", "#8064a2", "#772c2a", "#f2ab71", "#2ab881", "#4f81bd", "#2c4d75"];

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'doughnut',

    data: {

        labels: labels,
        datasets: [{
            data: data,
            backgroundColor: bgColor
        }]
    },
    options: {
        title: {
            display: true,
            text: 'Custom Chart Title'
        }
    }
});
user_30126100

You need to wrap the title object inside the plugins object and then plugins inside options.

Version: 3.7.1

var myChart = new Chart(ctx, {
    type: 'doughnut',
    options: {
      plugins:{
         title: {
            display: true,
            text: 'Title'
            }
        }
    }

This will surely work!

user_149331620

Your title property should come inside another property called options. Try this. 

options : {
title: {
        display: true,
        text: 'TITLE HERE'
    }
}

You can check for some examples here as well.

user_45998240

In your JSFiddle, you forgot to add options.

The example in the documentation is:

 options: {
        title: {
            display: true,
            text: 'Custom Chart Title'
        }
        },

See this fiddle: https://jsfiddle.net/ha19ozqy/90/

user_84273740
Related