Awesome Chart ·

Awesome Chart is a lightweight 2d chart library. It should be noted that the use of the framework is greater than the use of the chart library.

Installation

npm install awesome-chart
yarn add awesome-chart

Documents

1. Some basic concepts of chart.
2. How charts lay out content.
3. How charts work with data.

Examples

There are several examples on the website. Awesome Chart supports two ways of writing.

For command style

import {Chart, DataBase} from 'awesome-chart'

const chart = new Chart({
  engine: 'svg',
  adjust: false,
  width: 200,
  height: 200,
  padding: [24, 24, 24, 24],
  container: document.body,
})

const textLayer = chart.createLayer({
  id: 'title',
  type: 'text',
  layout: chart.layout.main,
})

textLayer?.setData(new DataBase('This is a text'))
textLayer?.setStyle({
  text: {
    fill: 'red',
    fontSize: 24,
  },
})

chart.draw()

For declarative style

import {createChart} from 'awesome-chart'

createChart({
  engine: 'svg',
  adjust: false,
  width: 200,
  height: 200,
  padding: [24, 24, 24, 24],
  container: document.body,
  layers: [
    {
      type: 'text',
      options: {
        id: 'title',
        layout: 'main',
      },
      data: 'This is a text',
      style: {
        text: {
          fill: 'red',
          fontSize: 24,
        },
      },
    },
  ],
})