2

I'm trying to make percentage show on my graph. Currently, there's a plugin called ChartJS-Plugin-Labels which does this for me, however when utilizing it inside the options area, as described by the documentation, it has no effect on my chart, regardless of what I write in it. I cannot disable them either, if that's what I wanted to do.

I want the 'options' part below to end up being functional in my chart, as currently it isn't.

The link to the picture showing my issue is below. The values I receive are from a WEB API, so the formatting there is fine. Not sure what's making this issue.

NOTE: adding it with or without quotes makes no difference.


var config = {
             "type": "pie",
             "data": {
                    "labels": objLabelsBottom,
                    "datasets": [{
                                "label": objLabel1,
                                "data": objValues1,
                                "fill": false,
                                "backgroundColor": [
                                    "rgba(205, 93, 37, 0.2)", "rgba(211, 102, 32, 0.2)", "rgba(181, 111, 35, 0.2)",
                                    "rgba(175, 163, 23, 0.2)", "rgba(195, 172, 124, 0.2)", "rgba(104, 167, 45, 0.2)",
                                    "rgba(185, 218, 82, 0.2)", "rgba(205, 30, 37, 0.2)", "rgba(221, 82, 85, 0.2)",
                                    "rgba(48, 153, 35, 0.2)", "rgba(222, 74, 26, 0.2)", "rgba(195, 181, 107, 0.2)"
                                ],
                                "borderColor": [
                                    "rgb(205, 93, 37)", "rgb(211, 102, 32)", "rgb(181, 111, 35)", "rgb(175, 163, 23)",
                                    "rgb(195, 172, 124)", "rgb(104, 167, 45)", "rgb(185, 218, 82)", "rgb(205, 30, 37)",
                                    "rgb(221, 82, 85)", "rgb(48, 153, 35)", "rgb(222, 74, 26)", , "rgb(195, 181, 107)"
                                ],
                                "borderWidth": 1
                            }
                        ]
                    },
                    "options": {
                        "plugins": {
                            labels: {
                                render: 'percentage',
                                fontColor: function (data) {
                                    var rgb = hexToRgb(data.dataset.backgroundColor[data.index]);
                                    var threshold = 140;
                                    var luminance = 0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b;
                                    return luminance > threshold ? 'black' : 'white';
                                },
                                precision: 2
                            }
                        },
                        "events": ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove'],
                        "onClick": (evt, item) => {
                            handleClick(evt);
                        }
                    }
                };

https://prnt.sc/p48t7h

Meik F
  • 61
  • 1
  • 10
  • I don't really understand what you want to do. _doesn't do anything_ is not really helpful. And `onClick(evt)` doesn't work well on images. Do you want to show the percentage of the clicked pie part? – HeadhunterKev Sep 10 '19 at 14:09
  • @HeadhunterKev When I say it doesn't do anything, I mean that adding the plugins tab, removing it or doing anything with it, has NO effect at all. - The onclick is unrelated. - All I need is for the plugin to show the correct percentage on the labels. (need 1500 rep to make new tag for the plugin) – Meik F Sep 10 '19 at 19:07
  • Do you have a hexToRgb()-function in your code or did you only copy/paste the code from the plugin-demo? My code works fine without the luminance-function. – HeadhunterKev Sep 11 '19 at 07:59
  • @HeadhunterKev I've removed that function completely, and it makes no difference to what is displayed. This is what is confusing me. Nothing that I add in my plugins, make a difference at all. – Meik F Sep 11 '19 at 08:05
  • Do you import it correctly? It works fine with [my code](https://jsbin.com/lonicimice/1/edit?html,js,output). – HeadhunterKev Sep 11 '19 at 08:23
  • @HeadhunterKev here's the pastebin of the entire codefile. https://pastebin.com/HBsRcjuA – Meik F Sep 11 '19 at 09:21
  • 1
    @HeadhunterKev So, as it turns out, the link from the github is for 'datalabels' and not 'labels' which are two different things. I'm not sure how I missed this, but in either case, it's solved once i switched the import out with the right one. – Meik F Sep 11 '19 at 10:35
  • 1
    Great! I saw that but didn't had enough time yet to check it out... – HeadhunterKev Sep 11 '19 at 10:59

1 Answers1

1

You should use the chartjs-plugin-datalabels.

Look at this question and its answer, I think you will find your answer there.

HeadhunterKev
  • 1,728
  • 5
  • 13
  • I could use that, if it actually read my 'plugins', but it doesn't, hence my question about it not functioning at all. – Meik F Sep 11 '19 at 08:05
  • 1
    Check this comment for the answer: https://stackoverflow.com/questions/57870837/options-plugins-not-functioning?noredirect=1#comment102196381_57870837 – Meik F Sep 11 '19 at 11:06