billboard.js icon indicating copy to clipboard operation
billboard.js copied to clipboard

Can we set different label style for each value in the data?

Open zxzl opened this issue 4 years ago • 2 comments

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) image

  • 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

zxzl avatar Aug 12 '20 10:08 zxzl

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 avatar Aug 13 '20 02:08 netil

@netil Thanks a lot !! I'll take a look

zxzl avatar Aug 13 '20 03:08 zxzl