DEV Community

Jae Sung Park
Jae Sung Park

Posted on

billboard.js 3.17.0: ✨ New Axis Customization, Label Styling & Image Labels!

#billboardjs #javascript #webdev #d3js

This 3.17.0 release brings powerful new features that give developers fine-grained control over chart visualization.

From inner axis ticks and dynamic label background functions to label borders and image-based labels — all the core features requested by our community are now available.

For the detailed release info, please check out the release note:
https://github.com/naver/billboard.js/releases/tag/3.17.0

🎯 Major New Features

Image Label Support

A groundbreaking feature that allows using images as labels. Create more intuitive data representations with icons, logos, and custom images.

Press enter or click to view image in full size
Press enter or click to view image in full size
Press enter or click to view image in full size
The new data label image option also added to donut, gauge, pie and polar types as well.

Newly added options are:

  • data.labels.image
  • donut.label.image
  • gauge.label.image
  • pie.label.image
  • polar.label.image



Demo:
https://naver.github.io/billboard.js/demo/#Data.DataLabelImage
https://naver.github.io/billboard.js/demo/#DonutChartOptions.LabelImage
https://naver.github.io/billboard.js/demo/#PieChartOptions.LabelImage
https://naver.github.io/billboard.js/demo/#PolarChartOptions.LabelImage
https://naver.github.io/billboard.js/demo/#GaugeChartOptions.GaugeLabelImage

Simply specify image url and the dimension(dimension values are required, since it used to calculate correct position).

data: {
 labels: {
  image: {
    url: "./assets/data1.svg",

    // or use placeholder to dynamically set image URL based on data ID
    url: "./images/{=ID}.svg",  // will be replaced to "./images/data1.svg", "./images/data2.svg", etc.

    width: 30,
    height: 30,
    pos: {
       y: -5
    }
  },

  // or use function to return image configuration dynamically
  image: function(v, id, i) {
    // v is the value of the data point where the label is shown.
    // id is the id of the data where the label is shown.
    // i is the index of the data series point where the label is shown.

    // Return different images based on value
    if (v > 500) {
     return {
      url: "./high-value.svg",
      width: 40,
      height: 40,
      pos: { x: 0, y: 0 }
     };
    } else if (v > 100) {
     return {
      url: "./medium-value.svg",
      width: 30,
      height: 30,
      pos: { x: 0, y: 0 }
     };
    } else if(v < 5) {
        // Return falsy value in case of don't want to show image
        return null;
    } else {
     return {
      url: "./low-value.svg",
      width: 20,
      height: 20,
      pos: { x: 0, y: 0 }
     };
    }
   }
},
[donut | gauge | pie | polar]: {
 label: {
  image: ...
 }
}
Enter fullscreen mode Exit fullscreen mode

Label Border Styling

Add borders to labels for improved readability and visual emphasis effects.

Demo: https://naver.github.io/billboard.js/demo/#Data.DataLabelBorder

Can control border radius and the padding, which will let customize styles as your needs.

data: {
    labels: {
        border: true,
        border: {
             padding: { ... },
             radius: 10
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Inner Axis Ticks

Introducing the tick.inner option that allows you to display axis ticks inside the chart area for a cleaner, more modern chart design.

Demo: https://naver.github.io/billboard.js/demo/#Axis.TickInner

Specify per axes by simply enabling the tick.inner option.

  axis: {
    x: {
      tick: {
        inner: true
      }
    },
    y: {
      tick: {
        inner: true
      }
    },
    y2: {
      show: true,
      tick: {
        inner: true
      }
    }
  }
Enter fullscreen mode Exit fullscreen mode

Dynamic Label Background Colors

Set label background colors using functions to dynamically change colors based on data values, significantly enhancing data visualization expressiveness.

Demo: https://naver.github.io/billboard.js/demo/#Data.DataLabelColors

When the option is set, background colors can be specified one color per dataset.

Within the function, the last returned color for dataset will be used.
Only can control set or unset background color for each values.

data: {
  labels: {
      // call back for label text background color
      backgroundColors: function(color, d) {
          // color: the default data label color string
          // data: ex) {x: 0, value: 200, id: "data3", index: 0}
          ....
          return d.value > 200 ? "cyan" : "red";
      }
  }
}
Enter fullscreen mode Exit fullscreen mode

🚀 Enhanced Developer Experience

This release significantly increases chart customization flexibility based on developer feedback:

  • Enhanced Axis Control: Inner ticks enable more sophisticated chart designs
  • Dynamic Styling: Function-based background colors for data-driven visualization
  • Rich Label Expression: Border and image support for diverse representation methods
  • Consistent API: Intuitive option structure while maintaining existing billboard.js patterns

Top comments (0)