### Local Development Setup and Commands

Source: https://github.com/indiespirit/react-native-chart-kit/blob/master/contributing.md

Clone the repository, install dependencies using npm, and run development commands. Remember to adjust 'main' and '_main' in package.json for npm and Expo compatibility, and revert before committing.

```sh
npm start # And get your Expo app ready on your phone
npm run build # Verify the package build
```

--------------------------------

### Install React Native Chart Kit and Dependencies

Source: https://context7.com/indiespirit/react-native-chart-kit/llms.txt

Install the library and its peer dependency react-native-svg using yarn.

```bash
yarn add react-native-chart-kit
yarn add react-native-svg   # peer dependency
```

--------------------------------

### Basic Line Chart Example

Source: https://github.com/indiespirit/react-native-chart-kit/blob/master/README.md

A simple example demonstrating how to render a Bezier line chart. Customize chart appearance using the chartConfig prop. Ensure Dimensions is imported from 'react-native'.

```jsx
<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>
```

--------------------------------

### Contribution Graph Component

Source: https://github.com/indiespirit/react-native-chart-kit/blob/master/README.md

Example of rendering a ContributionGraph component with specified data and configuration. Requires screenWidth and chartConfig to be defined.

```jsx
<ContributionGraph
  values={commitsData}
  endDate={new Date("2017-04-01")}
  numDays={105}
  width={screenWidth}
  height={220}
  chartConfig={chartConfig}
/>
```

--------------------------------

### Bezier Line Chart Example

Source: https://github.com/indiespirit/react-native-chart-kit/blob/master/README.md

Use this component to render a smooth, curvy line chart. Ensure 'bezier' prop is set to true for the curved effect.

```jsx
<LineChart
  data={data}
  width={screenWidth}
  height={256}
  verticalLabelRotation={30}
  chartConfig={chartConfig}
  bezier
/>
```

--------------------------------

### Import Chart Components

Source: https://github.com/indiespirit/react-native-chart-kit/blob/master/README.md

Import necessary chart components from the react-native-chart-kit library. Ensure react-native-svg is installed as a peer dependency.

```javascript
import {
  LineChart,
  BarChart,
  PieChart,
  ProgressChart,
  ContributionGraph,
  StackedBarChart
} from "react-native-chart-kit";
```

--------------------------------

### Get Screen Width for Responsive Charts

Source: https://github.com/indiespirit/react-native-chart-kit/blob/master/README.md

Import and use the `Dimensions` API from React Native to dynamically get the screen width. This value can then be used to set the width of your charts, ensuring they adapt to different screen sizes.

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

--------------------------------

### Development Build Commands

Source: https://github.com/indiespirit/react-native-chart-kit/blob/master/README.md

Commands to manage TypeScript to JavaScript compilation for development. Use 'npm run dev' for watch mode.

```bash
npm run build
```

```bash
npm run dev
```

--------------------------------

### Basic LineChart with Customizations

Source: https://context7.com/indiespirit/react-native-chart-kit/llms.txt

Renders a line chart with multiple datasets, custom colors, stroke widths, and optional dots. It supports features like shadows, legends, and click callbacks for data points. Ensure all necessary imports are included.

```jsx
import React, { useState } from "react";
import { Dimensions, Text, View } from "react-native";
import { LineChart } from "react-native-chart-kit";

const screenWidth = Dimensions.get("window").width;

const data = {
  labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
  datasets: [
    {
      data: [20, 45, 28, 80, 99, 43],
      color: (opacity = 1) => `rgba(134, 65, 244, ${opacity})`,
      strokeWidth: 2,
      strokeDashArray: [],   // solid line
    },
    {
      data: [60, 30, 55, 20, 70, 50],
      color: (opacity = 1) => `rgba(255, 100, 100, ${opacity})`,
      strokeWidth: 2,
      withDots: false,       // hide dots for this dataset only
    },
  ],
  legend: ["Revenue", "Expenses"],
};

const chartConfig = {
  backgroundGradientFrom: "#fb8c00",
  backgroundGradientTo: "#ffa726",
  color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
  labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
  propsForDots: { r: "6", strokeWidth: "2", stroke: "#ffa726" },
  decimalPlaces: 0,
};

export default function MyLineChart() {
  const [tooltip, setTooltip] = useState(null);

  return (
    <View>
      <LineChart
        data={data}
        width={screenWidth}
        height={256}
        // Axis labels
        yAxisLabel="$"
        yAxisSuffix="k"
        yAxisInterval={1}        // show every Y line
        // Visual toggles
        bezier                   // smooth curved line
        withDots={true}
        withShadow={true}
        withInnerLines={true}
        withOuterLines={true}
        withVerticalLines={true}
        withHorizontalLines={true}
        withVerticalLabels={true}
        withHorizontalLabels={true}
        fromZero={false}
        transparent={false}
        // Label rotation
        horizontalLabelRotation={0}
        verticalLabelRotation={30}
        // Custom label formatters
        formatYLabel={(y) => `${y}K`}
        formatXLabel={(x) => x.slice(0, 3)}
        // Hide specific dots
        hidePointsAtIndex={[]}
        // Segments (number of Y-axis divisions)
        segments={5}
        chartConfig={chartConfig}
        style={{ borderRadius: 16, marginVertical: 8 }}
        // Click callback
        onDataPointClick={({ value, dataset, x, y, index, getColor }) => {
          setTooltip({ value, index, color: getColor(1) });
        }}
        // Decorator — render extra SVG on top
        decorator={() => (
          tooltip
            ? <Text style={{ position: "absolute", color: "white" }}>
                {tooltip.value}
              </Text>
            : null
        )}
        // Render custom content next to each dot
        renderDotContent={({ x, y, index, indexData }) => (
          index === 0
            ? <Text key={index} style={{ position: "absolute", left: x - 8, top: y - 20, fontSize: 9, color: "white" }}>
                {indexData}
              </Text>
            : null
        )}
      />
      {tooltip && <Text>Selected: ${tooltip.value}k at index {tooltip.index}</Text>}
    </View>
  );
}
```

--------------------------------

### Line Chart Configuration

Source: https://github.com/indiespirit/react-native-chart-kit/blob/master/README.md

Props available for customizing the Line Chart component.

```APIDOC
## Line Chart Configuration

This section details the props available for the Line Chart component.

### Props

- **xAxisLabel** (string): Prepend text to vertical labels. Default: ''
- **yAxisInterval** (string): Display y axis line every {x} input. Default: 1
- **chartConfig** (Object): Configuration object for the chart. See example config object.
- **decorator** (Function): Renders extra elements like data point info or additional markup. Takes a comprehensive set of data.
- **onDataPointClick** (Function): Callback that takes `{value, dataset, getColor}` when a data point is clicked.
- **horizontalLabelRotation** (number): Rotation angle of the horizontal labels in degrees. Default: 0
- **verticalLabelRotation** (number): Rotation angle of the vertical labels in degrees. Default: 0
- **getDotColor** (function => string): Defines the dot color function. Takes `(dataPoint, dataPointIndex)` as arguments.
- **renderDotContent** (Function): Renders additional content for the dot. Takes `({x, y, index, indexData})` as arguments.
- **yLabelsOffset** (number): Offset for Y axis labels.
- **xLabelsOffset** (number): Offset for X axis labels.
- **hidePointsAtIndex** (number[]): Indices of the data points to hide.
- **formatYLabel** (Function): Changes the format of the display value of the Y label. Takes the Y value and returns a string.
- **formatXLabel** (Function): Changes the format of the display value of the X label. Takes the X value and returns a string.
- **getDotProps** ((value, index) => props): Alternative to `chartConfig.propsForDots` for defining dot properties.
- **segments** (number): The amount of horizontal lines to display. Default: 4
```

--------------------------------

### Abstract Chart - Render Definitions

Source: https://github.com/indiespirit/react-native-chart-kit/blob/master/README.md

Helper method to render gradient definitions for abstract charts. Requires chart dimensions and gradient colors/opacities.

```javascript
{
  // 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,
}
```

--------------------------------

### Dataset Interface Configuration

Source: https://context7.com/indiespirit/react-native-chart-kit/llms.txt

Use this interface to configure individual data series for charts. Ensure 'data' is an array of numbers. Optional properties like 'color', 'colors', 'strokeWidth', 'withDots', 'withScrollableDot', 'strokeDashArray', 'strokeDashOffset', and 'key' allow for detailed customization of each series' appearance and behavior.

```typescript
import { Dataset } from "react-native-chart-kit/dist/HelperTypes";

const dataset: Dataset = {
  data: [20, 45, 28, 80, 99, 43],  // required: numeric Y values

  // Per-dataset line/bar color function
  color: (opacity = 1) => `rgba(134, 65, 244, ${opacity})`,

  // Per-point color functions array (BarChart withCustomBarColorFromData)
  colors: [
    (opacity = 1) => `rgba(255, 0, 0, ${opacity})`,
    (opacity = 1) => `rgba(0, 255, 0, ${opacity})`,
  ],

  strokeWidth: 2,           // line stroke width (LineChart)
  withDots: true,           // show dots on this line (LineChart)
  withScrollableDot: true,  // scrollable dot on this line (LineChart)

  // Dashed line pattern: [dash length, gap length]
  strokeDashArray: [5, 3],
  strokeDashOffset: 0,

  key: "revenue-2024",      // optional stable key for React reconciliation
};
```

--------------------------------

### Render a Pie Chart with Data and Configuration

Source: https://context7.com/indiespirit/react-native-chart-kit/llms.txt

Use this component to display data as a pie or donut chart. Configure labels, values, and appearance using the provided props. Ensure data is in the correct format with a numeric accessor.

```jsx
import React from "react";
import { Dimensions, View } from "react-native";
import { PieChart } from "react-native-chart-kit";

const screenWidth = Dimensions.get("window").width;

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: "#ff6348",
    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,
  },
];

export default function MyPieChart() {
  return (
    <PieChart
      data={data}
      width={screenWidth}
      height={220}
      accessor="population"          // key on each data item to read numeric value
      backgroundColor="transparent"  // "transparent" or a color string
      paddingLeft="15"
      center={[10, 0]}               // [x, y] offset of the pie center
      absolute={false}               // false = percentages, true = raw values
      hasLegend={true}               // show/hide the side legend
      avoidFalseZero={true}          // show "<1%" instead of "0%" for tiny slices
      chartConfig={{
        color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
      }}
      style={{ borderRadius: 16 }}
    />
  );
}
```

--------------------------------

### Abstract Chart - Render Horizontal Lines

Source: https://github.com/indiespirit/react-native-chart-kit/blob/master/README.md

Helper method to render horizontal lines for abstract charts. Requires chart dimensions and the number of lines to draw.

```javascript
{
  //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
}
```

--------------------------------

### Render Line Chart Component

Source: https://github.com/indiespirit/react-native-chart-kit/blob/master/README.md

Use the LineChart component by passing the defined data, screen width, height, and chart configuration. Ensure 'screenWidth' and 'chartConfig' are defined elsewhere in your project.

```jsx
<LineChart
  data={data}
  width={screenWidth}
  height={220}
  chartConfig={chartConfig}
/>
```

--------------------------------

### Abstract Chart - Render Vertical Labels

Source: https://github.com/indiespirit/react-native-chart-kit/blob/master/README.md

Helper method to render vertical lines and labels for abstract charts. Requires chart data and dimensions.

```javascript
{
  // 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
}
```

--------------------------------

### Bar Chart Implementation

Source: https://github.com/indiespirit/react-native-chart-kit/blob/master/README.md

Displays a bar chart with customizable labels, axis, and visual elements. Configure rotation for labels and whether to show values on top of bars.

```jsx
<BarChart
  style={graphStyle}
  data={data}
  width={screenWidth}
  height={220}
  yAxisLabel="$"
  chartConfig={chartConfig}
  verticalLabelRotation={30}
/>
```

--------------------------------

### Bezier Line Chart

Source: https://github.com/indiespirit/react-native-chart-kit/blob/master/README.md

Renders a smooth, curvy line chart. Use the 'bezier' prop to enable this effect.

```APIDOC
## Bezier Line Chart

### Description
Use this component to render a line chart with smooth, curved lines.

### Props
- **bezier** (boolean) - Add this prop to make the line chart smooth and curvy.
```

--------------------------------

### Import Chart Components

Source: https://context7.com/indiespirit/react-native-chart-kit/llms.txt

Import the necessary chart components from the react-native-chart-kit library.

```javascript
import {
  LineChart,
  BarChart,
  PieChart,
  ProgressChart,
  ContributionGraph,
  StackedBarChart,
} from "react-native-chart-kit";
```

--------------------------------

### Define Branch Name Format

Source: https://github.com/indiespirit/react-native-chart-kit/blob/master/contributing.md

Use lowercase kebab-case for branch names, following the pattern <type>/<short-summary>. Specific types are provided for different contribution categories.

```sh
git clone git@github.com:indiespirit/react-native-chart-kit.git
cd react-native-chart-kit
npm install --legacy-peer-deps
```

--------------------------------

### Create a Stacked Bar Chart with Legend

Source: https://context7.com/indiespirit/react-native-chart-kit/llms.txt

Renders multi-segment stacked bars, supporting optional percentage mode and a built-in legend. The `percentile` prop can be set to true for 100%-stacked bars.

```jsx
import React from "react";
import { Dimensions, View } from "react-native";
import { StackedBarChart } from "react-native-chart-kit";

const screenWidth = Dimensions.get("window").width;

const data = {
  labels: ["Q1", "Q2", "Q3", "Q4"],
  legend: ["Product A", "Product B", "Product C"],
  data: [
    [60, 60, 60],   // Q1
    [30, 30, 60],   // Q2
    [50, 40, 30],   // Q3
    [20, 80, 40],   // Q4
  ],
  barColors: ["#dfe4ea", "#ced6e0", "#a4b0be"],
};

export default function MyStackedBarChart() {
  return (
    <StackedBarChart
      data={data}
      width={screenWidth}
      height={220}
      hideLegend={false}       // show legend panel
      withVerticalLabels={true}
      withHorizontalLabels={true}
      segments={4}
      percentile={false}       // set true for 100%-stacked bars
      verticalLabelsHeightPercentage={0.75}
      formatYLabel={(yLabel) => `${yLabel} units`}
      chartConfig={{
        backgroundGradientFrom: "#2d3436",
        backgroundGradientTo: "#636e72",
        color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
        barRadius: 4,
        decimalPlaces: 0,
      }}
      style={{ borderRadius: 16 }}
    />
  );
}
```

--------------------------------

### Create a Vertical Bar Chart with Custom Colors

Source: https://context7.com/indiespirit/react-native-chart-kit/llms.txt

Displays a vertical bar chart with options for custom per-bar colors, value labels, and other visual configurations. Ensure `withCustomBarColorFromData` is set to true to use the `colors` array in the dataset.

```jsx
import React from "react";
import { Dimensions, View } from "react-native";
import { BarChart } from "react-native-chart-kit";

const screenWidth = Dimensions.get("window").width;

const data = {
  labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
  datasets: [
    {
      data: [20, 45, 28, 80, 99, 43],
      // Per-bar color functions (requires withCustomBarColorFromData)
      colors: [
        (opacity = 1) => `rgba(255, 0, 0, ${opacity})`,
        (opacity = 1) => `rgba(0, 255, 0, ${opacity})`,
        (opacity = 1) => `rgba(0, 0, 255, ${opacity})`,
        (opacity = 1) => `rgba(255, 165, 0, ${opacity})`,
        (opacity = 1) => `rgba(128, 0, 128, ${opacity})`,
        (opacity = 1) => `rgba(0, 128, 128, ${opacity})`,
      ],
    },
  ],
};

export default function MyBarChart() {
  return (
    <BarChart
      data={data}
      width={screenWidth}
      height={220}
      yAxisLabel="$"
      yAxisSuffix="k"
      fromZero={true}
      withInnerLines={true}
      withVerticalLabels={true}
      withHorizontalLabels={true}
      horizontalLabelRotation={0}
      verticalLabelRotation={30}
      showBarTops={true}              // thin line on top of each bar
      showValuesOnTopOfBars={true}    // render numeric value above each bar
      withCustomBarColorFromData={true} // use dataset.colors array
      flatColor={false}               // gradient vs flat bar fill
      segments={4}
      chartConfig={{
        backgroundGradientFrom: "#1cc910",
        backgroundGradientTo: "#afe136",
        color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
        barRadius: 6,
        decimalPlaces: 0,
        formatTopBarValue: (value) => `$${value}`,
      }}
      style={{ borderRadius: 16 }}
    />
  );
}
```

--------------------------------

### Render GitHub-style Contribution Graph

Source: https://context7.com/indiespirit/react-native-chart-kit/llms.txt

Use ContributionGraph to display a heatmap of activity over time. Configure day square size, gutters, month labels, and click callbacks.

