javascript - how to add a title to my ng2-charts bar chart - Stack Overflow

admin管理员组

文章数量:1340292

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>

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>

• javascript
• html
• angular
• chart.js

Share Improve this question Follow asked Feb 3, 2017 at 17:12 FearghalFearghal 11.5k1919 gold badges6060 silver badges9898 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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/docs/latest/configuration/title.html

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

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.ponent.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>

本文标签： javascripthow to add a title to my ng2charts bar chartStack Overflow