Charting Libraries

All templates use Apache ECharts 5.5 loaded from the jsDelivr CDN. ECharts is open-source, MIT-licensed, and has no peer-dependency requirements.

<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>

## Initialising a chart

// Mount to any div with a defined width and height
const chart = echarts.init(document.getElementById('my-chart'), null, {
  renderer: 'canvas',    // 'canvas' (default) or 'svg'
  locale:   'EN',
});

// Set options
chart.setOption(myOption);

// Respond to window resize
window.addEventListener('resize', () => chart.resize());

💡 Every template includes a single ResizeObserver that calls chart.resize() on all charts when the container changes size. You do not need to add this yourself.

## Common chart types ### Bar chart

const option = {
  xAxis: {
    type: 'category',
    data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
  },
  yAxis: { type: 'value' },
  series: [{
    type: 'bar',
    data: [4200, 3800, 5100, 6200, 5800, 7100],
    itemStyle: { borderRadius: [4, 4, 0, 0] },
  }],
};

### Line chart (area)

const option = {
  xAxis: { type: 'category', data: labels },
  yAxis: { type: 'value' },
  series: [{
    type:      'line',
    data:      values,
    smooth:    true,
    areaStyle: { opacity: 0.15 },
    lineStyle: { width: 2 },
    symbol:    'none',
  }],
};

### Donut / Pie chart

const option = {
  series: [{
    type:   'pie',
    radius: ['50%', '75%'],     // inner radius creates the donut hole
    data: [
      { name: 'Direct',   value: 3200 },
      { name: 'Organic',  value: 2100 },
      { name: 'Paid',     value: 1800 },
      { name: 'Referral', value:  900 },
    ],
    label: { show: false },
  }],
};

### Gauge

const option = {
  series: [{
    type:   'gauge',
    min:    0, max: 100,
    data:   [{ name: 'Score', value: 73 }],
    detail: { formatter: '{value}%', fontSize: 24 },
    axisLine: {
      lineStyle: {
        width: 12,
        color: [[0.7, '#EF4444'], [0.9, '#F59E0B'], [1, '#22C55E']],
      },
    },
  }],
};

### Heatmap (calendar)

const option = {
  calendar: {
    range: '2024',
    cellSize: ['auto', 13],
  },
  series: [{
    type:         'heatmap',
    coordinateSystem: 'calendar',
    data: calendarData,   // [[date-string, value], ...]
  }],
};

## Updating data in place

Use chart.setOption() with only the changed keys — ECharts merges the new option with the existing one:

// Only update the series data — xAxis, grid, etc. are unchanged
chart.setOption({
  series: [{ data: newValues }],
});

To do a full reset (clear all previous state), pass { replaceMerge: 'series' }:

chart.setOption({ series: [newConfig] }, { replaceMerge: 'series' });

## Shared colour palette

All templates import a consistent palette from dt-utils.js:

import { PALETTE } from '../../shared/dt-utils.js';
// ['#3B82F6', '#8B5CF6', '#10B981', '#F59E0B', '#EF4444', ...]

const option = { color: PALETTE, ... };

## ECharts documentation

The full ECharts option reference is at echarts.apache.org/en/option.html. Every property used in DashTemplate templates is documented there.