```jsx
import React from "react";
import { Dimensions, View, Alert } from "react-native";
import { ContributionGraph } from "react-native-chart-kit";

const screenWidth = Dimensions.get("window").width;

const commitsData = [
  { date: "2024-01-02", count: 1 },
  { date: "2024-01-03", count: 2 },
  { date: "2024-01-04", count: 3 },
  { date: "2024-01-05", count: 4 },
  { date: "2024-01-30", count: 2 },
  { date: "2024-02-14", count: 7 },
  { date: "2024-03-01", count: 2 },
  { date: "2024-03-15", count: 5 },
];

export default function MyContributionGraph() {
  return (
    <ContributionGraph
      values={commitsData}
      endDate={new Date("2024-04-01")}
      numDays={105}              // total days to display
      width={screenWidth}
      height={220}
      squareSize={20}            // size of each day square (default: 20)
      gutterSize={1}             // space between squares (default: 1)
      horizontal={true}          // horizontal (weeks as columns) layout
      showMonthLabels={true}
      showOutOfRangeDays={false} // fill squares outside numDays range
      accessor="count"           // key on each value object
      // Custom month label (month index 0–11)
      getMonthLabel={(monthIndex) =>
        ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"][monthIndex]
      }
      // Day press callback
      onDayPress={({ date, count }) =>
        Alert.alert(`${date}: ${count} commits`)
      }
      // Tooltip SVG props per value
      tooltipDataAttrs={(value) => ({
        opacity: value?.count > 5 ? 1 : 0.5,
      })}
      chartConfig={{
        backgroundGradientFrom: "#ffffff",
        backgroundGradientTo: "#ffffff",
        color: (opacity = 1) => `rgba(50, 205, 50, ${opacity})`,
        labelColor: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
        style: { borderRadius: 16 },
      }}
      style={{ borderRadius: 16 }}
    />
  );
}
```

--------------------------------

### Progress Ring Chart Implementation

Source: https://github.com/indiespirit/react-native-chart-kit/blob/master/README.md

Renders a progress ring chart. Customize stroke width, radius, and legend visibility.

```jsx
<ProgressChart
  data={data}
  width={screenWidth}
  height={220}
  strokeWidth={16}
  radius={32}
  chartConfig={chartConfig}
  hideLegend={false}
/>
```

--------------------------------

### Bar Chart

Source: https://github.com/indiespirit/react-native-chart-kit/blob/master/README.md

Renders a bar chart with customizable labels and appearance.

```APIDOC
## Bar Chart

### Description
Displays data using a bar chart. Supports various customization options for labels and appearance.

### Props
- **data** (Object) - Data for the chart. Should contain 'labels' and 'datasets'.
- **width** (Number) - Width of the chart.
- **height** (Number) - Height of the chart.
- **withVerticalLabels** (boolean) - Show vertical labels. Defaults to True.
- **withHorizontalLabels** (boolean) - Show horizontal labels. Defaults to True.
- **fromZero** (boolean) - Render charts from 0. Defaults to False.
- **withInnerLines** (boolean) - Show inner dashed lines. Defaults to True.
- **yAxisLabel** (string) - Prepend text to horizontal labels. Defaults to ''.
- **yAxisSuffix** (string) - Append text to horizontal labels. Defaults to ''.
- **chartConfig** (Object) - Configuration object for the chart.
- **horizontalLabelRotation** (number) - Rotation angle of the horizontal labels in degrees. Defaults to 0.
- **verticalLabelRotation** (number) - Rotation angle of the vertical labels in degrees. Defaults to 0.
- **showBarTops** (boolean) - Show the top of the bars.
- **showValuesOnTopOfBars** (boolean) - Show the value above each bar.
```

--------------------------------

### Progress Ring

Source: https://github.com/indiespirit/react-native-chart-kit/blob/master/README.md

Displays progress in a ring format. Each value in the data array represents a goal ring.

```APIDOC
## Progress Ring

### Description
Displays progress using a ring chart. Each data point forms a segment of the ring.

### Props
- **data** (Object) - Data for the chart. Should contain 'labels' (optional) and 'data' arrays.
- **width** (Number) - Width of the chart.
- **height** (Number) - Height of the chart.
- **strokeWidth** (Number) - Width of the chart's stroke. Defaults to 16.
- **radius** (Number) - Inner radius of the chart. Defaults to 32.
- **chartConfig** (Object) - Configuration object for the chart.
- **hideLegend** (Boolean) - Whether to hide the chart legend. Defaults to false.
```

--------------------------------

### Create a Progress Chart with Custom Colors and Labels

Source: https://context7.com/indiespirit/react-native-chart-kit/llms.txt

Use this component for concentric ring progress indicators. It accepts data as an array of values or an object with explicit labels, colors, and data. Ensure data values are between 0 and 1.

```jsx
import React from "react";
import { Dimensions, View } from "react-native";
import { ProgressChart } from "react-native-chart-kit";

const screenWidth = Dimensions.get("window").width;

// Object form: explicit labels, colors and data
const data = {
  labels: ["Swim", "Bike", "Run"],
  colors: ["#ff6b6b", "#feca57", "#48dbfb"],  // requires withCustomBarColorFromData
  data: [0.4, 0.6, 0.8],                       // values between 0 and 1
};

// Simple array form is also accepted:
// const data = [0.4, 0.6, 0.8];

export default function MyProgressChart() {
  return (
    <ProgressChart
      data={data}
      width={screenWidth}
      height={220}
      strokeWidth={16}     // ring thickness
      radius={32}          // innermost ring radius
      hideLegend={false}   // show percentage labels
      withCustomBarColorFromData={true}  // use data.colors array
      chartConfig={{
        backgroundGradientFrom: "#1E2923",
        backgroundGradientTo: "#08130D",
        color: (opacity = 1) => `rgba(26, 255, 146, ${opacity})`,
        labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
      }}
      style={{ borderRadius: 16 }}
    />
  );
}
```

--------------------------------

### Bar Chart Data Structure

Source: https://github.com/indiespirit/react-native-chart-kit/blob/master/README.md

Structure the data for a Bar Chart, including labels for the x-axis and datasets for the bars.

```js
const data = {
  labels: ["January", "February", "March", "April", "May", "June"],
  datasets: [
    {
      data: [20, 45, 28, 80, 99, 43]
    }
  ]
};
```

--------------------------------

### Render Pie Chart Component

Source: https://github.com/indiespirit/react-native-chart-kit/blob/master/README.md

Renders a Pie chart with customizable options. Key properties include 'data', 'width', 'height', 'chartConfig', 'accessor' for data values, and styling options like 'backgroundColor', 'paddingLeft', 'center', and 'absolute' for displaying values.

```jsx
<PieChart
  data={data}
  width={screenWidth}
  height={220}
  chartConfig={chartConfig}
  accessor={\"population\"}
  backgroundColor={\"transparent\"}
  paddingLeft={\"15\"}
  center={[10, 50]}
  absolute
/>
```

--------------------------------

### Define Chart Style Object

Source: https://github.com/indiespirit/react-native-chart-kit/blob/master/README.md

Use this object to customize the appearance of your charts, including gradients, colors, stroke width, and bar percentages. Optional properties like `useShadowColorFromDataset` can also be configured here.

```javascript
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
};
```

--------------------------------

### Render StackedBar Chart Component

Source: https://github.com/indiespirit/react-native-chart-kit/blob/master/README.md

Renders a StackedBar chart using the provided data and chart configuration. Adjust width, height, and style for responsive design. Requires 'graphStyle', 'screenWidth', and 'chartConfig' to be defined.

```jsx
<StackedBarChart
  style={graphStyle}
  data={data}
  width={screenWidth}
  height={220}
  chartConfig={chartConfig}
/>
```

--------------------------------

### Pie Chart Data Configuration

Source: https://github.com/indiespirit/react-native-chart-kit/blob/master/README.md

Specifies the data format for a Pie chart, where each object represents a segment with properties like name, population (or value), color, and legend styling. The 'accessor' property in the chart component should match the value key (e.g., 'population').

```js
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
  }
];
```

--------------------------------

### Progress Ring Chart Data Structure

Source: https://github.com/indiespirit/react-native-chart-kit/blob/master/README.md

Define the data structure for the Progress Ring chart. Each value in the 'data' array represents a goal ring.

```js
// each value represents a goal ring in Progress chart
const data = {
  labels: ["Swim", "Bike", "Run"], // optional
  data: [0.4, 0.6, 0.8]
};
```

--------------------------------

### LineChart Component

Source: https://github.com/indiespirit/react-native-chart-kit/blob/master/README.md

The LineChart component renders a line chart. It accepts data and configuration options to customize its appearance and behavior.

```APIDOC
## LineChart

### Description

Renders a line chart component.

### Props

#### `data` (Object) - Required

The data object for the chart. It should contain `labels`, `datasets`, and optionally `legend`.

```javascript
{
  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
}
```

#### `width` (Number) - Required

The width of the chart. It is recommended to use the `Dimensions` library for responsive sizing.

#### `height` (Number) - Required

The height of the chart.

#### `withDots` (Boolean) - Optional (default: `true`)

Determines whether to display dots on the line.

#### `withShadow` (Boolean) - Optional (default: `true`)

Determines whether to display a shadow for the line.

#### `withInnerLines` (Boolean) - Optional (default: `true`)

Determines whether to display inner dashed lines.

#### `withOuterLines` (Boolean) - Optional (default: `true`)

Determines whether to display outer dashed lines.

#### `withVerticalLines` (Boolean) - Optional (default: `true`)

Determines whether to display vertical lines.

#### `withHorizontalLines` (Boolean) - Optional (default: `true`)

Determines whether to display horizontal lines.

#### `withVerticalLabels` (Boolean) - Optional (default: `true`)

Determines whether to display vertical labels.

#### `withHorizontalLabels` (Boolean) - Optional (default: `true`)

Determines whether to display horizontal labels.

#### `fromZero` (Boolean) - Optional (default: `false`)

If `true`, the chart will render starting from zero instead of the minimum data value.

#### `yAxisLabel` (String) - Optional (default: `''`)

Text to prepend to horizontal labels.

#### `yAxisSuffix` (String) - Optional (default: `''`)

Text to append to horizontal labels.

### Usage Example

```jsx
<LineChart
  data={data}
  width={screenWidth} // from Dimensions
  height={220}
  chartConfig={chartConfig}
/>
```
```

--------------------------------

### StackedBar Chart Data Configuration

Source: https://github.com/indiespirit/react-native-chart-kit/blob/master/README.md

Defines the data structure for a StackedBar chart, including labels, legend, data points, and bar colors. Ensure data format matches this structure for correct rendering.

```js
const data = {
  labels: ["Test1", "Test2"],
  legend: ["L1", "L2", "L3"],
  data: [
    [60, 60, 60],
    [30, 30, 60]
  ],
  barColors: ["#dfe4ea", "#ced6e0", "#a4b0be"]
};
```

--------------------------------

### Configure Chart Styles with chartConfig

Source: https://context7.com/indiespirit/react-native-chart-kit/llms.txt

Define a shared chartConfig object to control visual aspects like gradients, colors, stroke width, and label formatting for all charts. This configuration is passed to each chart component.

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

const chartConfig = {
  // Background gradient (diagonal, bottom-left → top-right)
  backgroundGradientFrom: "#1E2923",
  backgroundGradientFromOpacity: 1,
  backgroundGradientTo: "#08130D",
  backgroundGradientToOpacity: 0.5,

  // Base color function — used for lines, bars, dots, labels
  color: (opacity = 1) => `rgba(26, 255, 146, ${opacity})`,

  // Optional separate label color
  labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,

  strokeWidth: 2,         // default: 3
  barPercentage: 0.5,     // bar width relative to slot (0–1)
  barRadius: 4,           // rounded bar corners
  decimalPlaces: 1,       // Y-axis label decimal places (default: 2)

  // Shadow/fill gradient under line charts
  fillShadowGradientFrom: "#00ff88",
  fillShadowGradientFromOpacity: 0.4,
  fillShadowGradientTo: "#00ff88",
  fillShadowGradientToOpacity: 0,
  useShadowColorFromDataset: true, // each dataset uses its own color for shadow

  // Override SVG props on specific elements
  propsForDots: { r: "6", strokeWidth: "2", stroke: "#ffa726" },
  propsForBackgroundLines: { strokeDasharray: "4, 8", strokeWidth: 1 },
  propsForLabels: { fontSize: 11, fontFamily: "monospace" },
  propsForVerticalLabels: { fill: "rgba(255,255,255,0.6)" },
  propsForHorizontalLabels: { fill: "rgba(255,255,255,0.6)" },

  // Custom top-bar value formatter for BarChart
  formatTopBarValue: (value) => `$${value}`,
};

```

--------------------------------

### Extend AbstractChart for Custom Bar Chart

Source: https://context7.com/indiespirit/react-native-chart-kit/llms.txt

Create custom chart types by extending AbstractChart. Utilize helper methods for rendering SVG elements, scales, and labels.

```tsx
import React from "react";
import { View } from "react-native";
import { G, Rect, Svg } from "react-native-svg";
import AbstractChart, { AbstractChartConfig, AbstractChartProps } from "react-native-chart-kit/dist/AbstractChart";

interface CustomChartProps extends AbstractChartProps {
  data: number[];
  width: number;
  height: number;
  chartConfig: AbstractChartConfig;
}

class CustomBarChart extends AbstractChart<CustomChartProps, {}> {
  render() {
    const { data, width, height, chartConfig } = this.props;
    const paddingTop = 16;
    const paddingRight = 64;

    return (
      <View>
        <Svg width={width} height={height}>
          {/* Render gradient background definitions */}
          {this.renderDefs({ width, height, ...chartConfig })}

          {/* Background rect using the gradient */}
          <Rect width="100%" height={height} fill={this.getGradientUrl("backgroundGradient")} />

          {/* Horizontal grid lines */}
          <G>
            {this.renderHorizontalLines({ width, height, count: 4, paddingTop, paddingRight })}
          </G>

          {/* Y-axis labels — uses calcScaler internally */}
          <G>
            {this.renderHorizontalLabels({
              width, height, count: 4,
              data,
              paddingTop,
              paddingRight,
              decimalPlaces: 0,
              formatYLabel: (y) => `${y}%`,
            })}
          </G>

          {/* Custom bars using scale helpers */}
          <G>
            {data.map((value, i) => {
              const barHeight = this.calcHeight(value, data, height);
              const baseHeight = this.calcBaseHeight(data, height);
              const barWidth = 30;
              const x = paddingRight + (i * (width - paddingRight)) / data.length + barWidth / 2;
              const y = ((baseHeight - barHeight) / 4) * 3 + paddingTop;
              return (
                <Rect
                  key={i}
                  x={x} y={y}
                  width={barWidth}
                  height={(Math.abs(barHeight) / 4) * 3}
                  fill={chartConfig.color(0.9)}
                  rx={4}
                />
              );
            })}
          </G>
        </Svg>
      </View>
    );
  }
}

// Usage:
// <CustomBarChart
//   data={[20, 45, 28, 80, 99, 43]}
//   width={350} height={220}
//   fromZero
//   chartConfig={{
//     backgroundGradientFrom: "#1E2923",
//     backgroundGradientTo: "#08130D",
//     color: (opacity = 1) => `rgba(26, 255, 146, ${opacity})`,
//   }}
// />
```

--------------------------------

### Define Line Chart Data

Source: https://github.com/indiespirit/react-native-chart-kit/blob/master/README.md

Structure your data with labels, datasets (including color and stroke width), and an optional legend. This format is required for the LineChart component.

```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"] // optional
};
```

--------------------------------

### LineChart with Scrollable Dot Mode

Source: https://context7.com/indiespirit/react-native-chart-kit/llms.txt

Enables a scrollable dot that follows the user's finger, displaying interpolated values in a floating label. Customize the dot's appearance and the info box style using chartConfig properties.

```jsx
import React from "react";
import { Dimensions, View } from "react-native";
import { LineChart } from "react-native-chart-kit";

const screenWidth = Dimensions.get("window").width;

const data = {
  labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
  datasets: [{ data: [20, 45, 28, 80, 99, 43] }],
};

export default function ScrollableLineChart() {
  return (
    <LineChart
      data={data}
      width={screenWidth}
      height={220}
      withScrollableDot={true}
      chartConfig={{
        backgroundGradientFrom: "#1E2923",
        backgroundGradientTo: "#08130D",
        color: (opacity = 1) => `rgba(26, 255, 146, ${opacity})`,
        // Scrollable dot appearance
        scrollableDotFill: "#fff",
        scrollableDotStrokeColor: "rgba(26, 255, 146, 1)",
        scrollableDotStrokeWidth: 3,
        scrollableDotRadius: 6,
        // Floating info box
        scrollableInfoViewStyle: {
          justifyContent: "center",
          alignContent: "center",
          backgroundColor: "rgba(26, 255, 146, 0.8)",
          borderRadius: 4,
        },
        scrollableInfoTextStyle: { color: "white", fontSize: 12, textAlign: "center" },
        scrollableInfoTextDecorator: (value) => `$${value}k`,
        scrollableInfoSize: { width: 60, height: 30 },
        scrollableInfoOffset: 10,
      }}
      style={{ borderRadius: 16 }}
    />
  );
}
```

--------------------------------

### Contribution Graph Data

Source: https://github.com/indiespirit/react-native-chart-kit/blob/master/README.md

Data structure for the ContributionGraph, representing daily commit counts. Ensure dates are in 'YYYY-MM-DD' format.

```javascript
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 }
];
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.