6.1.34-alpha.0 • Published 8 months ago

@meniga/charts v6.1.34-alpha.0

Weekly downloads
84
License
MIT
Repository
-
Last release
8 months ago

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

6.1.34-alpha.0

8 months ago

6.1.33-alpha.0

9 months ago

6.1.32-alpha.0

9 months ago

6.1.31-alpha.0

9 months ago

6.1.27-alpha.0

10 months ago

6.1.29-alpha.0

9 months ago

6.1.28-alpha.0

9 months ago

6.1.26-alpha.0

10 months ago

6.1.23-alpha.0

10 months ago

6.1.21-alpha.0

10 months ago

6.1.16-alpha.0

1 year ago

6.1.12-alpha.0

1 year ago

6.1.14-alpha.0

1 year ago

6.1.25-alpha.0

10 months ago

6.1.10-alpha.0

1 year ago

6.1.19-alpha.0

11 months ago

6.1.20-alpha.0

10 months ago

6.1.22-alpha.0

10 months ago

6.1.17-alpha.0

1 year ago

6.1.13-alpha.0

1 year ago

6.1.15-alpha.0

1 year ago

6.1.24-alpha.0

10 months ago

6.1.11-alpha.0

1 year ago

6.1.9

1 year ago

6.1.8

1 year ago

6.1.3-alpha.0

1 year ago

6.1.1-alpha.0

1 year ago

6.1.4-alpha.0

1 year ago

6.1.6

1 year ago

6.1.5

1 year ago

6.1.2-alpha.0

1 year ago

6.1.7

1 year ago

6.1.0

1 year ago

6.0.37-alpha.0

1 year ago

6.0.38-alpha.0

1 year ago

6.0.34-alpha.0

1 year ago

6.0.36-alpha.0

1 year ago

6.0.35-alpha.0

1 year ago

6.0.32-alpha.0

1 year ago

6.0.30-alpha.0

1 year ago

6.0.33-alpha.0

1 year ago

6.0.29-alpha.0

1 year ago

6.0.31-alpha.0

1 year ago

6.0.28-alpha.0

1 year ago

6.0.25-alpha.0

1 year ago

6.0.27-alpha.0

1 year ago

6.0.24-alpha.0

1 year ago

6.0.26-alpha.0

1 year ago

6.0.23-alpha.0

1 year ago

6.0.21-alpha.0

2 years ago

6.0.22-alpha.0

2 years ago

6.0.20-alpha.0

2 years ago

6.0.16-alpha.0

2 years ago

6.0.17-alpha.0

2 years ago

6.0.19-alpha.0

2 years ago

6.0.18-alpha.0

2 years ago

6.0.13-alpha.0

2 years ago

6.0.15-alpha.0

2 years ago

6.0.12

2 years ago

6.0.1-alpha.0

2 years ago

6.0.2-alpha.0

2 years ago

6.0.0

2 years ago

6.0.4

2 years ago

6.0.3-alpha.0

2 years ago

1.0.0-alpha.0

2 years ago

6.0.7-alpha.0

2 years ago

6.0.9-alpha.0

2 years ago

4.11.1-alpha.120

4 years ago

5.0.0-alpha.48

4 years ago

5.0.0-alpha.47

4 years ago

5.0.0-alpha.18

4 years ago

5.0.0-alpha.17

4 years ago

5.0.0-alpha.0

4 years ago

4.9.1-alpha.185

4 years ago

4.11.0

4 years ago

4.9.1-alpha.176

4 years ago

4.9.1-alpha.169

5 years ago

4.9.1-alpha.151

5 years ago

4.9.1-alpha.134

5 years ago

4.9.1-alpha.128

5 years ago

4.9.1-alpha.96

5 years ago

4.9.1-alpha.91

5 years ago

4.9.1-alpha.84

5 years ago

4.9.1-alpha.75

5 years ago

4.9.1-alpha.67

5 years ago

4.9.1-alpha.63

5 years ago

4.9.1-alpha.58

5 years ago

4.9.1-alpha.56

5 years ago

4.9.1-alpha.37

5 years ago

4.9.1-alpha.30

5 years ago