react-apexchart-library v0.11.0

react-apexchart-library

react + apexchart 를 쉽게 시작하기 위해 제작했습니다.

Easy to get started with react + apexchart.

apexchart 종류 별로 업데이트 예정이며, 현재는 Line Chart, Bar Chart, Area Chart, Bubble Chart, BoxPlot Chart, Candlestick Chart, Heatmap Chart, Pie Chart, PolarArea Chart, Radar Chart, Radial Bar Chart, TreeMap Chart 가 업데이트 된 상태 입니다.

It will be updated for each apexchart type, and the Line Chart, Bar Chart, Area Chart, Bubble Chart, BoxPlot Chart, Candlestick Chart, Heatmap Chart, Pie Chart, PolarArea Chart, Radar Chart, Radial Bar Chart, TreeMap Chart is currently updated.

Download and Installation

Installing via npm

npm i react-apexchart-library

Usage

import {
  LineChart,
  BarChart,
  AreaChart,
  BubbleChart,
  BoxPlotChart,
  CandlestickChart,
  HeatmapChart,
  PieChart,
  PolarAreaChart,
  RadarChart,
  RadialBarChart,
  TreeMapChart,
} from 'react-apexchart-library';

최소한의 구성으로 기본적인 라인 차트 만들려면 아래와 같이 진행하세요.

To create a basic line chart with minimal configuration, proceed as follows:

function App() {
  const chartSeries = [
    {
      name: 'Test Name1',
      data: [10, 30, 50, 70, 90, 10, 30],
    },
    {
      name: 'Test Name2',
      data: [20, 40, 60, 80, 20, 40, 60],
    },
  ];
  const categories = ['test1', 'test2', 'test3', 'test4', 'test5', 'test6', 'test7'];
  return (
    <>
      <LineChart // or <BarChart />, <AreaChart /> ... etc
        chartSeries={chartSeries}
        categories={categories}
      />
    </>
  );
}

export default App;

아래와 같이 차트가 렌더링 됩니다.

This will render the following chart.

Bubble Chart 에서는 Series 설정을 다르게 해야 합니다.

In case of Bubble Chart, you need to set the Series differently.

function App() {
  const bubbleRadius = [10, 100];
  const chartSeries = [
    {
      name: 'Bubble1',
      data: [
        [10, 10, 10],
        [20, 20, 20],
        [30, 30, 30],
      ],
    },
    {
      name: 'Bubble2',
      data: [
        [50, 50, 50],
        [60, 60, 60],
        [70, 70, 70],
      ],
    },
    {
      name: 'Bubble3',
      data: [
        [40, 40, 40],
        [80, 80, 80],
        [90, 90, 90],
      ],
    },
    {
      name: 'Bubble4',
      data: [
        [26, 26, 26],
        [73, 73, 73],
        [81, 81, 81],
      ],
    },
  ];

  //* data: [[x: number => xAxis, y: number => yAxis, z: number => size]]
  return (
    <>
      <BubbleChart chartSeries={chartSeries} bubbleRadius={bubbleRadius} dataLabelEnabled={false} />
    </>
  );
}

BoxPlot Chart 에서는 Series 설정을 다르게 해야 합니다.

In case of BoxPlot Chart, you need to set the Series differently.

function App() {
  const chartSeries = [
    {
      data: [
        {
          x: 'Category A',
          y: [54, 66, 69, 75, 88],
        },
        {
          x: 'Category B',
          y: [43, 65, 69, 76, 81],
        },
        {
          x: 'Category C',
          y: [31, 39, 45, 51, 59],
        },
        {
          x: 'Category D',
          y: [39, 46, 55, 65, 71],
        },
        {
          x: 'Category E',
          y: [29, 31, 35, 39, 44],
        },
        {
          x: 'Category F',
          y: [41, 49, 58, 61, 67],
        },
        {
          x: 'Category G',
          y: [54, 59, 66, 71, 88],
        },
      ],
    },
  ];

  //* [{ x: category/date, y: [min, q1, median, q3, max] }]
  return (
    <>
      <BoxPlotChart chartSeries={chartSeries} dataLabelEnabled={false} zoomOptions={{ enabled: false }} />
    </>
  );
}

Candlestick Chart 에서는 Series 설정을 다르게 해야 합니다.

In case of Candlestick Chart, you need to set the Series differently.

function App() {
  const chartSeries = [{
      data: [
        {
          x: new Date(1538778600000),
          y: [6629.81, 6650.5, 6623.04, 6633.33]
        },
        {
          x: new Date(1538780400000),
          y: [6632.01, 6643.59, 6620, 6630.11]
        },
        {
          x: new Date(1538782200000),
          y: [6630.71, 6648.95, 6623.34, 6635.65]
        },
        {
          x: new Date(1538784000000),
          y: [6635.65, 6651, 6629.67, 6638.24]
        },
        {
          x: new Date(1538785800000),
          y: [6638.24, 6640, 6620, 6624.47]
        },
        {
          x: new Date(1538787600000),
          y: [6624.53, 6636.03, 6621.68, 6624.31]
        },
        {
          x: new Date(1538789400000),
          y: [6624.61, 6632.2, 6617, 6626.02]
        },
        {
          x: new Date(1538791200000),
          y: [6627, 6627.62, 6584.22, 6603.02]
        },
        {
          x: new Date(1538793000000),
          y: [6605, 6608.03, 6598.95, 6604.01]
        },
        ...
      ]
    }];

  /*
  The multi-dimensional array:
  [[Timestamp], [O, H, L, C]]

  single array:
  [Timestamp, O, H, L, C]

  xy format:
  [{ x: date, y: [O,H,L,C] }]
  */

  return (
    <>
      <CandlestickChart
        chartSeries={chartSeries}
        dataLabelEnabled={false}
        XAxisOptions={['datetime']}
      />
    </>
  );
}

Heatmap Chart 에서는 Series 설정을 다르게 해야 합니다.

In case of Heatmap Chart, you need to set the Series differently.

function App() {
  const chartSeries = [
    {
      name: 'Metric 1',
      data: [
        {
          x: 'W1',
          y: 22,
        },
        {
          x: 'W2',
          y: 29,
        },
        ...etc,
      ],
    },
    {
      name: 'Metric 2',
      data: [
        {
          x: 'W1',
          y: 22,
        },
        {
          x: 'W2',
          y: 29,
        },
        ...etc,
      ],
    },
    ...etc,
  ];

  const heatmapColorScale = [
    {
      from: 0,
      to: 20,
      name: 'low',
      color: '#2196F3',
    },
    {
      from: 21,
      to: 40,
      name: 'medium',
      color: '#4CAF50',
    },
    {
      from: 41,
      to: 60,
      name: 'high',
      color: '#FFC107',
    },
    {
      from: 61,
      to: 80,
      name: 'extreme',
      color: '#FF5722',
    },
    {
      from: 81,
      to: 100,
      name: 'max',
      color: '#9C27B0',
    },
  ];

  return (
    <>
      <HeatmapChart chartSeries={chartSeries} dataLabelEnabled={false} heatmapColorScale={heatmapColorScale} />
    </>
  );
}

Pie Chart 에서는 Series 설정을 다르게 해야 합니다.

In case of Pie Chart, you need to set the Series differently.

function App() {
  const chartSeries = [44, 55, 13, 43, 22];
  const pieLabels = ['Label1', 'Label2', 'Label3', 'Label4', 'Label5'];

  return (
    <>
      <PieChart chartSeries={chartSeries} pieLabels={pieLabels} />
    </>
  );
}

PolarArea Chart 는 Pie Chart 와 동일합니다.

PolarArea Chart is the same as Pie Chart.

function App() {
  const chartSeries = [44, 55, 13, 43, 22];
  const polarLabels = ['Label1', 'Label2', 'Label3', 'Label4', 'Label5'];

  return (
    <>
      <PolarAreaChart chartSeries={chartSeries} polarLabels={polarLabels} dataLabelEnabled={false} />
    </>
  );
}

Radar Chart 는 Line Chart 와 동일합니다.

Radar Chart is the same as Line Chart.

function App() {
  const chartSeries = [
    {
      name: 'Test Name1',
      data: [10, 30, 50, 70, 90, 10, 30],
    },
    {
      name: 'Test Name2',
      data: [20, 40, 60, 80, 20, 40, 60],
    },
  ];
  const categories = ['test1', 'test2', 'test3', 'test4', 'test5', 'test6', 'test7'];
  return (
    <>
      <RadarChart // or <BarChart />, <AreaChart /> ... etc
        chartSeries={chartSeries}
        categories={categories}
        dataLabelEnabled={false}
      />
    </>
  );
}

Radial Bar Chart 는 Pie Chart 와 동일합니다.

Radial Bar Chart is the same as Pie Chart.

function App() {
  const chartSeries = [10, 30, 50, 70, 90];
  const radialBarLabels = ['test1', 'test2', 'test3', 'test4', 'test5'];
  return (
    <>
      <RadialBarChart chartSeries={chartSeries} radialBarLabels={radialBarLabels} tooltipOptions={[false]} />
    </>
  );
}

TreeMap Chart is the same as Heatmap Chart.

function App() {
  const chartSeries = [
    {
      name: 'Desktops',
      data: [
        {
          x: 'ABC',
          y: 10,
        },
        {
          x: 'DEF',
          y: 60,
        },
        {
          x: 'XYZ',
          y: 41,
        },
      ],
    },
    {
      name: 'Mobile',
      data: [
        {
          x: 'ABCD',
          y: 10,
        },
        {
          x: 'DEFG',
          y: 20,
        },
        {
          x: 'WXYZ',
          y: 51,
        },
        {
          x: 'PQR',
          y: 30,
        },
        {
          x: 'MNO',
          y: 20,
        },
        {
          x: 'CDE',
          y: 30,
        },
      ],
    },
  ];

  return (
    <>
      <TreeMapChart chartSeries={chartSeries} dataLabelTextStyle={{ colors: ['#fff'] }} zoomOptions={{ enabled: false }} />
    </>
  );
}

Props

Chart PlotOptions Props

BarChart

AreaChart

BubbleChart

BoxPlotChart

CandlestickChart

HeatmapChart

PieChart

PolarAreaChart

RadarChart

RadialBarChart

TreeMapChart