[Chartjs]-How to add a title to my ng2-charts bar chart

by

11👍

You can specify it as part of the chart options, e.g.

  private barChartOptions = {
    title: {
      text: 'my title',
      display: true
    }
  };

You can specify additional properties for font size etc, see the docs at: http://www.chartjs.org/docs/latest/configuration/title.html

2👍

public barChartOptions: ChartConfiguration['options'] = {
 
 scales: {
   x: {  ticks: {
     maxRotation: 70,
     minRotation: 70,
  }},
   y: {
     max: 20,
     min: -20, 
   }
 },
 plugins: {
   title: {
     display: true,
     text: 'Title Chart'
 },
   legend: {
     display: true,
     position: 'bottom',
   },
   datalabels: {
     anchor: 'end',
     align: 'end'
   }
 }
};

-1👍

It does not look like there’s a title option in the canvas. Your best bet would likely be to bind another element in the template.

chart.component.html

<div>
  <h3>{{ barChartTitle }}</h3>
  <div style="display: block">
    <canvas baseChart
            [datasets]="barChartData"
            [labels]="barChartLabels"
            [options]="barChartOptions"
            [legend]="barChartLegend"
            [chartType]="barChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>
  </div>
</div>

Leave a comment