Line Chart Examples

Publication-quality line charts following matplotlib styling conventions. All charts feature customizable series, grid lines, axes, and legends.

Type Interface

import type { BaseChartProps, ChartChangeEvent, Formatter } from '../../types';
import type { LegendLayout } from '../../components';

export interface LineData {
  x: number[];
  y: number[];
  high?: number[];
  low?: number[];
}

export interface LineSeries extends LineData {
  label: string;
  color?: string;
  lineWidth?: number;
  dashArray?: string;
  showPoints?: boolean;
  pointRadius?: number;
  fillColor?: string;
  fillOpacity?: number;
  showArea?: boolean;
}

// Deprecated: for backwards compatibility
export type LineDataPoint = LineData;

export interface LineChartProps extends BaseChartProps {
  /** Series data (can be provided via this prop or via TimeSeries children) */
  series?: LineSeries[];
  xLabel?: string;
  yLabel?: string;
  title?: string;
  grid?: boolean;
  gridColor?: string;
  legend?: boolean;
  /** Layout of the legend */
  layout?: LegendLayout;
  xMin?: number;
  xMax?: number;
  yMin?: number;
  yMax?: number;
  xTickCount?: number;
  yTickCount?: number;
  canvas?: boolean;
  xFormat?: Formatter;
  yFormat?: Formatter;
  onChange?: (event: ChartChangeEvent) => void;
  children?: React.ReactNode;
}

Trigonometric Functions

Classic sine and cosine waves demonstrating smooth curves and legend placement.

import { LineChart } from '@vuer-ai/vuer-viz';

const xSin = Array.from({ length: 50 }, (_, i) => (i / 50) * 2 * Math.PI);
const ySin = xSin.map(x => Math.sin(x));

const xCos = Array.from({ length: 50 }, (_, i) => (i / 50) * 2 * Math.PI);
const yCos = xCos.map(x => Math.cos(x));

const series = [
  {
    label: 'sin(x)',
    x: xSin,
    y: ySin,
    color: '#0000ff',
  },
  {
    label: 'cos(x)',
    x: xCos,
    y: yCos,
    color: '#ff0000',
  },
];

export default function TrigonometricExample() {
  return (
    <LineChart
      series={series}
      title="Trigonometric Functions"
      xLabel="x (radians)"
      yLabel="y"
      grid
      legend
    />
  );
}

Exponential Growth

Exponential function with data points shown. Demonstrates point markers and automatic y-axis scaling.

import { LineChart } from '@vuer-ai/vuer-viz';

const xValues = Array.from({ length: 30 }, (_, i) => i / 5);
const yValues = xValues.map(x => Math.exp(x / 2));

const series = [
  {
    label: 'exp(x/2)',
    x: xValues,
    y: yValues,
    color: '#00ff00',
    showPoints: true,
  },
];

export default function ExponentialExample() {
  return (
    <LineChart
      series={series}
      title="Exponential Growth"
      xLabel="Time"
      yLabel="Value"
      grid
      legend
    />
  );
}

Multiple Growth Patterns

Comparison of linear, quadratic, and logarithmic growth using different line styles (solid, dashed).

import { LineChart } from '@vuer-ai/vuer-viz';

const xLinear = Array.from({ length: 20 }, (_, i) => i);
const yLinear = xLinear.map(x => x * 2 + 10);

const xQuadratic = Array.from({ length: 20 }, (_, i) => i);
const yQuadratic = xQuadratic.map(x => x * x / 4 + 5);

const xLog = Array.from({ length: 20 }, (_, i) => i + 1);
const yLog = xLog.map(x => Math.log(x) * 10 + 15);

const series = [
  {
    label: 'Linear',
    x: xLinear,
    y: yLinear,
    color: '#0000ff',
  },
  {
    label: 'Quadratic',
    x: xQuadratic,
    y: yQuadratic,
    color: '#ff0000',
    dashArray: '5,5',
  },
  {
    label: 'Logarithmic',
    x: xLog,
    y: yLog,
    color: '#00ff00',
    dashArray: '2,2',
  },
];

export default function GrowthPatternsExample() {
  return (
    <LineChart
      series={series}
      title="Growth Patterns Comparison"
      xLabel="x"
      yLabel="f(x)"
      grid
      legend
    />
  );
}

Features

Matplotlib-style appearance with Times New Roman font
Configurable grid with dashed lines (#b0b0b0)
Major and minor tick marks on both axes
No top or right spines (minimal design)
Customizable line colors, widths, and dash patterns
Optional point markers on data points
Automatic bounds calculation with 5% padding
Legend support with line samples
Export-ready at 325x220px (or custom dimensions)

← Back to all charts