6.12.1 • Published 3 years ago

tp-react-native-chart-kit v6.12.1

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

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

To try the examples in Expo, please change main to ./node_modules/expo/AppEntry.js in package.json before starting things with expo run. You'll need to have expo-cli installed via npm install -g expo-cli.

React Native Chart Kit Documentation

Import components

  1. yarn add react-native-chart-kit
  2. yarn add react-native-svg 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"
    yAxisInterval={1} // optional, defaults to 1
    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,
  useShadowColorFromDataset: false // optional
};
PropertyTypeDescription
backgroundGradientFromstringDefines the first color in the linear gradient of a chart's background
backgroundGradientFromOpacityNumberDefines the first color opacity in the linear gradient of a chart's background
backgroundGradientTostringDefines the second color in the linear gradient of a chart's background
backgroundGradientToOpacityNumberDefines the second color opacity in the linear gradient of a chart's background
fillShadowGradientFromstringDefines the first color in the linear gradient of the area under data (can also be specified as fillShadowGradient)
fillShadowGradientFromOpacityNumberDefines the first color opacity in the linear gradient of the area under data (can also be specified as fillShadowGradientOpacity)
fillShadowGradientFromOffsetNumberDefines the first color offset (0-1) in the linear gradient of the area under data
fillShadowGradientTostringDefines the second color in the linear gradient of the area under data
fillShadowGradientToOpacityNumberDefines the second color opacity in the linear gradient of the area under data
fillShadowGradientToOffsetNumberDefines the second color offset (0-1) in the linear gradient of the area under data
useShadowColorFromDatasetBooleanDefines the option to use color from dataset to each chart data. Default is false
colorfunction => stringDefines the base color function that is used to calculate colors of labels and sectors used in a chart
strokeWidthNumberDefines the base stroke width in a chart
barPercentageNumberDefines the percent (0-1) of the available width each bar width in a chart
barRadiusNumberDefines the radius of each bar
propsForBackgroundLinespropsOverride styles of the background lines, refer to react-native-svg's Line documentation
propsForLabelspropsOverride styles of the labels, refer to react-native-svg's Text documentation
propsForVerticalLabelspropsOverride styles of vertical labels, refer to react-native-svg's Text documentation
propsForHorizontalLabelspropsOverride styles of horizontal 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"] // optional
};
<LineChart
  data={data}
  width={screenWidth}
  height={220}
  chartConfig={chartConfig}
/>
PropertyTypeDescription
dataObjectData for the chart - see example above
widthNumberWidth of the chart, use 'Dimensions' library to get the width of your screen for responsive
heightNumberHeight of the chart
withDotsbooleanShow dots on the line - default: True
withShadowbooleanShow shadow for line - default: True
withInnerLinesbooleanShow inner dashed lines - default: True
withOuterLinesbooleanShow outer dashed lines - default: True
withVerticalLinesbooleanShow vertical lines - default: True
withHorizontalLinesbooleanShow horizontal lines - default: True
withVerticalLabelsbooleanShow vertical labels - default: True
withHorizontalLabelsbooleanShow horizontal labels - default: True
fromZerobooleanRender charts from 0 not from the minimum value. - default: False
yAxisLabelstringPrepend text to horizontal labels -- default: ''
yAxisSuffixstringAppend text to horizontal labels -- default: ''
xAxisLabelstringPrepend text to vertical labels -- default: ''
yAxisIntervalstringDisplay y axis line every {x} input. -- default: 1
chartConfigObjectConfiguration object for the chart, see example config object above
decoratorFunctionThis function takes a whole bunch of stuff and can render extra elements, such as data point info or additional markup.
onDataPointClickFunctionCallback that takes {value, dataset, getColor}
horizontalLabelRotationnumber (degree)Rotation angle of the horizontal labels - default 0
verticalLabelRotationnumber (degree)Rotation angle of the vertical labels - default 0
getDotColorfunction => stringDefines the dot color function that is used to calculate colors of dots in a line chart and takes (dataPoint, dataPointIndex)
renderDotContentFunctionRender additional content for the dot. Takes ({x, y, index, indexData}) as arguments.
yLabelsOffsetnumberOffset for Y axis labels
xLabelsOffsetnumberOffset for X axis labels
hidePointsAtIndexnumber[]Indices of the data points you don't want to display
formatYLabelFunctionThis function change the format of the display value of the Y label. Takes the Y value as argument and should return the desirable string.
formatXLabelFunctionThis 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) => propsThis is an alternative to chartConfig's propsForDots
segmentsnumberThe amount of horizontal lines - default 4

Bezier Line Chart

Line Chart

<LineChart
  data={data}
  width={screenWidth}
  height={256}
  verticalLabelRotation={30}
  chartConfig={chartConfig}
  bezier
/>
PropertyTypeDescription
bezierbooleanAdd 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}
  strokeWidth={16}
  radius={32}
  chartConfig={chartConfig}
  hideLegend={false}
/>
PropertyTypeDescription
dataObjectData for the chart - see example above
widthNumberWidth of the chart, use 'Dimensions' library to get the width of your screen for responsive
heightNumberHeight of the chart
strokeWidthNumberWidth of the stroke of the chart - default: 16
radiusNumberInner radius of the chart - default: 32
chartConfigObjectConfiguration object for the chart, see example config in the beginning of this file
hideLegendBooleanSwitch 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}
/>
PropertyTypeDescription
dataObjectData for the chart - see example above
widthNumberWidth of the chart, use 'Dimensions' library to get the width of your screen for responsive
heightNumberHeight of the chart
withVerticalLabelsbooleanShow vertical labels - default: True
withHorizontalLabelsbooleanShow horizontal labels - default: True
fromZerobooleanRender charts from 0 not from the minimum value. - default: False
withInnerLinesbooleanShow inner dashed lines - default: True
yAxisLabelstringPrepend text to horizontal labels -- default: ''
yAxisSuffixstringAppend text to horizontal labels -- default: ''
chartConfigObjectConfiguration object for the chart, see example config in the beginning of this file
horizontalLabelRotationnumber (degree)Rotation angle of the horizontal labels - default 0
verticalLabelRotationnumber (degree)Rotation angle of the vertical labels - default 0
showBarTopsbooleanShow bar tops
showValuesOnTopOfBarsbooleanShow value above bars

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}
/>
PropertyTypeDescription
dataObjectData for the chart - see example above
widthNumberWidth of the chart, use 'Dimensions' library to get the width of your screen for responsive
heightNumberHeight of the chart
withVerticalLabelsbooleanShow vertical labels - default: True
withHorizontalLabelsbooleanShow horizontal labels - default: True
chartConfigObjectConfiguration object for the chart, see example config in the beginning of this file
barPercentageNumberDefines the percent (0-1) of the available width each bar width in a chart
showLegendbooleanShow 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"}
  center={[10, 50]}
  absolute
/>
PropertyTypeDescription
dataObjectData for the chart - see example above
widthNumberWidth of the chart, use 'Dimensions' library to get the width of your screen for responsive
heightNumberHeight of the chart
chartConfigObjectConfiguration object for the chart, see example config in the beginning of this file
accessorstringProperty in the data object from which the number values are taken
bgColorstringbackground color - if you want to set transparent, input transparent or none.
paddingLeftstringleft padding of the pie chart
centerarrayoffset x and y coordinates to position the chart
absolutebooleanshows the values as absolute numbers
hasLegendbooleanDefaults to true, set it to false to remove the legend
avoidFalseZerobooleanDefaults to false, set it to true to display a "<1%" instead of a rounded value equal to "0%"

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}
/>
PropertyTypeDescription
dataObjectData for the chart - see example above
widthNumberWidth of the chart, use 'Dimensions' library to get the width of your screen for responsive
heightNumberHeight of the chart
gutterSizeNumberSize of the gutters between the squares in the chart
squareSizeNumberSize of the squares in the chart
horizontalbooleanShould graph be laid out horizontally? Defaults to true
showMonthLabelsbooleanShould graph include labels for the months? Defaults to true
showOutOfRangeDaysbooleanShould graph be filled with squares, including days outside the range? Defaults to false
chartConfigObjectConfiguration object for the chart, see example config in the beginning of this file
accessorstringProperty in the data object from which the number values are taken; defaults to count
getMonthLabelfunctionFunction which returns the label for each month, taking month index (0 - 11) as argument
onDayPressfunctionCallback invoked when the user clicks a day square on the chart; takes a value-item object

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,
}

Compilation

For production use, the package is automatically compiled after installation, so that you can just install it with npm and use it out-of-the-box.

To transpile TypeScript into JavaScript for development purposes, you can use either run npm run build to compile once, or npm run dev to start compilation in watch mode, which will recompile the files on change.

More information

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

Contribute

See the contribution guide and join the contributors!