1.2.7 • Published 4 years ago

aesthetic-charts v1.2.7

Weekly downloads
3
License
MIT
Repository
github
Last release
4 years ago

aesthetic-charts

React charts library created on top of react-chartjs-2 and chartjs for beautiful aesthetic charts

NPM JavaScript Style Guide

Install

npm install --save aesthetic-charts
yarn add aesthetic-charts

Charts

DoughnutChart

type DoughnutChartProps = {
  chartColors?: ChartRGBColor[],
  chartOptions?: DoughnutChartOptions,
  dataset: number[],
  labels: string[],
  highlightLevel?: number,
  selectedIndex?: number[]
}
export type ChartRGBColor = [number, number, number]

export type DoughnutChartOptions = {
  cutoutPercentage: number,
  responsive: boolean,
  legend: {
    position: 'left' | 'top' | 'right' | 'bottom',
    labels: {
      usePointStyle: boolean,
      fontSize: number,
      padding: number
    }
  }
}

Usage

import React, { useState } from 'react'

import { DoughnutChart } from 'aesthetic-charts'

const data = [50, 100, 75]
const labels = ['Mobile', 'Tablet', 'Desktop']

const App = () => {
  const [selectedIndex, setSelectedIndex] = useState<number[]>([])


  return <>
    <label>Select Device</label>
    <select value={selectedIndex[0]} onChange={({ target: { value } }) => setSelectedIndex(+value < 3 ? [+value] : [])}>
      {
        [
          'Mobile',
          'Tablet',
          'Desktop',
          'All'
        ].map((v, i) => <option value={i} key={i}>{v}</option>)
      }
    </select>
    <DoughnutChart dataset={data} labels={labels} selectedIndex={selectedIndex} />
  </>
}

export default App

License

MIT © rasha08

1.2.7

4 years ago

1.2.6

5 years ago

1.2.5

5 years ago

1.2.4

5 years ago

1.2.3

5 years ago

1.2.2

5 years ago

1.2.1

5 years ago

1.2.0

5 years ago

1.1.15

5 years ago

1.1.13

5 years ago

1.1.12

5 years ago

1.1.11

5 years ago

1.1.10

5 years ago

1.1.9

5 years ago

1.1.8

5 years ago

1.1.7

5 years ago

1.1.6

5 years ago

1.1.5

5 years ago

1.1.4

5 years ago

1.1.3

5 years ago

1.1.1

5 years ago

1.1.0

5 years ago

1.0.44

5 years ago

1.0.43

5 years ago

1.0.42

5 years ago

1.0.41

5 years ago

1.0.40

5 years ago

1.0.39

5 years ago

1.0.38

5 years ago

1.0.37

5 years ago

1.0.36

5 years ago

1.0.33

5 years ago

1.0.35

5 years ago

1.0.34

5 years ago

1.0.32

5 years ago

1.0.31

5 years ago

1.0.30

5 years ago

1.0.29

5 years ago

1.0.28

5 years ago

1.0.27

5 years ago

1.0.26

5 years ago

1.0.25

5 years ago

1.0.24

5 years ago

1.0.19

5 years ago

1.0.18

5 years ago

1.0.17

5 years ago

1.0.16

5 years ago

1.0.22

5 years ago

1.0.21

5 years ago

1.0.20

5 years ago

1.0.23

5 years ago

1.0.15

5 years ago

1.0.14

5 years ago

1.0.13

5 years ago

1.0.11

5 years ago

1.0.10

5 years ago

1.0.9

5 years ago

1.0.8

5 years ago

1.0.7

5 years ago

1.0.6

5 years ago

1.0.5

5 years ago

1.0.4

5 years ago

1.0.3

5 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago