1

sorry if the question has popped up somewhere else, but I haven't found it. So, I'm using the charts from the MDB Angular page https://mdbootstrap.com/angular/ It's pretty cool so far, but I would need to add some numbers on top of the charts. I'm pretty much a beginner in Angular and javascript/typescript so any help is welcomed. I managed to create a simple chart from the example already and it works. But it's just so annoying that I have to hover over the charts to see how much exactly the value is

abim
  • 33
  • 6

1 Answers1

0

EDIT: My response is so tragically wrong, I'm a bit ashamed. Even being a novice doesn't take away from it. I basically didn't use the data labels plug in at all. If you want to use the actual plug in itself it is super easy...

import 'chart-js-datalabels'.

That's it.

However, you will need to individually modify the attributes for each chart, as it will be used on all your charts.

@Lazar basically mentioned this already. There are a few things to consider. But to clarify one issue you might have is, that MDB isn't an original Chart solution by MDB. It's a fork of ng2-charts, which again is a fork of chart.js with typescript definitions. I can't say what you exactly need, but I will try to help out as good as I can. I'm hardly a great developer myself, but it might help you out.

First, install the chart data-labels plugin...

https://chartjs-plugin-datalabels.netlify.com/installation

At least in my implementation, I didn't require much more in terms of implementation except for the fact that if you wish to use the plugin, you have to register it.

import { Chart } from 'chart.js';
Chart.register...

I had a very similar question myself, so I hope you don't mind me linking you to it. I have some images and some example code that might work out for you. However, I'll issue the warning that it will - very likely so - not be the best-practise solution.

How to use Chart.js plugin data-labels with ng2-chart?

Let me know if that somehow helped you!

ak.leimrey
  • 1,137
  • 2
  • 11
  • 25
  • Thanks!. I searched around a little in the documentation of chart.js and used part of your example to make it work. – abim Sep 19 '18 at 20:30