Arty Charty Save

React Native plugin for rendering charts using ART

Project README

ARTy Charty

React Native plugin for rendering charts that used to use ART, but now switched to react-native-svg

About

The goal of ARTy Charty is to produce animated, interactive, performant charts. It uses React Native ART to render the charts. Arty Charty does not rely on 3rd party libraries, such as D3, to produce the charts. This keeps the size of the library small (<80kb uncompressed and not-minified) and chart generating functions can be optimised for speed.

We noticed some issues with the ART library, so we switched to use react-native-svg instead.

Installation

npm i --save arty-charty

You also need to have react-native-svg in your project. You can find instructins on how to install it here.

Usage

For more advanced usage have a look at the demo app here.

ArtyCharty

The ArtyCharty component is used to display line, spline, area, area-spline and bars charts. Charts can be stacked on top of each other by passing in an array of charts. Each chart object in the array needs to specify the kind of chart it is (line, spline, area, area-spline or bars) and an array of data points, where each data point needs to have a value field, which will be used as the value on the Y axis.

Simple line chart example

Simple line chart

import { ArtyCharty } from 'arty-charty';
...js
<ArtyCharty data={[{
          type: 'line',
          data: [{value: 2}, {value: 3}, {value: 1}]
        }]}/>

Stacked charts

import { ArtyCharty } from 'arty-charty';
...
<ArtyCharty 
        data={[
     {
        type: 'area',
        data: [{value: 3.48}, {value: 1.38}, {value: 6.73}, {value: 4.62}, {value: 3.14}],
        highCol: 'rgb(255,0,0)',
        lowCol: 'rgb(255,165,0)'
    },
    {
        type: 'bars',
        data: [{value: 2.16}, {value: 4.83}, {value: 4.04}, {value: 4.30}, {value: 5.26}],
        highCol: 'rgb(125,0,255)',
        lowCol: 'rgb(0,255,0)'
    },
    {
        type: 'line',
        data: [{value: 4.47}, {value: 5.99}, {value: 1.21}, {value: 3.17}, {value: 4.24}],
        lineColor: 'green'
    },
    {
        type: 'spline',
        data: [{value: 3.10}, {value: 2.61}, {value: 3.89}, {value: 1.54}, {value: 1.32}],
        lineColor: 'rgba(255,255,0,.8)'
    },
        ]}/>

Stacked charts with animation and Y-axis ticks

This is the same data as before with animations and selectable line markers and bars enabled. Stacked charts

import { ArtyCharty } from 'arty-charty';
...
<ArtyCharty 
        interactive={true}
        yAxisLeft={{numberOfTicks: 5}}
        animated={true}
        clickFeedback={true}
        data={[
     {
        type: 'area',
        data: [{value: 3.48}, {value: 1.38}, {value: 6.73}, {value: 4.62}, {value: 3.14}],
        highCol: 'rgb(255,0,0)',
        lowCol: 'rgb(255,165,0)',
        drawChart: true
    },
    {
        type: 'bars',
        data: [{value: 2.16}, {value: 4.83}, {value: 4.04}, {value: 4.30}, {value: 5.26}],
        highCol: 'rgb(125,0,255)',
        lowCol: 'rgb(0,255,0)',
        drawChart: true
    },
    {
        type: 'line',
        data: [{value: 4.47}, {value: 5.99}, {value: 1.21}, {value: 3.17}, {value: 4.24}],
        lineColor: 'green'
    },
    {
        type: 'spline',
        data: [{value: 3.10}, {value: 2.61}, {value: 3.89}, {value: 1.54}, {value: 1.32}],
        lineColor: 'rgba(255,255,0,.8)'
    },
        ]}/>

Step chart

<ArtyCharty
    interactive={true}
    animated={true}
    pointsOnScreen={20}
    data={[{
        type: 'step',
        lineColor: 'fuchsia',
        drawChart: true,
        data: Array.from(Array(40)).map(() => {
        let rand = Math.random() + 2;
        return {value: rand, valueLow: rand - Math.random() - .5};
        })}
        ]} />

Area-range chart

 <ArtyCharty
    clickFeedback={true}
    interactive={true}
    animated={true}
    data={[{
        type: 'area-range',
        lineColor: 'rgba(255,0,0,.5)',
        highCol: 'rgb(255,0,0)',
        lowCol: 'rgb(255,165,0)',
        drawChart: true,
        data: Array.from(Array(20)).map(() => {
        let rand = Math.random() + 2;
        return {value: rand, valueLow: rand - Math.random() - .5};
        })}
        ]} />

