react-native-responsive-linechart
Customizable linechart for react-native that works with flex
Last updated 8 days ago by xanderd .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-native-responsive-linechart 
SYNC missed versions from official npm registry.

react-native-responsive-linechart

npm version

Breaking changes in v2

Tooltip and dataPoint (previously valuePoint) config is changed, check the default config for the correct keys.

Installation

npm install react-native-responsive-linechart
import LineChart from "react-native-responsive-linechart";

No need to set an explicit width and height! Percentages or flex work just fine.

Quick example

<LineChart style={{ flex: 1 }} config={config} data={data} />;

const data = [-10, -15, 40, 19, 32, 15, 52, 55, 20, 60, 78, 42, 56];
const config = {
  line: {
    visible: true,
    strokeWidth: 1,
    strokeColor: "#54a0ff"
  },
  area: {
    visible: false
  },
  tooltip: {
    visible: true,
    labelFontSize: 10
  },
  grid: {
    stepSize: 10000
  },
  yAxis: {
    labelColor: "#54a0ff"
  },
  insetY: 10,
  insetX: 10
};

Reference

LineChart

Property Type Description Example
data array Your numeric data [10, 22, 13, 15, 25]
xLabels array Optional labels for the X axis ['jan', 'feb', 'mar']
config object Chart configuration object See next section

Default Config

const defaultConfig = {
  grid: {
    visible: true,
    backgroundColor: "#fff",
    strokeWidth: 1,
    strokeColor: "#ededed",
    stepSize: 15
  },
  line: {
    visible: true,
    strokeWidth: 1,
    strokeColor: "#333"
  },
  area: {
    visible: true,
    gradientFrom: "#be2ddd",
    gradientFromOpacity: 1,
    gradientTo: "#e056fd",
    gradientToOpacity: 0.4
  },
  yAxis: {
    visible: true,
    labelFontSize: 12,
    labelColor: "#777",
    labelFormatter: v => String(v)
  },
  xAxis: {
    visible: false,
    labelFontSize: 12,
    labelColor: "#777"
  },
  tooltip: {
    visible: false,
    labelFormatter: v => v.toFixed(2),
    lineColor: "#777",
    lineWidth: 1,
    circleColor: "#fff",
    circleBorderColor: "#fff",
    circleBorderWidth: 1,
    boxColor: "#fff",
    boxBorderWidth: 1,
    boxBorderColor: "#777",
    boxBorderRadius: 5,
    boxPaddingY: 0,
    boxPaddingX: 0,
    labelColor: "black",
    labelFontSize: 10
  },
  dataPoint: {
    visible: false,
    color: "#777",
    radius: 5,
    label: {
      visible: false,
      labelFontSize: 12,
      labelColor: "#777",
      labelFormatter: v => String(v),
      marginBottom: 25
    }
  },
  insetY: 0,
  insetX: 0,
  interpolation: "none",
  backgroundColor: "#fff"
};

More examples

const data = [-10, -15, 40, 60, 78, 42, 56];
const labels = ["jan", "feb", "mar", "apr", "may", "jun", "jul"];
const config = {
  line: {
    visible: true,
    strokeWidth: 2,
    strokeColor: "#341f97"
  },
  area: {
    visible: false
  },
  yAxis: {
    visible: true,
    labelFormatter: v => String(v) + " °C"
  },
  xAxis: {
    visible: true
  },
  grid: {
    stepSize: 15
  },
  dataPoint: {
    visible: true,
    color: "#777",
    radius: 3,
    label: { visible: true, marginBottom: 25 }
  },
  insetY: 10
};

const data4 = [-10, -15, 40, 19, 32, 15, 52, 55, 20, 60, 78, 42, 56];
const config4 = {
  interpolation: "spline",
  line: { strokeColor: "#be2ddd", strokeWidth: 2 },
  yAxis: { visible: false },
  grid: { visible: false }
};

const data5 = [-10, -15, 40, 19, 32, 15, 52, 55, 20, 60, 78, 42, 56];
const config5 = {
  interpolation: 'spline',
  area: {
    gradientFrom: '#10ac84',
    gradientFromOpacity: 1,
    gradientTo: '#10ac84',
    gradientToOpacity: 0.4,
  },
  line: {
    visible: false
  }
}```

Note: the cards around the charts are not included.

Image for maintainers

Current Tags

  • 2.1.0                                ...           latest (8 days ago)

28 Versions

  • 2.1.0                                ...           8 days ago
  • 2.0.1                                ...           3 months ago
  • 2.0.0                                ...           3 months ago
  • 1.5.3                                ...           3 months ago
  • 1.5.2                                ...           3 months ago
  • 1.5.1                                ...           5 months ago
  • 1.5.0                                ...           7 months ago
  • 1.4.8                                ...           9 months ago
  • 1.4.7                                ...           9 months ago
  • 1.4.6                                ...           9 months ago
  • 1.4.5                                ...           a year ago
  • 1.4.4                                ...           a year ago
  • 1.4.3                                ...           a year ago
  • 1.4.2                                ...           a year ago
  • 1.4.1                                ...           a year ago
  • 1.4.0                                ...           a year ago
  • 1.3.1                                ...           a year ago
  • 1.3.0                                ...           a year ago
  • 1.2.2                                ...           a year ago
  • 1.2.1                                ...           a year ago
  • 1.2.0                                ...           a year ago
  • 1.1.1                                ...           a year ago
  • 1.1.0                                ...           a year ago
  • 1.0.4                                ...           a year ago
  • 1.0.3                                ...           a year ago
  • 1.0.2                                ...           a year ago
  • 1.0.1                                ...           a year ago
  • 1.0.0                                ...           a year ago
Maintainers (1)
Downloads
Today 0
This Week 31
This Month 49
Last Day 0
Last Week 18
Last Month 2
Dependencies (4)
Dev Dependencies (1)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |