Ng2-charts: Change labels font size (Bar chart type)

[sarn3792]

I was looking for a solution where I can modify labels font size but I haven't found it.
Does anyone have an example?

My source code is on: https://github.com/sarn3792/CRMCharts
Thanks!

[m0t0r]

@sarn3792 you can change font size for legend labels like this:

public barChartOptions: any = {
...
  legend: {
      position: 'right',
      labels: {
        fontSize: 14
      }
  }
}

or if you want to change labels of x or y axes you can do it like this:

public barChartOptions: any = {
...
  scales: {
     yAxes: [
      {
          display: true,
          ticks: {
            fontSize: 14
          }
      }
    ]
  }
}

In general, you can use any chart options defined in official charts.js documentation.

[sarn3792]

@m0t0r Thanks so much! It's working perfectly.

I have another doubt. Do you know how to show the value above bar chart? I would like to displat it as seen in the following image:

I'll really appreciate your help :)

[MohammedImtiyaz]

I was having the same issue, searched all over the web. But i dint get solution. Then i made changes in dc.js file , it worked well. This is for bar chart. You can change fonts for other charts also by going to respective labels.

open your dc.js file.
goto line number 5631
ADD this line to d3 labels : .style("font-size", "12px")
This worked for me.

[paviad]

Use chartjs-plugin-datalabels. See this stackblitz: https://stackblitz.com/edit/ng2-charts-bar-labels