Tiny Column/Line Chart Library – μChart

Preview:

Description:

μChart is a really tiny and simple JavaScript chart library to render a column or line chart on an HTML5 canvas element.

Also provides functionalities to format DateTime strings and numeric values.

How to use it:

1. Create a canvas element on the page.

<canvas id="canvas"></canvas>

2. Define your data to be plotted on the chart.

const myData = [
      {
          data: [
              [40, 200], [80, 120], [120, 160], [160, 100], [200, 110], [240, 90],
          ],
      }, {
          data: [
              [40, 110], [80, 30], [120, 100], [160, 40], [200, 100], [240, 25],
          ],
      },
]

3. Render a column chart on the canvas.

Chart('#canvas', {
  bars: myData,
  xAxis: { title: 'x-axis', min: 0, max: 280, ticks: 40, },
  yAxis: { title: 'y-axis', min: 0, max: 250, ticks: 50, }
});

4. Render a line chart on the canvas.

Chart('#canvas', {
  lines: myData,
  xAxis: { title: 'x-axis', min: 0, max: 280, ticks: 40, },
  yAxis: { title: 'y-axis', min: 0, max: 250, ticks: 50, }
});

5. Create a time series chart and format DateTime strings as follows:

const myData = [
      {
          data: [
              ['2020-03-19T23:00:00', 48],
              ['2020-03-20T00:00:00', 13],
              ['2020-03-20T01:00:00', 58],
              // ... more data here ...
          ],
      },
]

Chart('#canvas', {
  bars: myChart
  barSep: 0,
  xAxis: {
      title: 'Days', min: '2020-03-19T22:00:00', max: '2020-03-23T22:00:00', ticks: '12h',
      timeSeries: {
        weekday: 'short', hour: 'numeric',
      },
  },
  yAxis: { title: 'Sales', min: 0, max: 125, ticks: 25, },
});