Documentation

LineChart Examples

Explore interactive LineChart examples showcasing different features and use cases. Hover over or touch the charts to interact with them.

Basic Charts

Simple Line Chart

The most basic line chart with minimal configuration showing a single data series.

<LineChart
  config={{
    data: chartData,
  }}
/>

With Hover Dot

Enable hover interactions with a visible dot at the data point.

<LineChart
  config={{
    data: chartData,
    hover: {
      enabled: true,
      showDot: true,
    },
  }}
/>

With Highlighted Line

Add a vertical highlight line that follows your touch or cursor position.

<LineChart
  config={{
    data: chartData,
    hover: {
      enabled: true,
      showDot: true,
      highlightLine: true,
    },
  }}
/>

With Axes

X and Y Axes

Add labeled axes to your chart for better readability.

<LineChart
  config={{
    data: chartData,
    xAxis: {
      enabled: true,
      isTimeData: true,
    },
    yAxis: {
      enabled: true,
    },
  }}
/>

With Grid Lines

Add grid lines for precise value reading.

<LineChart
  config={{
    data: chartData,
    xAxis: {
      enabled: true,
      isTimeData: true,
      showGridLines: true,
    },
    yAxis: {
      enabled: true,
      showGridLines: true,
    },
  }}
/>

Styled Charts

Custom Colors

Customize chart colors to match your brand.

<LineChart
  config={{
    data: chartData,
    hover: {
      enabled: true,
      showDot: true,
      highlightLine: true,
    },
    colors: {
      lineBase: "#9EB1FF",
      highlightColor: "#3E63DD",
      dotBase: "#0090FF",
    },
    xAxis: {
      enabled: true,
      isTimeData: true,
      showGridLines: true,
      color: "#3E63DD",
      gridLineColor: "#E0E7FF",
    },
    yAxis: {
      enabled: true,
      showGridLines: true,
      color: "#3E63DD",
      gridLineColor: "#E0E7FF",
    },
  }}
/>

Multiple Series

Multi-Line Chart

Display multiple data series on the same chart with different colors.

<LineChart
  config={{
    series: [
      {
        id: "series1",
        label: "Revenue",
        data: revenueData,
        colors: {
          highlightColor: "#3E63DD",
          lineBase: "#9EB1FF",
          dotBase: "#0090FF",
        },
      },
      {
        id: "series2",
        label: "Expenses",
        data: expensesData,
        colors: {
          highlightColor: "#E5484D",
          lineBase: "#FFBDBD",
          dotBase: "#E5484D",
        },
      },
    ],
    hover: {
      enabled: true,
      showDot: true,
      highlightLine: true,
    },
    xAxis: {
      enabled: true,
      isTimeData: true,
      showGridLines: true,
    },
    yAxis: {
      enabled: true,
      showGridLines: true,
    },
  }}
/>

Advanced Features

With Custom Tooltip

Create custom tooltip components that display formatted data.

<LineChart
  config={{
    data: chartData,
    hover: {
      enabled: true,
      showDot: true,
      tooltip: {
        renderContent: (dataPoint) => (
          <View style={styles.tooltip}>
            <Text>{new Date(dataPoint.x).toLocaleDateString()}</Text>
            <Text style={styles.value}>
              {dataPoint.y.toFixed(2)}
            </Text>
          </View>
        ),
        snapToPoint: true,
      },
    },
  }}
/>