CODEWITHSUNDEEP
javascriptchart.js
MichaelCleverly
MichaelCleverly

Reputation: 2543

ChartJs title not showing

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?

Upvotes: 32

Views: 39219

Answers (6)

Selim Abdel Monsef
Selim Abdel Monsef

Reputation: 141

You should import the Title first:

import { Chart as ChartJS, ArcElement, Tooltip, Legend, Title } from 'chart.js';

and then add your Tile to your Register:

ChartJS.register(ArcElement, Tooltip, Legend, ChartDataLabels, Title);

finally use your title in options.plugins:

const options: any = {
plugins: {
  title: {
    display: true,
    text: "Your Title",
  },
}
  }

Upvotes: 11

Mrunalraj Redij
Mrunalraj Redij

Reputation: 355

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!

Upvotes: 4

Quince
Quince

Reputation: 14990

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/

Upvotes: 40

Jaffreena Michael Thomas
Jaffreena Michael Thomas

Reputation: 98

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

Upvotes: 5

Sala
Sala

Reputation: 345

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/

Upvotes: 1

Fawzan
Fawzan

Reputation: 4849

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.

Upvotes: 2

Related Questions