Bars-range chart

<ArtyCharty
    interactive={true}
    clickFeedback={true}
    animated={true}
    data={[{
        type: 'bars-range',
        lineColor: 'fuchsia',
        data: Array.from(Array(20)).map(() => {
        let rand = Math.random() + 2;
        return {value: rand, valueLow: rand - Math.random() - .5};
        })}
        ]} />

Bars-3d chart

<ArtyCharty
    animated={true}
    interactive={true}
    clickFeedback={true}
    data={[{
        type: 'bars-3d',
        drawChart: true,
        data: Array.from(Array(3)).map((u, idx) => {
        let col = `rgb(${Math.round(Math.random()*255)},${Math.round(Math.random()*255)},${Math.round(Math.random()*255)})`;
            return Array.from(Array(5)).map((u2, idx2) => {
            let val = Math.random();
            return {value: val, color: shadeColor(col, 1 - val)};
            });
        })
    }
    ]} />

Candlestick chart

 <ArtyCharty
    clickFeedback={true}
    interactive={true}
    animated={true}
    data={[{
        type: 'candlestick',
        lineColor: 'fuchsia',
        fillUp:  'orange',
        fillDown: 'rgba(0,0,0,0)',
        drawChart: true,
        data: Array.from(Array(20)).map(() => {
            let rand = Math.random() + 2, open, close, low, high;
            if (Math.random() > .5) {
            open = rand + Math.random();
            high = open + Math.random();
            close = rand - Math.random();
            low = close - Math.random();
            } else {
            open = rand - Math.random();
            low = open - Math.random();
            close = rand + Math.random();
            high = close + Math.random();
            }
            return {open, close, low, high};
        })},
        {
        type: 'candlestick',
        lineColor: 'blue',
        fillUp:  'green',
        fillDown: 'red',
        drawChart: true,
        data: Array.from(Array(20)).map(() => {
            let rand = Math.random() + 7, open, close, low, high;
            if (Math.random() > .5) {
            open = rand + Math.random();
            high = open + Math.random();
            close = rand - Math.random();
            low = close - Math.random();
            } else {
            open = rand - Math.random();
            low = open - Math.random();
            close = rand + Math.random();
            high = close + Math.random();
            }
            return {open, close, low, high};
        })}
        ]} />

Parameters

ArtyCharty component parameters

Parameter	Type	Description
`animated`	boolean	If set to true the chart will be animated. TODO: Add animation parameters to documentation (timing functions, etc...)
`clickFeedback`	boolean	If set to true a material design like click feedback is shown on clicks
`interactive`	boolean	If set to true line markers and bars are selectable.
`onMarkerClick(clickedChartIdx, clickedEntryIdx)`	function	If interactive is set to true, this function will be called with the first parameter being the index of the chart that was clicked and the second parameter the index of the data point on that chart that was clicked.
`yAxisLeft`	object	If this parameter is set, the yAxis will be drawn, with the specified options, e.g. {numberOfTicks: 3, TODO: Add more options...}
`data`	array	Array containing chart objects, see next section for description.
`width`	number	Width in pixels of the chart.

Chart object

The data parameter for the ArtyCharty component is an array of chart objects, with the following options:

Property	Type	Description
`type`	string	The type of the chart to render, available types: line, spline, area, area-spline, bars
`data`	*array	Array containing the data points of the chart. See table 'Data object' below for what the objects in this array should look like for the diferent chart types.
`drawChart`	boolean	If set to true the chart will be animated from left to right.
`lineColor`	string	The color of the line for line charts or the border color for the bar chart.
Area and bar chart only
`highCol`	string	The fill color for high values
`lowCol`	string	The fill color for low values
The fill color used for the bar or area chart for a specific point will be the interpolation between the high and low value. E.g. if highCol is set to red and lowCol to green, then the bar with the highest value will have a red fill and the one with the lowest value will have a green fill.

Data object

Chart type	Description
`line`, `spline`, `area`, `spline-area`	{value: number}
`area-range`	{value: number, valueLow: number}
`candlestick`	{open: number, close: number, low: number, high: number}

ArtyChartyPie

Pie chart

import { ArtyChartyPie } from 'arty-charty';
...
<ArtyChartyPie 
    data={{
    data: [
        {value: .6, color: 'red'},
        {value: 5, color: 'green'},
        {value: 3, color: 'blue'}]
}}/>