Labels

Labels can add a lot to a chart, and as such there are a few options to customize them.

Basic Labels

The simplest label type is just plaintext, supplied as an array to the labels option. This is seen in each chart example page.

barchart({
  data: [50, 100, 30],
  labels: ['1st', '2nd', '3rd'], 
});

A basic barchart with labels

The same works for line charts:

linechart({
  data: [
    [50, 100, 40],
    [10, 20, 5],
    [90, 80, 70],
  ],
  labels: ['1st', '2nd', '3rd'], 
});

A basic linechart with labels

And barchartStacked:

barchartStacked({
  data: [
    [50, 100, 30],
    [20, 40, 10],
    [10, 20, 5],
  ],
  labels: ['1st', '2nd', '3rd'], 
});

A basic stacked barchart with labels

Label Styling

Labels can be styled with the labelClass option, which accepts a string that will be added to each resulting <text> element.

And with that you can use CSS to add any styling you want!

Note that these are SVG elements, so CSS properties that don't apply to SVG elements won't work here!

For example, color won't work, but fill will. Here's a helpful resource on CSS & SVG

barchart({
  data: [50, 100, 30],
  labels: ['1st', '2nd', '3rd'],
  labelClass: 'my-bar-labels', 
});

A barchart with red labels

Data Labels

But what if you just want datalabels? No problem! There's two options for this:

dataLabels: 'literal' // or 'percentage' - This will use the data values as labels placed on each bar/point
or you can pass an array of the numbers you want as labels to labels

barchart({
  data: [50, 100, 30],
  dataLabels: 'literal', 
});

A barchart with datalabels showing the literal values of each bar

The "percentage" option will calculate the percentage of each bar relative to the total of all bars, and display that instead:

barchart({
  data: [50, 100, 30],
  dataLabels: 'percentage', 
});

A barchart with datalabels showing the percentage value of each bar

You can also use datalabels along with normal labels:

barchart({
  data: [50, 100, 30],
  dataLabels: 'percentage',
  labels: ['A', 'B', 'C'], 
});

A barchart with both normal labels and percentage datalabels

Image Labels

Image labels are also supported! To use them, you can pass an array of objects to the imageLabels argument, which accepts the following properties:

type ImageLabel = {
  href: string;
  alt: string;
  topText?: string;
  bottomText?: string;
  height?: number;
  width?: number;
};

Let's see an example:

barchart({
  data: [50, 100, 30],
  imageLabels: [
    {
      href: '/imgs/misc/test.jpg',
      alt: 'Skull',
      height: 25,
      width: 25,
    },
    {
      href: '/imgs/misc/test.jpg',
      alt: 'Skull',
      height: 25,
      width: 25,
    },
    {
      href: '/imgs/misc/test.jpg',
      alt: 'Skull',
      height: 25,
      width: 25,
    },
  ],
});

You can also add text above or below the image with the topText and bottomText properties:

linechart({
  data: [
    [50, 50, 50, 40],
    [80, 20, 10, 105],
    [220, 240, 260, 280],
  ],
  imageLabels: [
    {
      href: '/imgs/misc/test.jpg',
      alt: 'Skull',
      height: 25,
      width: 25,
      topText: 'Top',
    },
    {
      href: '/imgs/misc/test.jpg',
      alt: 'Skull',
      height: 25,
      width: 25,
      bottomText: 'Bottom',
    },
    {
      href: '/imgs/misc/test.jpg',
      alt: 'Skull',
      height: 25,
      width: 25,
      topText: 'Top',
      bottomText: 'Bottom',
    },
  ],
});

A basic linechart with image labels

Class & Styling Options

To see available class names for styling check out the various API pages for each chart type:

Labels Examples