CODEWITHSUNDEEP
javascripthtmlangularchart.js
Fearghal
Fearghal

Reputation: 11407

how to add a title to my ng2-charts bar chart

I have a bar chart with below code...works brilliantly....except its missing a title.

Does ng2-charts have a title option in API? eg 'sales chart'. The values are pulled from the typescript file.

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

Upvotes: 5

Views: 6688

Answers (3)

Gudelio Hern&#225;ndez Torres
Gudelio Hern&#225;ndez Torres

Reputation: 21

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

Upvotes: 2

Joseph Simpson
Joseph Simpson

Reputation: 4183

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

Upvotes: 11

rhyneav
rhyneav

Reputation: 123

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>

Upvotes: -1

Related Questions