billboard.js
billboard.js copied to clipboard
Can we set different label style for each value in the data?
Description
Hi, I'm converting our Highcharts-based legacy chart into one using Billboard.js.
One requirement for this component is that the chart should put labels on the highest and lowest values in the dataset, like the screenshot below (url)
- the highest price
133,720
has a gray label - the lowest price
128,650
has a red label with the arrow.
With highcharts we implemented it by putting marker and dataLabels with each data, but AFAIK billboard.js does not support it.
I can change the content of label by providing custom function in data.labels.format but still I'm not sure if I can customize the style of each label, as well as the text.
Is there any way to customize label style for each value in the data?
Steps to check or reproduce
There's no explicit option to styling as data.marker
, because styling needs are quite variant for each use cases.
In most cases you can style directly defining CSS rules.
For example, if you want style data1
circle's style, you can add some definition like below.
.bb-circles-data1 circle {
opacity: 0.5 !important;
}
Based on your screenshot, I made an example, where min/max values data point and texts styled in different colors.
- https://jsfiddle.net/netil/gm7zrf8b/
@netil Thanks a lot !! I'll take a look