react-native-chart-kit
If you're looking to **build a website or a cross-platform mobile app** – we will be happy to help you! Send a note to clients@ui1.io and we will be in touch with you shortly.
Last updated 5 days ago by hermanya .
Original npm · Tarball · package.json
$ cnpm install react-native-chart-kit 
SYNC missed versions from official npm registry.

If you're looking to build a website or a cross-platform mobile app – we will be happy to help you! Send a note to clients@ui1.io and we will be in touch with you shortly.

Chart Kit

????See example app

React Native Chart Kit Documentation

Import components

  1. yarn add react-native-chart-kit
  2. yarn add react-native-svg prop-types install peer dependencies
  3. Use with ES6 syntax to import components
import {
  LineChart,
  BarChart,
  PieChart,
  ProgressChart,
  ContributionGraph,
  StackedBarChart
} from "react-native-chart-kit";

Quick Example

<View>
  <Text>Bezier Line Chart</Text>
  <LineChart
    data={{
      labels: ["January", "February", "March", "April", "May", "June"],
      datasets: [
        {
          data: [
            Math.random() * 100,
            Math.random() * 100,
            Math.random() * 100,
            Math.random() * 100,
            Math.random() * 100,
            Math.random() * 100
          ]
        }
      ]
    }}
    width={Dimensions.get("window").width} // from react-native
    height={220}
    yAxisLabel="$"
    yAxisSuffix="k"
    chartConfig={{
      backgroundColor: "#e26a00",
      backgroundGradientFrom: "#fb8c00",
      backgroundGradientTo: "#ffa726",
      decimalPlaces: 2, // optional, defaults to 2dp
      color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
      labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
      style: {
        borderRadius: 16
      },
      propsForDots: {
        r: "6",
        strokeWidth: "2",
        stroke: "#ffa726"
      }
    }}
    bezier
    style={{
      marginVertical: 8,
      borderRadius: 16
    }}
  />
</View>

Chart style object

Define a chart style object with following properies as such:

const chartConfig = {
  backgroundGradientFrom: "#1E2923",
  backgroundGradientFromOpacity: 0,
  backgroundGradientTo: "#08130D",
  backgroundGradientToOpacity: 0.5,
  color: (opacity = 1) => `rgba(26, 255, 146, ${opacity})`,
  strokeWidth: 2, // optional, default 3
  barPercentage: 0.5
};
Property Type Description
backgroundGradientFrom string Defines the first color in the linear gradient of a chart's background
backgroundGradientFromOpacity Number Defines the first color opacity in the linear gradient of a chart's background
backgroundGradientTo string Defines the second color in the linear gradient of a chart's background
backgroundGradientToOpacity Number Defines the second color opacity in the linear gradient of a chart's background
fillShadowGradient string Defines the color of the area under data
fillShadowGradientOpacity Number Defines the initial opacity of the area under data
color function => string Defines the base color function that is used to calculate colors of labels and sectors used in a chart
strokeWidth Number Defines the base stroke width in a chart
barPercentage Number Defines the percent (0-1) of the available width each bar width in a chart
barRadius Number Defines the radius of each bar
propsForBackgroundLines props Override styles of the background lines, refer to react-native-svg's Line documentation
propsForLabels props Override styles of the labels, refer to react-native-svg's Text documentation

Responsive charts

To render a responsive chart, use Dimensions react-native library to get the width of the screen of your device like such

import { Dimensions } from "react-native";
const screenWidth = Dimensions.get("window").width;

Line Chart

Line Chart

const data = {
  labels: ["January", "February", "March", "April", "May", "June"],
  datasets: [
    {
      data: [20, 45, 28, 80, 99, 43],
      color: (opacity = 1) => `rgba(134, 65, 244, ${opacity})`, // optional
      strokeWidth: 2 // optional
    }
  ],
  legend: ["Rainy Days", "Sunny Days", "Snowy Days"] // optional
};
<LineChart
  data={data}
  width={screenWidth}
  height={220}
  chartConfig={chartConfig}
/>
Property Type Description
data Object Data for the chart - see example above
width Number Width of the chart, use 'Dimensions' library to get the width of your screen for responsive
height Number Height of the chart
withDots boolean Show dots on the line - default: True
withShadow boolean Show shadow for line - default: True
withInnerLines boolean Show inner dashed lines - default: True
withOuterLines boolean Show outer dashed lines - default: True
withVerticalLabels boolean Show vertical labels - default: True
withHorizontalLabels boolean Show horizontal labels - default: True
fromZero boolean Render charts from 0 not from the minimum value. - default: False
yAxisLabel string Prepend text to horizontal labels -- default: ''
yAxisSuffix string Append text to horizontal labels -- default: ''
xAxisLabel string Prepend text to vertical labels -- default: ''
chartConfig Object Configuration object for the chart, see example config object above
decorator Function This function takes a whole bunch of stuff and can render extra elements, such as data point info or additional markup.
onDataPointClick Function Callback that takes {value, dataset, getColor}
horizontalLabelRotation number (degree) Rotation angle of the horizontal labels - default 0
verticalLabelRotation number (degree) Rotation angle of the vertical labels - default 0
getDotColor function => string Defines the dot color function that is used to calculate colors of dots in a line chart and takes (dataPoint, dataPointIndex)
renderDotContent Function Render additional content for the dot. Takes ({x, y, index}) as arguments.
yLabelsOffset number Offset for Y axis labels
xLabelsOffset number Offset for X axis labels
hidePointsAtIndex number[] Indices of the data points you don't want to display
formatYLabel Function This function change the format of the display value of the Y label. Takes the Y value as argument and should return the desirable string.
formatXLabel Function This function change the format of the display value of the X label. Takes the X value as argument and should return the desirable string.
getDotProps (value, index) => props This is an alternative to chartConfig's propsForDots
segments number The amount of horizontal lines - default 4

Bezier Line Chart

Line Chart

<LineChart
  data={data}
  width={screenWidth}
  height={256}
  verticalLabelRotation={30}
  chartConfig={chartConfig}
  bezier
/>
Property Type Description
bezier boolean Add this prop to make the line chart smooth and curvy

Progress Ring

Progress Chart

// each value represents a goal ring in Progress chart
const data = {
  labels: ["Swim", "Bike", "Run"], // optional
  data: [0.4, 0.6, 0.8]
};
<ProgressChart
  data={data}
  width={screenWidth}
  height={220}
  chartConfig={chartConfig}
  hideLegend={false}
/>
Property Type Description
data Object Data for the chart - see example above
width Number Width of the chart, use 'Dimensions' library to get the width of your screen for responsive
height Number Height of the chart
chartConfig Object Configuration object for the chart, see example config in the beginning of this file
hideLegend Boolean Switch to hide chart legend (defaults to false)

Bar chart

Bat Chart

const data = {
  labels: ["January", "February", "March", "April", "May", "June"],
  datasets: [
    {
      data: [20, 45, 28, 80, 99, 43]
    }
  ]
};
<BarChart
  style={graphStyle}
  data={data}
  width={screenWidth}
  height={220}
  yAxisLabel="$"
  chartConfig={chartConfig}
  verticalLabelRotation={30}
/>
Property Type Description
data Object Data for the chart - see example above
width Number Width of the chart, use 'Dimensions' library to get the width of your screen for responsive
height Number Height of the chart
withVerticalLabels boolean Show vertical labels - default: True
withHorizontalLabels boolean Show horizontal labels - default: True
fromZero boolean Render charts from 0 not from the minimum value. - default: False
withInnerLines boolean Show inner dashed lines - default: True
yAxisLabel string Prepend text to horizontal labels -- default: ''
yAxisSuffix string Append text to horizontal labels -- default: ''
chartConfig Object Configuration object for the chart, see example config in the beginning of this file
horizontalLabelRotation number (degree) Rotation angle of the horizontal labels - default 0
verticalLabelRotation number (degree) Rotation angle of the vertical labels - default 0
showBarTops boolean Show bar tops

StackedBar chart

StackedBar_Chart

const data = {
  labels: ["Test1", "Test2"],
  legend: ["L1", "L2", "L3"],
  data: [[60, 60, 60], [30, 30, 60]],
  barColors: ["#dfe4ea", "#ced6e0", "#a4b0be"]
};
<StackedBarChart
  style={graphStyle}
  data={data}
  width={screenWidth}
  height={220}
  chartConfig={chartConfig}
/>
Property Type Description
data Object Data for the chart - see example above
width Number Width of the chart, use 'Dimensions' library to get the width of your screen for responsive
height Number Height of the chart
withVerticalLabels boolean Show vertical labels - default: True
withHorizontalLabels boolean Show horizontal labels - default: True
chartConfig Object Configuration object for the chart, see example config in the beginning of this file
barPercentage Number Defines the percent (0-1) of the available width each bar width in a chart
showLegend boolean Show legend - default: True

Pie chart

Pie Chart

Modified Pie Chart Screenshot

Pie Chart_modified

const data = [
  {
    name: "Seoul",
    population: 21500000,
    color: "rgba(131, 167, 234, 1)",
    legendFontColor: "#7F7F7F",
    legendFontSize: 15
  },
  {
    name: "Toronto",
    population: 2800000,
    color: "#F00",
    legendFontColor: "#7F7F7F",
    legendFontSize: 15
  },
  {
    name: "Beijing",
    population: 527612,
    color: "red",
    legendFontColor: "#7F7F7F",
    legendFontSize: 15
  },
  {
    name: "New York",
    population: 8538000,
    color: "#ffffff",
    legendFontColor: "#7F7F7F",
    legendFontSize: 15
  },
  {
    name: "Moscow",
    population: 11920000,
    color: "rgb(0, 0, 255)",
    legendFontColor: "#7F7F7F",
    legendFontSize: 15
  }
];
<PieChart
  data={data}
  width={screenWidth}
  height={220}
  chartConfig={chartConfig}
  accessor="population"
  backgroundColor="transparent"
  paddingLeft="15"
  absolute
/>
Property Type Description
data Object Data for the chart - see example above
width Number Width of the chart, use 'Dimensions' library to get the width of your screen for responsive
height Number Height of the chart
chartConfig Object Configuration object for the chart, see example config in the beginning of this file
accessor string Property in the data object from which the number values are taken
bgColor string background color - if you want to set transparent, input transparent or none.
paddingLeft string left padding of the pie chart
absolute boolean shows the values as absolute numbers
hasLegend boolean Defaults to true, set it to false to remove the legend

Contribution graph (heatmap)

Contribution Graph

This type of graph is often use to display a developer contribution activity. However, there many other use cases this graph is used when you need to visualize a frequency of a certain event over time.

const commitsData = [
  { date: "2017-01-02", count: 1 },
  { date: "2017-01-03", count: 2 },
  { date: "2017-01-04", count: 3 },
  { date: "2017-01-05", count: 4 },
  { date: "2017-01-06", count: 5 },
  { date: "2017-01-30", count: 2 },
  { date: "2017-01-31", count: 3 },
  { date: "2017-03-01", count: 2 },
  { date: "2017-04-02", count: 4 },
  { date: "2017-03-05", count: 2 },
  { date: "2017-02-30", count: 4 }
];
<ContributionGraph
  values={commitsData}
  endDate={new Date("2017-04-01")}
  numDays={105}
  width={screenWidth}
  height={220}
  chartConfig={chartConfig}
/>
Property Type Description
data Object Data for the chart - see example above
width Number Width of the chart, use 'Dimensions' library to get the width of your screen for responsive
height Number Height of the chart
chartConfig Object Configuration object for the chart, see example config in the beginning of this file
accessor string Property in the data object from which the number values are taken

More styling

Every charts also accepts style props, which will be applied to parent svg or View component of each chart.

Abstract Chart

src/abstract-chart.js is an extendable class which can be used to create your own charts!

The following methods are available:

renderHorizontalLines(config)

Renders background horizontal lines like in the Line Chart and Bar Chart. Takes a config object with following properties:

{
  // width of your chart
  width: Number,
  // height of your chart
  height: Number,
  // how many lines to render
  count: Number,
  // top padding from the chart top edge
  paddingTop: Number
}

renderVerticalLabels(config)

Render background vertical lines. Takes a config object with following properties:

{
  // data needed to calculate the number of lines to render
  data: Array,
  // width of your chart
  width: Number,
  // height of your chart
  height: Number,
  paddingTop: Number,
  paddingRight: Number
}

renderDefs(config)

Render definitions of background and shadow gradients

{
  // width of your chart
  width: Number,
  // height of your chart
  height: Number,
  // first color of background gradient
  backgroundGradientFrom: String,
  // first color opacity of background gradient (0 - 1.0)
  backgroundGradientFromOpacity: Number,
  // second color of background gradient
  backgroundGradientTo: String,
  // second color opacity of background gradient (0 - 1.0)
  backgroundGradientToOpacity: Number,
}

More information

This library is built on top of the following open-source projects:

Contribute

See the contribution guide and join the contributors!

Current Tags

  • 4.4.1                                ...           latest (5 days ago)

57 Versions

  • 4.4.1                                ...           5 days ago
  • 4.4.0                                ...           7 days ago
  • 4.3.0                                ...           a month ago
  • 4.2.0                                ...           a month ago
  • 4.1.0                                ...           2 months ago
  • 4.0.0                                ...           2 months ago
  • 3.13.0                                ...           2 months ago
  • 3.12.0                                ...           2 months ago
  • 3.11.0                                ...           3 months ago
  • 3.10.0                                ...           3 months ago
  • 3.9.0                                ...           3 months ago
  • 3.8.0                                ...           3 months ago
  • 3.7.0                                ...           3 months ago
  • 3.6.1                                ...           4 months ago
  • 3.6.0                                ...           4 months ago
  • 3.5.0                                ...           4 months ago
  • 3.4.0                                ...           4 months ago
  • 3.3.1                                ...           5 months ago
  • 3.3.0                                ...           5 months ago
  • 3.2.1                                ...           5 months ago
  • 3.2.0                                ...           6 months ago
  • 3.1.0                                ...           6 months ago
  • 3.0.1                                ...           6 months ago
  • 3.0.0                                ...           7 months ago
  • 2.6.1                                ...           9 months ago
  • 2.6.0                                ...           9 months ago
  • 2.5.0                                ...           9 months ago
  • 2.4.0                                ...           10 months ago
  • 2.3.0                                ...           10 months ago
  • 2.2.1                                ...           a year ago
  • 2.2.0                                ...           a year ago
  • 2.1.0                                ...           a year ago
  • 2.0.1                                ...           a year ago
  • 2.0.0                                ...           a year ago
  • 1.2.2                                ...           a year ago
  • 1.2.1                                ...           a year ago
  • 1.2.0                                ...           a year ago
  • 1.1.9                                ...           a year ago
  • 0.1.6                                ...           a year ago
  • 1.1.8                                ...           a year ago
  • 1.1.7                                ...           a year ago
  • 1.1.6                                ...           a year ago
  • 1.1.5                                ...           2 years ago
  • 1.1.4                                ...           2 years ago
  • 1.1.3                                ...           2 years ago
  • 1.1.2                                ...           2 years ago
  • 1.1.1                                ...           2 years ago
  • 1.1.0                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
  • 0.2.1                                ...           2 years ago
  • 0.2.0                                ...           2 years ago
  • 0.1.5                                ...           2 years ago
  • 0.1.4                                ...           2 years ago
  • 0.1.3                                ...           2 years ago
  • 0.1.2                                ...           2 years ago
  • 0.1.1                                ...           2 years ago
  • 0.1.0                                ...           2 years ago
Maintainers (1)
Downloads
Today 12
This Week 30
This Month 259
Last Day 18
Last Week 135
Last Month 344
Dependencies (3)
Dev Dependencies (22)

Copyright 2014 - 2016 © taobao.org |