aesthetic-charts

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

 

Install

``bash
npm install --save aesthetic-charts
`

`bash
yarn add aesthetic-charts
`

Charts

$3

`tsx
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

`tsx
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([])


return <>
Select Device
setSelectedIndex(+value < 3 ? [+value] : [])}>
{
[
'Mobile',
'Tablet',
'Desktop',
'All'
].map((v, i) => {v})
}



}

export default App

``

License

MIT © rasha08