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 는 Heatmap Chart 와 동일합니다.

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

Prop	Type	Default	Description
chartSeries	Array	[]	chart data series
chartHeight	Number/String	'500px'	chart height
chartWidth	Number/String	'100%'	chart width
backgroundColor	String	'#fff'	chart background color
offsetX	Number	0	chart offset X Axis
offsetY	Number	0	chart offset Y Axis
sparkLine	Boolean	false	Helps to visualize data in small areas
title	String/Undefined	undefined	chart title
titleStyle	Object	fontSize, fontWeight, color ...etc	chart title style
dataLabelEnabled	Boolean	true	chart label
dataLabelString	String	''	chart label suffix
dataLabelAnchor	String	'middle'	chart label anchor position
dataLabelTextStyle	Object	fontSize, fontWeight, color ...etc	chart label style
dataLabelBackground	Array	[true, '#fff', '#fff']	[used/unused, foreColor, borderColor]
dataLabelTextShadow	Array	[false, '#000', 0.45]	[enabled, color, opacity]
chartLegend	Array	[true, 'top', 'center', 0, 0]	[show, position, horizontalAlign, offsetX, offsetY]
chartMarker	Array	[0, 'circle']	[size, shape]
chartNodata	Array	[undefined, 'middle', 0, 0, 14]	[text, verticalAlign, offsetX, offsetY, fontSize]
chartStroke	Array	[true, 'straight', 2, 0]	[show, curve, width, dashArray]
chartSubtitle	Array	[undefined, 'center', 0, 0, 12, '#9699a2']	[text, align, offsetX, offsetY, color]
tooltipOptions	Array	[true, true, false, 'light', 12]	[enabled, shared, fillSeriesColor, theme, fontSize]
tooltipXAxis	Array	[true, 'dd MMM']	[show, format]
tooltipYAxis	Array	['', '']	[tooltip y axis suffix, tooltip y axis title suffix]
XAxisOptions	Array	['category', 'on', 'bottom', false]	[xAxis type, tickPlacement, position, tooltip enabled]
YAxisOptions	Array	[true, false, false, 6, true]	[show, opposite, reversed, tickAmount, labels show]
colorSet	Array	['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0']	color format
toolbarOptions	Object	show, offsetX, offsetY, ... etc
zoomOptions	Object	enabled, type, autoScaleYaxis, ... etc

Chart PlotOptions Props

BarChart

Prop	Type	Default	Description
barHorizontal	Boolean	false	Bar chart type Horizontal or Vertical
barBorderRadius	Number	0	Bar Border Radius
barColumnWidth	String	'70%'	Bar width
barRangeColor	Array	[0, 0, undefined]	[range from, range to, color]
barBackgroundStyle	Array	[[], 1, 0]	[['color',...], opacity, radius]
barDataLabels	Array	['top', 'horizontal']	[data label position, data label orientation]

AreaChart

Prop	Type	Default	Description
areaFillTo	String	'origin'	'origin' or 'end' : When negative values are present in the area chart, fill the area

BubbleChart

Prop	Type	Default	Description
bubbleRadius	Array	[undefined, undefined]	[minBubbleRadius, maxBubbleRadius]

BoxPlotChart

Prop	Type	Default	Description
boxPlotColors	Array	['#e9ecef', '#f8f9fa']	[upperColor, lowerColor]

CandlestickChart

Prop	Type	Default	Description
candlestickColor	Array	['#e9ecef', '#f8f9fa']	[upwardColor, downwardColor]
candlestickWick	Boolean	true	Candle wick color uses the same color as the body color

HeatmapChart

Prop	Type	Default	Description
heatmapRadius	Number	2	heatmap square radius
heatmapReverse	Boolean	true	Invert Shading for Negative Numbers
heatmapStroke	Boolean	false	Make the heatmap border color the same as the cell color
heatmapColorScale	Array	[]	[{from, to, color, foreColor, name},]
heatmapInverse	Boolean	false	vertically instead of horizontally

PieChart

