Menu
So I've been asked to add an additional layer of labels to a bar chart built with ZingChart. We essentially have a single series column chart that plots ratings for criteria, within sub categories, for a specific category.
Currently sub categories don't play a role in the chart at all, as I plot the rating for each criteria within a category. How do I 'group' the criteria together so the labels would show each criteria name, with the sub category grouping the labels together.
Also I can't make use of multi-series data, with a legend as each column is colored according to its rating/value, so a color-coded legend would be pointless as I understand it.
779
Full disclosure, I'm a member of the ZingChart team.
I'm a bit unsure of exactly what you want but I have taken a stab at creating your chart here.
This chart utilizes custom tokens, prefixed by the data-. As well as our valueBox text attribute. We add two custom tokens into our series object
{
values: [25,42,67,89,15,34,67,85],
text:'Rating 1', // Standard plot/legend text
'data-sub-text':['SubRating 1','SubRating 1','SubRating 1','SubRating 1','SubRating 1','SubRating 1','SubRating 1','SubRating 1'],
'data-sub-rating':[1,2,3,4,5,6,7,8]
}
From here we can access all these values on hover with tooltips or if we want to always display that value, like a label, we can use valueBox.
plot:{
valueBox:{
placement:'top', // Put the valueBox above the bar
text:'%t: %v <br> %data-sub-text: %data-sub-rating',
backgroundColor:'#000'
}
}
var myConfig = {
type: "column",
plot:{
barWidth:15,
valueBox:{
placement:'top',
text:'%t: %v <br> %data-sub-text: %data-sub-rating',
backgroundColor:'#000'
}
},
series : [
{
values : [25,42,67,89,15,34,67,85],
text:'Rating 1',
'data-sub-text':['SubRating 1','SubRating 1','SubRating 1','SubRating 1','SubRating 1','SubRating 1','SubRating 1','SubRating 1'],
'data-sub-rating':[1,2,3,4,5,6,7,8]
}
]
};
zingchart.render({
id : 'myChart',
data : myConfig,
height: 400,
width: 600
});<!DOCTYPE html>
<html>
<head>
<!--Assets will be injected here on compile. Use the assets button above-->
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
<script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
</script>
</head>
<body>
<div id='myChart'></div>
</body>
</html>Please let me know If I did not answer your question appropriately.
150
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
