@meniga/charts
v6.1.36-alpha.0
Published
A Meniga-branded chart library that uses recharts
Downloads
653
Readme
@meniga/charts
This package is a Meniga-branded wrapper for recharts. Documentation and examples for recharts can be found here: https://recharts.org/en-US/api.
Getting started
Area chart
import { AreasChart } from '@meniga/charts'
<AreasChart
values={ [
{ id: 1, amount1: 120, amount2: 20, amount3: 210 }
{ id: 2, amount1: 140, amount2: 60, amount3: 230 }
{ id: 3, amount1: 20, amount2: 10, amount3: 110 }
]}
areas={ [{ key: 'amount1' }, { key: 'amount2' }, { key: 'amount3' }] }
xAxis={ [{ key: 'id', type: 'number', domain: ['dataMin', 'dataMax'] }] }
yAxis={ [{ type: 'number', domain: ['auto', 'auto'] }] }
colors={ ['#FF0000', '#00FF00', '#0000FF'] }
areaOpacity={ 0.2 } />
In the above example we send in all the relevant values, then define which keys we want to create areas from. We specify that we want one x-axis for the id, and one y-axis. For an area chart to know which colors the different areas should be in we also need to provide a list of colors (in which the first color will be used for the first area). We can also change the opacity of the area fill color.
Bar chart
import { BarsChart } from '@meniga/charts'
<BarsChart
values={ [
{ id: 1, amount1: 120, amount2: 20 }
{ id: 2, amount1: 140, amount2: 60 }
{ id: 3, amount1: 20, amount2: 10 }
]}
xAxis={ [{ key: 'id', type: 'number', domain: ['dataMin', 'dataMax'] }] }
yAxis={ [{ type: 'number', domain: ['auto', 'auto'] }] }
bars={ [{ key: 'amount1' }, { key: 'amount2', isPrediction: true }] } />
In the above example we send in all the relevant values, then define which keys we want to create bars from. We specify that we want one x-axis for the id, and one y-axis. To display the bar with the predefined look designed for predictions, pass isPrediction: true
Line chart
import { LinesChart } from '@meniga/charts'
<LinesChart
values={ [
{ id: 1, amount1: 120, amount2: 20 }
{ id: 2, amount1: 140, amount2: 60 }
{ id: 3, amount1: 20, amount2: 10 }
]}
xAxis={ [{ key: 'id', type: 'number', domain: ['dataMin', 'dataMax'] }] }
yAxis={ [{ type: 'number', domain: ['auto', 'auto'] }] }
lines={ [{ key: 'amount1' }, { key: 'amount2', isPrediction: true }] } />
In the above example we send in all the relevant values, then define which keys we want to create lines from. We specify that we want one x-axis for the id, and one y-axis. To display the line with the predefined look designed for predictions, pass isPrediction: true
Combined chart
import { CombinedChart } from '@meniga/charts'
<CombinedChart
values={ [
{ id: 1, amount1: 120, amount2: 20, amount3: 210 }
{ id: 2, amount1: 140, amount2: 60, amount3: 230 }
{ id: 3, amount1: 20, amount2: 10, amount3: 110 }
]}
xAxis={ [{ key: 'id', type: 'number', domain: ['dataMin', 'dataMax'] }] }
yAxis={ [{ type: 'number', domain: ['auto', 'auto'] }] }
lines={ [{ key: 'amount1' }, { key: 'amount2', isPrediction: true }] }
bars={ [{ key: 'amount3' }] } />
If you want to create a chart with a combination of the different types, CombinedChart should be used. It's created like the other charts, then add lines/bars/areas lists depending on which types you want included.
Meniga-Charts support three four main chart types:
- AreasChart
- BarsChart
- LinesChart
- CombinedChart (Which can show areas, bars and lines in one)
The chart containers can differ in how they display the content, for example hovering data in a bars chart will select the whole area while hovering data in a lines chart will select the dot on the line.
Utils
amountTickFormatter
Helper to format to amounts in chart.