Charts

SVG-based charts.

Install

import {Charts} from '@xsolla/uikit';

Examples

Combined
Line
Lines
Bars
Stacked bars
Map
Empty

Not enough data available

More data is needed to generate this graph.

Loading

Loading...

Fail

Loading failed

Please check your connection and try again.

Usage

<Charts
  options={{...}}
  state="loading"
  constructorType="mapChart"
  onRefresh={() => {/* make api call */}}
/>

API

PropertyDescriptionTypeDefault
optionsHighcharts options objectobject{}
stateCurrent state of chart. Can be set to normal, loading, fail, emptystringnormal
constructorTypeString for constructor method. Can be one of chart, mapChart, stockChart, ganttChartstringchart
onRefreshCallback for making api call to retry after failed attempt of data receivingfunc
refreshModeThe way to rerender chart. Can be one of debounce, throttlestringdebounce
dataIdattribute for data identifierstring

When building single serie bar chart you should pass options.tooltip.total, which is sum of all values.

You SHOULD NOT use splines for series

See https://github.com/highcharts/highcharts-react#options-details for full documentation.