Prop	Type	Default	Description
pieType	String	'pie'	pie or donut
pieLabels	Array	[]	use in category
pieAngles	Array	[0, 360]	start and end angles of the pie
pieOnClick	Boolean	false	extension when clicked
pieOffset	Array	[0, 0]	position coordinates of pie
pieLabelOffset	Number	0	labels will move outside / inside of the donut area
pieShowLabelAngle	Number	10	Minimum angle to allow data-labels to show
donutBackground	String	'transparent'	The background color of the pie
donutLabelsShow	Boolean	false	Whether to display internal labels when donut
donutLabelValueSuffix	String	''	The suffix on the label when donut
donutTotalShow	Boolean	false	Whether to show the total value when donut
donutTotalStyles	Array	['Total', '22px', '#373d3f']	[total labels title, font size, font color]

PolarAreaChart

Prop	Type	Default	Description
polarLabels	Array	[]	use in category
polarRingStroke	Array	[1, '#e8e8e8']	[Border width of the rings, The line/border color of the rings]
polarSpokeStroke	Array	[1, '#e8e8e8']	[Border width of the spokes, The line/border color of the spokes]

RadarChart

Prop	Type	Default	Description
radarOffset	Array	[0, 0]	[offsetX, offsetY]
radarStroke	Array	['#e8e8e8', '#e8e8e8', 1]	[radar stroke color, radar connector color, stroke width]
radarFillColor	Array	undefined	The polygons can be filled with a custom color. [2 colors, the colors will be repeated for the rest of the polygons.]

RadialBarChart

Prop	Type	Default	Description
radialBarLabels	Array	[]	use in category
radialBarInverse	Boolean	false	Whether to make the first value of series innermost or outermost
radialBarAngle	Array	[0, 360]	[Angle from which the radialBars should start, end]
radialBarOffset	Array	[0, 0]	Sets the offset for radialBars
radialBarHollow	Array	[5, '50%', 'transparent']	[Spacing which will be subtracted from the available hollow size, Size in percentage relative to the total available size of chart, Background color for the hollow part]
radialBarTrack	Array	[true, undefined, undefined]	[Show track under the bar lines, track start angle, track end angle]
radialBarTrackStyle	Array	['#f2f2f2', '97%', 1, 5]	[track color, Width of the track, Opacity of the track, Spacing between each track]
radialBarDataLabels	Boolean	true	Whether to display labels inside radialBars
radialBarDataLabelsName	Array	[true, '16px', 600, undefined, -10]	[Show the name of the respective bar associated with it’s value, font size, font weight, font color, Sets the top offset for name]
radialBarDataLabelsValue	Array	[true, '14px', 400, undefined, 16]	[Show the value label associated with the name label, font size, font weight, font color, Sets the top offset for name]
radialBarTotal	Array	[true, 'Total', '#373d3f', '16px', 600]	[Show the total of all the series in the inner area of radialBar, label name, label color, label size, label weight]

TreeMapChart

Prop	Type	Default	Description
treeMapShades	Boolean	true	Enables color shading based on value.
treeMapShadeIntensity	Number	0.5	intensity of shading
treeMapReverse	Boolean	true	When enabled, it will reverse the shades for negatives but keep the positive shades as it is now.
treeMapDistribute	Boolean	false	When turned on, colors will be shaded for each series.
treeMapFillStroke	Boolean	false	When turned on, the stroke/border around the treemap cell has the same color as the cell color.
treeMapColorScale	Array	[{from: 0, to: 0, color: undefined, foreColor: undefined, }, ...]	[{from: Value indicating range’s upper limit, to: Value indicating range’s lower limit, color: Background color to fill the range with, foreColor: Color of the text if data-labels is enabled}, ...]

react-apexchart-library

react-apexchart-library

Download and Installation

Installing via npm

Usage

Props

Chart PlotOptions Props

BarChart

AreaChart

BubbleChart

BoxPlotChart

CandlestickChart

HeatmapChart

PieChart

PolarAreaChart

RadarChart

RadialBarChart

TreeMapChart

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

react-apexchart-library

react-apexchart-library

Download and Installation

Installing via npm

Usage

Props

Chart PlotOptions Props

BarChart

AreaChart

BubbleChart

BoxPlotChart

CandlestickChart

HeatmapChart

PieChart

PolarAreaChart

RadarChart

RadialBarChart

TreeMapChart

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads