react-native-chart-kit
Version:
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.
223 lines • 8.2 kB
TypeScript
import React from "react";
import { Animated, TextInput, ViewStyle } from "react-native";
import AbstractChart, { AbstractChartConfig, AbstractChartProps } from "../AbstractChart";
import { ChartData, Dataset } from "../HelperTypes";
export interface LineChartData extends ChartData {
legend?: string[];
}
export interface LineChartProps extends AbstractChartProps {
/**
* Data for the chart.
*
* Example from [docs](https://github.com/indiespirit/react-native-chart-kit#line-chart):
*
* ```javascript
* 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
* }
* ```
*/
data: LineChartData;
/**
* Width of the chart, use 'Dimensions' library to get the width of your screen for responsive.
*/
width: number;
/**
* Height of the chart.
*/
height: number;
/**
* Show dots on the line - default: True.
*/
withDots?: boolean;
/**
* Show shadow for line - default: True.
*/
withShadow?: boolean;
/**
* Show inner dashed lines - default: True.
*/
withScrollableDot?: boolean;
withInnerLines?: boolean;
/**
* Show outer dashed lines - default: True.
*/
withOuterLines?: boolean;
/**
* Show vertical lines - default: True.
*/
withVerticalLines?: boolean;
/**
* Show horizontal lines - default: True.
*/
withHorizontalLines?: boolean;
/**
* Show vertical labels - default: True.
*/
withVerticalLabels?: boolean;
/**
* Show horizontal labels - default: True.
*/
withHorizontalLabels?: boolean;
/**
* Render charts from 0 not from the minimum value. - default: False.
*/
fromZero?: boolean;
/**
* Prepend text to horizontal labels -- default: ''.
*/
yAxisLabel?: string;
/**
* Append text to horizontal labels -- default: ''.
*/
yAxisSuffix?: string;
/**
* Prepend text to vertical labels -- default: ''.
*/
xAxisLabel?: string;
/**
* Configuration object for the chart, see example:
*
* ```javascript
* const chartConfig = {
* backgroundGradientFrom: "#1E2923",
* backgroundGradientFromOpacity: 0,
* backgroundGradientTo: "#08130D",
* backgroundGradientToOpacity: 0.5,
* color: (opacity = 1) => `rgba(26, 255, 146, ${opacity})`,
* labelColor: (opacity = 1) => `rgba(26, 255, 146, ${opacity})`,
* strokeWidth: 2, // optional, default 3
* barPercentage: 0.5
* };
* ```
*/
chartConfig?: AbstractChartConfig;
/**
* Divide axis quantity by the input number -- default: 1.
*/
yAxisInterval?: number;
/**
* Defines if chart is transparent
*/
transparent?: boolean;
/**
* This function takes a [whole bunch](https://github.com/indiespirit/react-native-chart-kit/blob/master/src/line-chart.js#L266)
* of stuff and can render extra elements,
* such as data point info or additional markup.
*/
decorator?: Function;
/**
* Callback that is called when a data point is clicked.
*/
onDataPointClick?: (data: {
index: number;
value: number;
dataset: Dataset;
x: number;
y: number;
getColor: (opacity: number) => string;
}) => void;
/**
* Style of the container view of the chart.
*/
style?: Partial<ViewStyle>;
/**
* Add this prop to make the line chart smooth and curvy.
*
* [Example](https://github.com/indiespirit/react-native-chart-kit#bezier-line-chart)
*/
bezier?: boolean;
/**
* Defines the dot color function that is used to calculate colors of dots in a line chart.
* Takes `(dataPoint, dataPointIndex)` as arguments.
*/
getDotColor?: (dataPoint: any, index: number) => string;
/**
* Renders additional content for dots in a line chart.
* Takes `({x, y, index})` as arguments.
*/
renderDotContent?: (params: {
x: number;
y: number;
index: number;
indexData: number;
}) => React.ReactNode;
/**
* Rotation angle of the horizontal labels - default 0 (degrees).
*/
horizontalLabelRotation?: number;
/**
* Rotation angle of the vertical labels - default 0 (degrees).
*/
verticalLabelRotation?: number;
/**
* Offset for Y axis labels.
*/
yLabelsOffset?: number;
/**
* Offset for X axis labels.
*/
xLabelsOffset?: number;
/**
* Array of indices of the data points you don't want to display.
*/
hidePointsAtIndex?: number[];
/**
* 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.
*/
formatYLabel?: (yValue: string) => string;
/**
* 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.
*/
formatXLabel?: (xValue: string) => string;
/**
* Provide props for a data point dot.
*/
getDotProps?: (dataPoint: any, index: number) => object;
/**
* The number of horizontal lines
*/
segments?: number;
}
declare type LineChartState = {
scrollableDotHorizontalOffset: Animated.Value;
};
declare class LineChart extends AbstractChart<LineChartProps, LineChartState> {
label: React.RefObject<TextInput>;
state: {
scrollableDotHorizontalOffset: Animated.Value;
};
getColor: (dataset: Dataset, opacity: number) => string;
getStrokeWidth: (dataset: Dataset) => number;
getDatas: (data: Dataset[]) => number[];
getPropsForDots: (x: any, i: number) => object;
renderDots: ({ data, width, height, paddingTop, paddingRight, onDataPointClick }: Pick<AbstractChartConfig, "height" | "paddingRight" | "paddingTop" | "width" | "data"> & {
onDataPointClick: LineChartProps["onDataPointClick"];
}) => React.ReactNode[];
renderScrollableDot: ({ data, width, height, paddingTop, paddingRight, scrollableDotHorizontalOffset, scrollableDotFill, scrollableDotStrokeColor, scrollableDotStrokeWidth, scrollableDotRadius, scrollableInfoViewStyle, scrollableInfoTextStyle, scrollableInfoTextDecorator, scrollableInfoSize, scrollableInfoOffset }: AbstractChartConfig & {
onDataPointClick: LineChartProps["onDataPointClick"];
scrollableDotHorizontalOffset: Animated.Value;
}) => any[];
renderShadow: ({ width, height, paddingRight, paddingTop, data, useColorFromDataset }: Pick<AbstractChartConfig, "height" | "paddingRight" | "paddingTop" | "width" | "data"> & {
useColorFromDataset: AbstractChartConfig["useShadowColorFromDataset"];
}) => JSX.Element[];
renderLine: ({ width, height, paddingRight, paddingTop, data, linejoinType }: Pick<AbstractChartConfig, "data" | "width" | "height" | "paddingRight" | "paddingTop" | "linejoinType">) => any[];
getXMaxValues: (data: Dataset[]) => number;
getBezierLinePoints: (dataset: Dataset, { width, height, paddingRight, paddingTop, data }: Pick<AbstractChartConfig, "width" | "height" | "paddingRight" | "paddingTop" | "data">) => string;
renderBezierLine: ({ data, width, height, paddingRight, paddingTop }: Pick<AbstractChartConfig, "data" | "width" | "height" | "paddingRight" | "paddingTop">) => JSX.Element[];
renderBezierShadow: ({ width, height, paddingRight, paddingTop, data, useColorFromDataset }: Pick<AbstractChartConfig, "height" | "paddingRight" | "paddingTop" | "width" | "data"> & {
useColorFromDataset: AbstractChartConfig["useShadowColorFromDataset"];
}) => JSX.Element[];
renderLegend: (width: any, legendOffset: any) => JSX.Element[];
render(): JSX.Element;
}
export default LineChart;
//# sourceMappingURL=LineChart.d.ts.map