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.