@meniga/charts

    5.0.0-alpha.0 • Public • Published

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

    Install

    npm i @meniga/charts

    DownloadsWeekly Downloads

    3

    Version

    5.0.0-alpha.0

    License

    MIT

    Unpacked Size

    45.4 kB

    Total Files

    32

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar