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):
Once this is selected it will display whatever you set up in the Datalabels section:
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 
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. 
Just a couple of questions.
The page i linked is valid?
Where can i find pre-made snippets for charter? 
Thank you again, this stack is really good.
Michele
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? 
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).
It works flawlessly! Thank you again.
How can i donate for your help?. 
Anyway, i have another issue… 
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”? 
Thank you 
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! 
No need for any donation. Thanks though.
Glad you got it sorted!
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!
Hi @dave , sorry for the late reply.
I can’t share charts data because they are for admins only.
I will share only a pic of the public page.
Site is still very wip, but it’s working already.
I did nothing special: just some code snippets (made by others) as i wrote in previous posts.
I discovered how to target data (headers, values, strings) to display what i need in labels and tooltips.
I shared the strings in the previous posts.
The only edit outside the stack (achieved by editing the page.js file) is the offset option set to true for the x-axes of the bars chart, so the first and the last bars are full size instead of half size.
If i’m not mistaken, there’s no way to edit this option from the stack.
Nothing else by my side. The stack is really powerful.
Maybe some more example snippets could be useful for js newbies like me. 
The only edit outside the stack (achieved by editing the page.js file) is the offset option set to true for the x-axes of the bars chart, so the first and the last bars are full size instead of half size.
If i’m not mistaken, there’s no way to edit this option from the stack.
You should be able to do that by toggling the Offset? (Lines) option in the the ‘Chart Type Styles’ section (though i admit the mention of Lines is a bit confusing as we are talking about bar charts here).
Oh thank you! Good to know, so i won’t need to manually edit the file every time i reupload the page.
Didn’t want to bother you again asking for this, because with a quick search i’ve been able to find the solution.
Great stack, indeed.
@MickMan Michele, how do you “feed” charter with data?
I read you’re using a CSV file.
Do you generate (or export) it manually or automatically?
I’m asking because I’m looking for a way to write to csv not just once, but dynamically.
The CSV is generated dynamically.
The data is imported through an api and the csv is automatically saved online.
I can’t help you more, sadly, because i’m not involved in this process.
sorry to ask I am new on here, have emailed your head support and Real time.
a simple Question before I download stakes and other app add ons.
With RapidWeaver can have on several devises, my iMacs and MAcAir.
Question is do the apps work in the same way as need on laptop as well.
Many thanks
I’m not sure what you’re asking for, but you can install rapidweaver on any compatible machine. One purchase and you’re good to go.
The same for stacks. If you buy something you can install on multiple machines.
Some stacks requires a license for each site tho.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
