Search code examples
javascriptangularjschartsgoogle-pie-chart

Customize chart tooltip as label with line pointing to pie segment

I am trying to get a chart that looks like this, but with value instead of percentage:

Google Pie Chart

Google Charts would work well, but as far as I can tell the closest you can get is the above with:

legend.position = "labeled"

But you cannot change percent to value. A straight line would be better also, but not essential.

I am currently using charts.js and have tried Google charts. There is tooltip customization for charts.js, but I am not even sure how to do something quite like my example.

Does anyone have any information on how I could customize such a tooltip with charts.js or know of a good JS chart library that's easy to use and has an Angular wrapper? Both Google Charts and Charts.js are compatible with Angular, which is my preference -- though it's not 100% necessary.

Solution

  • In google chart if you want to use value instead of percentage you can use labeledValueText: 'value' in your legend section as below:

    legend : { position: 'labeled', labeledValueText: 'value', textStyle: { color: 'black', fontSize: 12, } }

    See example:
    https://jsfiddle.net/1pyjc5bL/1/