Creating sparklines and microcharts

This tutorial will show how you can create the min charts, or simply sparklines.

What is it?

Sparklines (or micro/mini charts if you prefer) are super-small charts fitting in just a tens of pixels, but still able to convey the information.

They are stripped of bare chart essentials like axes, grid, labels, legend, etc.

In this tutorial we'll see what it takes to to create such charts.

NOTE This tutorial shows element-level options for creating microcharts. For easier configuration, consider using "microchart" theme. Read here for more info.

XY chart

Let's start with stripping down an XY chart.

Here's a base chart we'll be torturing today:

See the Pen amCharts 4: Sparkline chart (1) by amCharts (@amcharts) on CodePen.24419

This chart looks great at its present dimensions, but would be unusable if we'd have to cram it into, say, 100x50 pixels. So we'll need to remove and disable elements one by one.

Disabling axis grid and its labels

It's clear, that in a very small area, axis grid and labels are luxury we can't afford, therefore we'll need to remove them:

dateAxis.renderer.grid.template.disabled = true;
dateAxis.renderer.labels.template.disabled = true;
// ...
valueAxis.renderer.grid.template.disabled = true;
valueAxis.renderer.baseGrid.disabled = true;
valueAxis.renderer.labels.template.disabled = true;

dateAxis.renderer.grid.template.disabled = true;
dateAxis.renderer.labels.template.disabled = true;
// ...
valueAxis.renderer.grid.template.disabled = true;
valueAxis.renderer.baseGrid.disabled = true;
valueAxis.renderer.labels.template.disabled = true;

{
  // ...
  "xAxes": [{
    // ...
    "renderer": {
      "grid": {
        "disabled": true
      },
      "labels": {
        "disabled": true
      }
    }
  }],
  "yAxes": [{
    // ...
    "renderer": {
      "baseGrid: {
        "disabled": true
      },
      "grid": {
        "disabled": true
      },
      "labels": {
        "disabled": true
      }
    }
  }]
}

NOTE Note, for the Value axis, we also need to disable "base grid" which is a special grid line that goes at zero value.

Disabling axis tooltips

We don't want and tooltips appearing on axis either. Those will not be shown if we don't add Cursor, but if we do, they will not fit into chart.

Away with axis tooltips:

dateAxis.cursorTooltipEnabled = false;
// ...
valueAxis.cursorTooltipEnabled = false;

dateAxis.cursorTooltipEnabled = false;
// ...
valueAxis.cursorTooltipEnabled = false;

{
  // ...
  "xAxes": [{
    // ...
    "cursorTooltipEnabled": false
  }],
  "yAxes": [{
    // ...
    "cursorTooltipEnabled": false
  }]
}

Removing chart padding

Space is precious, so we don't want any padding around our chart either:

chart.padding(0, 0, 0, 0);

chart.padding(0, 0, 0, 0);

{
  // ...
  "paddingTop": 0,
  "paddingRight": 0,
  "paddingBottom": 0,
  "paddingLeft": 0
}

Stripping down cursor

If we want a cursor on our chart, we might prep it a bit as well.

We've already disable axis tooltips, so those are not a problem.

What we might not need, is for example cursor's horizontal or vertical lines:

chart.cursor.lineY.disabled = true;

chart.cursor.lineY.disabled = true;

{
  // ...
  "cursor": {
    // ...
    "lineY": {
      "disabled": true
    }
  }
}

Adding end-bullet

And to top our sparkline off with a cherry on the top, we'll add an end-line bullet.

Manipulating bullets via data is described in "Bullets in data" section of our bullet-dedicated article. Make sure you read it for a better understanding how this works.

In short we are going to add a circle bullet to our series, but disable them by setting their opacity to zero. Then will use bullet's propertyFields to bind opacity setting to data field, and will add non-zero opacity to the last item in data.

let bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.circle.opacity = 0;
bullet.circle.propertyFields.opacity = "opacity";
bullet.circle.radius = 3;

var bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.circle.opacity = 0;
bullet.circle.propertyFields.opacity = "opacity";
bullet.circle.radius = 3;

{
  // ...
  "series": [{
    // ...
    "bullets": [{
      "type": "CircleBullet",
      "circle": {
        "opacity": 0,
        "radius": 3,
        "propertyFields": {
          "opacity": "opacity"
        }
      }
    }]
  }]
}

Sparkline example

Let's see how our sparkline turned out:

See the Pen amCharts 4: Sparkline chart (2) by amCharts (@amcharts) on CodePen.24419

Pie chart

Now let's try the minify a Pie chart.

See the Pen amCharts 4: Mini pie chart (1) by amCharts (@amcharts) on CodePen.24419

We've already learned to reduce padding, so we're not going to repeat that again. Just do it.

Disabling slice labels and ticks

pieSeries.labels.template.disabled = true;
pieSeries.ticks.template.disabled = true;

pieSeries.labels.template.disabled = true;
pieSeries.ticks.template.disabled = true;

{
  // ...
  "series": [{
    // ...
    "labels": {
      "disabled": true
    },
    "ticks": {
      "disabled": true
    }
  }]
}

Setting minimum width and height

Pie chart would not allow pies to be less than 50x50 in pixels by default.

Since we're creating a chart smaller than that, we're going to have to override this default:

chart.chartContainer.minHeight = 40;
chart.chartContainer.minWidth = 40;

chart.chartContainer.minHeight = 40;
chart.chartContainer.minWidth = 40;

{
  // ...
  "chartContainer": {
    "minHeight": 40,
    "minWidth": 40
  }
}

Micro-pie example

That's basically it:

See the Pen amCharts 4: Mini pie chart (2) by amCharts (@amcharts) on CodePen.24419

In-line charts

Having ultra-small charts enables us to use them in various situations, even as in-line elements inside text:

See the Pen amCharts 4: In-line mini charts by amCharts (@amcharts) on CodePen.24419

Please note that chart container might require some CSS love in order to make them usable as in-line elements:

#chartdiv {
  width: 80px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
}

Microchart theme

amCharts version 4.7.5 added a special "microchart" theme, which can be used to automatically "clean up" all the charts to make them suitable for usage in ultra-small containers.

"microchart" theme can be included and used just like any other theme:

• Load or import theme file.
• Use am4core.useTheme() method to enable it.

Loading or importing

import am4themes_microchart from "@amcharts/amcharts4/themes/microchart";

<script src="//www.amcharts.com/lib/4/themes/microchart.js"></script>

Enabling

am4core.useTheme(am4themes_microchart);

am4core.useTheme(am4themes_microchart);

Static sparklines

Since microcharts and sparklines have little use out of interactivity, it makes sense to generate them as static SVG snapshots for improved performance.

For more information check out "Generating static charts" tutorial.