Socket
Socket
Sign inDemoInstall

@meniga/charts

Package Overview
Dependencies
3
Maintainers
0
Versions
83
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@meniga/charts


Version published
Maintainers
0
Created

Readme

Source

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

Keywords

FAQs

Last updated on 02 Jul 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc