@meniga/charts

@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.