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;
  lineStyle?: 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',
    lineStyle: '--',
  },
  {
    label: 'Logarithmic',
    x: xLog,
    y: yLog,
    color: '#00ff00',
    lineStyle: ':',
  },
];

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

Line Styles

Matplotlib-style line patterns via the lineStyle prop. Supports named patterns (-, --, -., :) and custom arrays.

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

const x = Array.from({ length: 50 }, (_, i) => i / 5);
const y1 = x.map(x => Math.sin(x) * 2);
const y2 = x.map(x => Math.sin(x) * 2 + 0.5);
const y3 = x.map(x => Math.sin(x) * 2 + 1);
const y4 = x.map(x => Math.sin(x) * 2 + 1.5);

const series = [
  {
    label: 'Solid (-)',
    x,
    y: y1,
    lineStyle: '-',
  },
  {
    label: 'Dashed (--)',
    x,
    y: y2,
    lineStyle: '--',
  },
  {
    label: 'Dash-Dot (-.)',
    x,
    y: y3,
    lineStyle: '-.',
  },
  {
    label: 'Dotted (:)',
    x,
    y: y4,
    lineStyle: ':',
  },
];

export default function DashPatternsExample() {
  return (
    <LineChart
      series={series}
      title="Matplotlib Dash Patterns"
      xLabel="x"
      yLabel="y"
      grid
      legend
    />
  );
}

Available Line Styles

- or solid: Solid line (no dashes)
-- or dashed: Dashed line (8px dash, 4px gap)
-. or dashdot: Dash-dot pattern (8px dash, 4px gap, 2px dot, 4px gap)
: or dotted: Dotted line (2px dot, 4px gap)
Custom: Space-separated numbers (e.g., "10 5 2 5" for custom dash pattern)

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 (matplotlib-style)
Optional point markers on data points
Automatic bounds calculation with 5% padding
Legend support with line samples and dash pattern indicators
Export-ready at 325x220px (or custom dimensions)

← Back to all charts