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