Implementing a Linear Curve in a Line Chart

Showcase how to create a simple line chart with a linear curve type using TanStack React Charts, highlighting the direct path between data points.

import React from 'react';
import { Chart } from 'react-chartjs-2';
import { Line } from 'react-chartjs-2';

Import React and the necessary components from React Chartjs-2.

const data = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June'],
  datasets: [
    {
      label: 'Sales Over Time',
      data: [65, 59, 80, 81, 56, 55],
      fill: false,
      borderColor: 'rgb(75, 192, 192)',
      tension: 0 // This sets the curve type to linear
    }
  ]
};

Define the data object including labels and datasets. Setting tension to 0 makes the line straight between points.

const options = {
  scales: {
    yAxes: [
      {
        ticks: {
          beginAtZero: true
        }
      }
    ]
  }
};

Define chart options. Here setting the Y-axis to begin at zero.

const LineChartExample = () => (
  <div>
    <h2>Line Chart Example</h2>
    <Line data={data} options={options} />
  </div>
);

Create the LineChartExample component that renders the line chart using the previously defined data and options.

export default LineChartExample;

Exports the LineChartExample component for use in other parts of the application.