a4

A pure React chart library 📈

Usage no npm install needed!

<script type="module">
  import a4 from 'https://cdn.skypack.dev/a4';
</script>

README

a4

A pure React chart library 📈

This project is still in alpha. APIs might change heavily in the future.

To Try

  1. git clone https://github.com/wuct/a4.git
  2. cd a4
  3. npm install
  4. cd docsSrc && npm install && npm start
  5. go to http://localhost:3000

To Install

npm install a4

Quick Example

import React from 'react'
import { BarChart, Brush, createLinearScale } from 'a4'

const xScale = createLinearScale({
  domain: [1, 5],
  range: [10, 190],
})

const yScale = createLinearScale({
  domain: [1, 5],
  range: [190, 0],
})

const data = [
  { x: 1, y: 1 },
  { x: 2, y: 2 },
  { x: 3, y: 3 },
  { x: 4, y: 4 },
  { x: 5, y: 5 },
]

const BarChartExample = () =>
  <svg width="200" height="200">
    <BarChart
      data={data}
      xScale={xScale}
      yScale={yScale}
      getBarProps={() => ({
        width: 20,
        color: '#5d9ce3',
      })}
    />
    <Brush
      width={200}
      height={200}
    />
  </svg>

export default BarChartExample

To Contribute

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request