ChartJs title not showing

Question

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?

Answer 1

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/

Answer 2

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'
        }
    }
});