Data labels in Vaadin Charts 3 Web Components

In this short tutorial, I'll share a couple of tips related to data labels.

Starting point: a simple line chart

As a starting point, we need some kind of a chart. I used a simple line chart plotting the average temperatures in Turku, Finland in July every year since 1961. The data is available in the Finnish Meteorological Institute's website. I added labels to the axes and changed the data series color.

Chart showing average temperatures in Turku, Finland every July since 1961

<vaadin-line-chart id="mychart">
  <chart-title>Average temperatures in Turku, Finland</chart-title>
  <subtitle>1961 - 2016</subtitle>
  <x-axis>
    <chart-title>Year</chart-title>
  </x-axis>
  <y-axis min="0" max="30">
    <chart-title>Temperature (℃)</chart-title>
  </y-axis>
  <data-series name="July">
  </data-series>
</vaadin-line-chart>

The temperature data was available as a two dimensional array [[1961, 15.7], [1962, 14.8], …]. For the sample it doesn't really matter whether you use Polymer data binding or not. I just called setData for the series in WebComponentsReady event.

window.addEventListener('WebComponentsReady', function(e) {
  mychart = document.querySelector("#mychart");
  mychart.chart.series[0].setData(getTemperatureData());
});

The resulting chart looks good for a starting point: the axes are labeled properly and the units are present. The point tooltip could use some tweaking to get the measurement unit visible.

Configuring data point tooltip

The tooltip is easy to configure through a tooltip element.  You can override the default tooltip formats by using header-format element for the tooltip header format and point-format element for the point format. For now, we're only interested in adding the ℃ unit to the tooltip after the point value. To achieve this we can use value-suffix.

<data-series name="July">
  <tooltip value-suffix=" ℃">
  </tooltip>
</data-series>
 

Data point tooltip with unit

Adding data labels

Now let's add some informational value using data labels. We could enable labels for each point easily using plot-options for the whole chart, but in this case it would add very little value. Instead, let's add labels for the top 10 coldest and hottest years.

For the top coldest points I want to have a blue callout style label below the point and for the hottest ones a red callout above the point. There are probably a lot of better ways to find the coldest and hottest points from the data, but here's my way:

function addCallouts(data, limit, sorter, options) {
  var temp = data.concat().sort(sorter);
  for (i = 0; i < limit; i++) {
    temp[i].update(options, true);
  }
}

// For coldest
function addCalloutsToColdest(data, limit) {
  var options =  { dataLabels : { enabled: true, backgroundColor: '#00b4f0', color: '#fff', y: 30 }};
  addCallouts(data, limit, function(a,b) { return a.y - b.y; }, options);
}

// For hottest
function addCalloutsToHottest(data, limit) {
  var options =  { dataLabels : { enabled: true, backgroundColor: '#ff3a49', color: '#fff', y: -30 }};
  addCallouts(data, limit, function(a,b) { return b.y - a.y; }, options);
}

Common settings for red and blue callouts can be configured in chart options. Add <plot-options> element as a child of <vaadin-line-chart> element

<plot-options>
  <line>
    <data-labels shape="callout" border-width="1" border-radius="4"
	  vertical-align="middle" format="{y}<br /> ℃" padding="3">
    </data-labels>
  </line>
</plot-options>
 

Callout shaped data label with unit

 

The result looks good, but there is still one gotcha: when two labels overlap, one of them is hidden. You can allow overlapping by setting allow-overlap="true" in data-labels

<data-labels allow-overlap="true" shape="callout" border-width="1"
  border-radius="4" vertical-align="middle" format="{y}<br /> ℃" padding="3">
</data-labels>

The labels don't disappear when overlapped, but the result is a bit crowded.

Callout shaped data label overlapping

Changing the font size to a smaller one fixes the situation.

<data-labels allow-overlap="true" shape="callout" border-width="1"
  border-radius="4" vertical-align="middle" format="{y}<br /> ℃" padding="3">
    <chart-style font-size="9px"></chart-style>
</data-labels>

Here's the end result.

Chart displaying top 10 hottest and coldest Julys since 1961 using a callout shaped data label

This was a brief introduction to data labels in Vaadin Charts. I gathered the information from Vaadin Docs, Charts 3.2.0 API documentation, and the Charts demo collection. Try these tips and other ways to configure your charts yourself.

See more tutorials