How to customize Charter Stack?

Hi there, i recently purchased the Charter Stack by @habitualshaker and it’s a great product.

I also used the provided extra snippet to add the percentage of each slice of a pie chart.

What i’d like to do is to write some/all info into the slices, but i’m not so good with js and i wonder how and where to write the piece of code (same tooltip area?)

I found this page but i had no luck. Different versions maybe?

Thanks in advance.
Michele

Hi @MickMan -

Glad to hear you are enjoying Charter.

Datalabels are supported in Charter. Do make sure you have the latest version of Charter by checking in RW for stack updates.

In each dataset there is the option to ‘Show datalabels’ (you also style them here too):

image

Once this is selected it will display whatever you set up in the Datalabels section:

image

2 Likes

Thank you so much for the ultramegaquick answer.

I can’t believe how easy the solution was.
Tried it and works like a charm. I’ll try to customize it at my will. XD

BUT :stuck_out_tongue:

I closed that panel because data is pulled from an external csv file, so these options were hidden because they’re placed into the ‘local data’ panel. Panel that stack itself suggest to close.

I think you should put the ‘labels customization’ area in its own panel to avoid stupid questions like mine. :slight_smile:

Just a couple of questions.
The page i linked is valid?
Where can i find pre-made snippets for charter? :grin:

Thank you again, this stack is really good.
Michele

1 Like

No - that is a different datalabel plugin. The one Charter uses is this one.

Good luck!

1 Like

I see that page, but i can’t figure out how to edit (“advance”) the % in labels as in the tooltips.
In the advanced field, how can i write a callback function that target the labels?

I was able to prepend the € symbol editing the snippet code provided (very easy task), but how can i do the same for the labels? Replacing ‘tooltipItem’ with the right ‘word’ is enough? :grimacing:

Tooltip code:

callbacks: {
label: function(tooltipItem, data) {
var dataset = data.datasets[tooltipItem.datasetIndex];
var meta = dataset._meta[Object.keys(dataset._meta)[0]];
var total = meta.total;
var currentValue = dataset.data[tooltipItem.index];
var percentage = parseFloat((currentValue/total*100).toFixed(1));
return ‘€ ’ + currentValue + ’ (’ + percentage + ‘%)’;
},
title: function(tooltipItem, data) {
return data.labels[tooltipItem[0].index];
}
}

Not 100% sure what you are looking for but you could try this:

formatter: (value, context) => {
                let sum = 0;
                let dataArr = context.chart.data.datasets[0].data;
                dataArr.map(data => {
                    sum += data;
                });
                let percentage = (value*100 / sum).toFixed(1)+"%";
                return "€" + value + " (" + percentage + ")";
            }

This is slightly adapted from a solution on Stack Overflow (worth looking there if you need to tweak it further).

1 Like

It works flawlessly! Thank you again.
How can i donate for your help?. :slightly_smiling_face:

Anyway, i have another issue… :sweat:
This code removes the “title” of the slice (the one shown in legends) and i can’t add it again to labels.

I have 2 columns/rows:
e.g. headers are “Descrizione”, “Number” and contents are “goofy”, 3.
I understand that i can show 3 with value, i can show “Descrizione” and “Number” with labels[n], but how can i show “Goofy”? :exploding_head:

Thank you :pray:

ok @habitualshaker i found the magic string:

context.chart.data.labels[context.dataIndex]

Everything is fine now.
Thanks again and tell me how to donate for your help! :wink:

1 Like

No need for any donation. Thanks though.

Glad you got it sorted!

2 Likes

Hey @MickMan - I use Charter in several of my sites (e.g.,https://www.scdiag.com/locations/anderson/ Click on Why choose us?)- but, I’m trying to wrap my head around how you’re using it. Any chance you can post the link (or DM it to me)? I’m always looking for new ways to deploy things. Thanks!