CODEWITHSUNDEEP
javascripthtmlchart.js
Julie
Julie

Reputation: 31

How do I add a title to a chart from chart.js?

I am trying to add a title to my chart which I am creating with the chart.js library. Here is my code:

<canvas id="abcdiagrammBereich" width="100" height="200"></canvas>

<script type="text/javascript">
var ctx = document.getElementById('abcdiagrammBereich');
var abcdiagrammBereich = new Chart(ctx, {
data: {
       labels: %labels%,
        datasets: [{
            type: 'line',
            label: 'Dein Ergebnis',
            data: %ownData%,
            backgroundColor: ['rgba(0, 0, 0, 0)'],
            borderColor: ['rgba(0, 0, 0, 1)'],
            borderWidth: 5      
        }],
     },
    options: {
        indexAxis: 'y',
    elements: {
      bar: {borderWidth: 1,},},
    responsive: true,
    plugins: {
                   legend: {position: 'top',},
                   titel: {display: true, text: '%titel%'},
                  },
        scales: {x: {min: 1, max: 9}}
    }
});
</script>

And here is another piece of code where I want to add a title:

library('ChartJS');

$value_data = array(
  $stanineErfolg,
  $staninePassung
);

$label_data = array(
  'subj. beruflicher Erfolg',
  'berufliche Passung'
);

$label_titel = 'Input';

text('Diagramm ABC Handy', array(
  '%titel%' => '$label_titel',
  '%labels%' => json_encode($label_data),
  '%ownData%' => json_encode($value_data)
));

How do I make the title display in the chart?

Upvotes: 3

Views: 1306

Answers (1)

user2057925
user2057925

Reputation: 2653

Having a look to your code, it seems there is a typo. You wrote titel instead of title.

plugins: {
               legend: {position: 'top',},
               title: {display: true, text: '%titel%'}, // <-- title!
              },

Upvotes: 3

Related Questions