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.

XY chart

Let’s start with stripping down an XY chart.

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

Open in CodePen

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
      }
    }
  }]
}

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:

Open in CodePen

Pie chart

Now let’s try the minify a Pie chart.

Open in CodePen

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:

Open in CodePen

In-line charts

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

Open in CodePen

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.

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

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

Enabling

TypeScript
JavaScript

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.