V

Vuer-Viz

vuer-vizv1.2.14

Publication-Quality Visualizations

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, Margin } from '../../types';
import type { LegendLayout } from '../../components';

/** LineChart margin: left is optional and will be auto-computed from y-tick labels when omitted. */
export type LineChartMargin = Omit<Margin, 'left'> & { left?: number };

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 Omit<BaseChartProps, 'margin'> {
  /** Margin around the plot area. left is optional — omit to auto-compute from y-tick labels. */
  margin?: LineChartMargin;
  /** 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;
  /** Highlight the nearest series on hover, dimming all others. Default: false */
  highlightOnHover?: boolean;
  /**
   * Maximum pixel distance from the cursor to the nearest data point for
   * highlighting to activate. When the cursor is farther than this distance
   * from all series, no highlight is applied. Only effective when
   * highlightOnHover is true. Default: Infinity (always highlight nearest).
   */
  highlightThreshold?: number;
  onChange?: (event: ChartChangeEvent) => void;
  children?: React.ReactNode;
}

Trigonometric Functions

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

Trigonometric Functions00.20.40.60.8100.20.40.60.81
sin(x)
cos(x)
x (radians)y
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}
      width={700}
      height={300}
      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.

Exponential Growth00.20.40.60.8100.20.40.60.81
exp(x/2)
TimeValue
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}
      width={700}
      height={300}
      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).

Growth Patterns Comparison00.20.40.60.8100.20.40.60.81
Linear
Quadratic
Logarithmic
xf(x)
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}
      width={700}
      height={300}
      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.

Matplotlib Dash Patterns00.20.40.60.8100.20.40.60.81
Solid (-)
Dashed (--)
Dash-Dot (-.)
Dotted (:)
xy
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}
      width={700}
      height={300}
      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)

Highlight on Hover

Enable highlightOnHover to dim all other series when hovering, making it easier to distinguish individual lines in dense charts. Combine with SeriesTooltip to highlight the nearest series row with a color-tinted background.

Use highlightThreshold (pixels) to control how close the cursor must be to a line before highlighting activates. The default is Infinity (always highlight the nearest series).

Highlight on Hover00.20.40.60.8100.20.40.60.81
Alpha
Beta
Gamma
Delta
stepvalue
import { useState } from 'react';
import { LineChart, SeriesTooltip, VerticalMarker } from '@vuer-ai/vuer-viz';

const x = Array.from({ length: 60 }, (_, i) => i);
const series = [
  { label: 'Alpha',   x, y: x.map(i => Math.sin(i / 8) * 3 + 0) },
  { label: 'Beta',    x, y: x.map(i => Math.cos(i / 6) * 2 + 1) },
  { label: 'Gamma',   x, y: x.map(i => Math.sin(i / 10 + 1) * 2.5 - 1) },
  { label: 'Delta',   x, y: x.map(i => Math.cos(i / 9 + 2) * 1.5 + 2) },
];

export default function HighlightOnHoverExample() {
  const [cursorX, setCursorX] = useState<number | null>(null);

  return (
    <LineChart
      series={series}
      width={700}
      height={300}
      title="Highlight on Hover"
      xLabel="step"
      yLabel="value"
      grid
      legend
      highlightOnHover
      highlightThreshold={20}
      onChange={(e) => setCursorX(e.x)}
    >
      <VerticalMarker x={cursorX} />
      <SeriesTooltip x={cursorX} series={series} />
    </LineChart>
  );
}

Margins

LineChart computes the left margin automatically from the actual y-tick label widths, so you rarely need to set it manually. The other three sides use sensible defaults.

Default margin: { top: 40, right: 20, bottom: 50, left: auto }

// Override only what you need — left is still auto-computed
<LineChart
  series={series}
  margin={{ top: 28, right: 14, bottom: 35 }}
/>

// Full manual control — disables auto left margin
<LineChart
  series={series}
  margin={{ top: 28, right: 14, bottom: 35, left: 80 }}
/>
  • left is optional in LineChartMargin. Omit it and the chart measures the widest y-tick label to set the margin automatically — this handles formatter switches (e.g. decimal → exponential in fullscreen) without any manual tuning.
  • Explicit left disables auto-computation. Use this when a custom formatter produces labels whose width cannot be estimated from the tick values alone.

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
  • highlightOnHover to focus on a single series by dimming all others; highlightThreshold (px) to require the cursor to be within a set distance of the line before triggering
  • Export-ready at 325x220px (or custom dimensions)

← Back to all charts

Previous
Bar Chart
Next
Parallel Axis