LineChart
Line Chart shows how something changes over time or along a continuous scale. It connects data points with lines so people can quickly spot trends, peaks, dips, and patterns.
Installation
npm install --save @godaddy/antaresProps
seriesOptional<SeriesConfig<T>, "id">[]—Data series (id optional; stable id generated when omitted)
xTitle?string | undefined—X-axis title
xLabels?boolean | undefinedtrueShow X-axis labels.
xLabelsOrientation?XLabelsOrientation | undefined'auto'X-axis label orientation. 'auto' rotates labels to vertical when the container is too narrow; 'horizontal' keeps labels horizontal (chart may scroll); 'vertical' keeps labels vertical.
xTickMarks?boolean | undefined—Show X-axis tick marks.
xBaseline?boolean | undefined—Show X-axis baseline.
xGridlines?boolean | undefinedtrueShow vertical gridlines.
xTickFormat?((value: number | string | Date) => string) | undefined—Format X-axis tick labels
xType?LineChartScaleType | undefined'linear'How the X-axis maps values to position. Use 'linear' for numbers; 'time' for dates; 'band' for discrete categories; 'log', 'sqrt', or 'pow' for non-linear numeric axes.
xDomain?(string | number | Date)[] | undefined—The domain of the scale.
xPaddingOuter?number | undefined—The outer padding (spacing) at the ends of the range of band and point scales, as a fraction of the step size. This value must lie in the range [0,1]. Only applies when xType is 'band' (or 'point').
xNice?number | boolean | undefinedtrue for quantitative scales; false otherwiseExtending the domain so that it starts and ends on nice round values. This method typically modifies the scale's domain, and may only extend the bounds to the nearest round value. Nicing is useful if the domain is computed from data and may be irregular. For example, for a domain of [0.201479…, 0.996679…], a nice domain might be [0.2, 1.0]. For quantitative scales such as linear, nice can be either a boolean flag or a number. If nice is a number, it will represent a desired tick count. This allows greater control over the step size used to extend the bounds, guaranteeing that the returned ticks will exactly cover the domain.
xZero?boolean | undefinedfalseIf true, ensures that a zero baseline value is included in the scale domain. Note: Log, time, and utc scales do not support zero.
xNumTicks?number | undefined—The number of ticks wanted for the X-axis (note this is approximate).
xTickValues?(string | number | Date)[] | undefined—An array of values that determine the number and values of the ticks. Falls back to scale ticks or domain when not set. Overrides xNumTicks when set.
yTitle?string | undefined—Y-axis title
yLabels?boolean | undefinedtrueShow Y-axis labels.
yTickMarks?boolean | undefined—Show Y-axis tick marks.
yBaseline?boolean | undefined—Show Y-axis baseline.
yGridlines?boolean | undefined—Show horizontal gridlines.
yTickFormat?((value: number) => string) | undefined—Format Y-axis tick labels
yType?LineChartScaleType | undefined'linear'How the Y-axis maps values to position. Use 'linear' for numbers; 'time' for dates; 'band' for discrete categories; 'log', 'sqrt', or 'pow' for non-linear numeric axes.
yDomain?(string | number | Date)[] | undefined—The domain of the scale.
yPaddingOuter?number | undefined—The outer padding (spacing) at the ends of the range of band and point scales, as a fraction of the step size. This value must lie in the range [0,1]. Only applies when yType is 'band' (or 'point').
yNice?number | boolean | undefinedtrue for quantitative scales; false otherwiseExtending the domain so that it starts and ends on nice round values. This method typically modifies the scale's domain, and may only extend the bounds to the nearest round value. Nicing is useful if the domain is computed from data and may be irregular. For example, for a domain of [0.201479…, 0.996679…], a nice domain might be [0.2, 1.0]. For quantitative scales such as linear, nice can be either a boolean flag or a number. If nice is a number, it will represent a desired tick count. This allows greater control over the step size used to extend the bounds, guaranteeing that the returned ticks will exactly cover the domain.
yZero?boolean | undefinedfalseIf true, ensures that a zero baseline value is included in the scale domain. Note: Log, time, and utc scales do not support zero.
yNumTicks?number | undefined—The number of ticks wanted for the Y-axis (note this is approximate).
yTickValues?(string | number | Date)[] | undefined—An array of values that determine the number and values of the ticks. Falls back to scale ticks or domain when not set. Overrides yNumTicks when set.
legendPosition?LegendPosition | null | undefined'bottom' when more than one series; hidden otherwiseLegend position. Omit for default: shown at bottom when there is more than one series, hidden for a single series. Set to `null` to hide the legend.
tooltip?boolean | undefinedtrueShow tooltip on hover.
showCrosshair?boolean | undefinedtrueShow crosshair on hover.
showDataPoints?boolean | undefinedtrueShow data point glyphs on hover.
tooltipValueFormatter?((datum: T) => string) | undefinedY as stringFormat tooltip values.
width?number | undefined—Outer container width (omitted = 100%)
height?number | undefined—Outer container height (omitted = 100%)
desc?string | undefined—Screen reader description (SVG <desc>)
className?string | undefined—Additional class name
Examples
Basic
Single Series
One line with time-scale X-axis and minimal configuration.
import { cityTemperature } from '@visx/mock-data';import { LineChart, type LineChartProps } from '@godaddy/antares';export function SingleSeriesExample(props: Partial<LineChartProps>) { const series = [ { id: 'series-1', name: 'Series 1', data: cityTemperature .slice(0, 10) .map((d) => ({ x: new Date(d.date), y: parseFloat(d['New York']) })) .sort((a, b) => a.x.getTime() - b.x.getTime()) } ]; return ( <LineChart series={series} xType="time" yZero={false} xLabels={false} yLabels={false} height={400} aria-label="Single series example chart" desc="Line chart demonstrating single series with minimal configuration" {...props} /> );}Multiple Series
Several lines with a bottom legend and shared X-axis.
import { cityTemperature } from '@visx/mock-data';import { LineChart, type LineChartProps } from '@godaddy/antares';export function MultipleSeriesExample(props: Partial<LineChartProps>) { const series = [ { id: 'series-1', name: 'Product A', data: cityTemperature .slice(0, 10) .map((d) => ({ x: new Date(d.date), y: parseFloat(d['New York']) })) .sort((a, b) => a.x.getTime() - b.x.getTime()) }, { id: 'series-2', name: 'Product B', data: cityTemperature .slice(0, 10) .map((d) => ({ x: new Date(d.date), y: parseFloat(d['San Francisco']) })) .sort((a, b) => a.x.getTime() - b.x.getTime()) }, { id: 'series-3', name: 'Product C', data: cityTemperature .slice(0, 10) .map((d) => ({ x: new Date(d.date), y: parseFloat(d['Austin']) })) .sort((a, b) => a.x.getTime() - b.x.getTime()) }, { id: 'series-4', name: 'Product D', data: cityTemperature .slice(0, 10) .map((d) => ({ x: new Date(d.date), y: parseFloat(d['New York']) * 1.1 })) .sort((a, b) => a.x.getTime() - b.x.getTime()) } ]; return ( <LineChart series={series} xType="time" yZero={false} xLabels={false} yLabels={false} height={400} aria-label="Multiple series example chart" desc="Line chart demonstrating multiple series comparison" {...props} /> );}Axis
Gridlines
Vertical and horizontal gridlines via xGridlines and yGridlines.
import { cityTemperature } from '@visx/mock-data';import { LineChart, type LineChartProps } from '@godaddy/antares';export function GridlinesExample(props: Partial<LineChartProps>) { const series = [ { id: 'series-1', name: 'Series 1', data: cityTemperature .slice(0, 10) .map((d) => ({ x: new Date(d.date), y: parseFloat(d['New York']) })) .sort((a, b) => a.x.getTime() - b.x.getTime()) } ]; return ( <LineChart series={series} xType="time" yZero={false} xLabels={false} yLabels={false} xGridlines={true} yGridlines={true} height={400} aria-label="Gridlines example chart" desc="Line chart demonstrating gridlines only" {...props} /> );}Titles
X- and Y-axis titles to label what each axis represents (e.g. "Month", "Temperature (°F)").
import { cityTemperature } from '@visx/mock-data';import { LineChart, type LineChartProps } from '@godaddy/antares';export function TitlesExample(props: Partial<LineChartProps>) { const series = [ { id: 'series-1', name: 'Series 1', data: cityTemperature .slice(0, 10) .map((d) => ({ x: new Date(d.date), y: parseFloat(d['New York']) })) .sort((a, b) => a.x.getTime() - b.x.getTime()) } ]; return ( <LineChart series={series} xType="time" yZero={false} xLabels={false} yLabels={false} xTitle="Date" yTitle="Value" height={400} aria-label="Titles example chart" desc="Line chart demonstrating axis titles only" {...props} /> );}Labels
Tick labels on both axes with xLabels and yLabels.
import { cityTemperature } from '@visx/mock-data';import { LineChart, type LineChartProps } from '@godaddy/antares';export function LabelsExample(props: Partial<LineChartProps>) { const series = [ { id: 'series-1', name: 'Series 1', data: cityTemperature .slice(0, 10) .map((d) => ({ x: new Date(d.date), y: parseFloat(d['New York']) })) .sort((a, b) => a.x.getTime() - b.x.getTime()) } ]; return ( <LineChart series={series} xType="time" xLabels={true} yLabels={true} height={400} aria-label="Labels example chart" desc="Line chart demonstrating axis labels only" {...props} /> );}Ticks
Tick marks (short lines) at each tick value. Controlled by xTickMarks and yTickMarks.
import { cityTemperature } from '@visx/mock-data';import { LineChart, type LineChartProps } from '@godaddy/antares';export function TicksExample(props: Partial<LineChartProps>) { const series = [ { id: 'series-1', name: 'Series 1', data: cityTemperature .slice(0, 10) .map((d) => ({ x: new Date(d.date), y: parseFloat(d['New York']) })) .sort((a, b) => a.x.getTime() - b.x.getTime()) } ]; return ( <LineChart series={series} xType="time" xLabels={false} yLabels={false} xTickMarks={true} yTickMarks={true} height={400} aria-label="Ticks example chart" desc="Line chart demonstrating tick marks only" {...props} /> );}Baselines
Axis baseline (the main axis line). Controlled by xBaseline and yBaseline.
import { cityTemperature } from '@visx/mock-data';import { LineChart, type LineChartProps } from '@godaddy/antares';export function BaselinesExample(props: Partial<LineChartProps>) { const series = [ { id: 'series-1', name: 'Series 1', data: cityTemperature .slice(0, 10) .map((d) => ({ x: new Date(d.date), y: parseFloat(d['New York']) })) .sort((a, b) => a.x.getTime() - b.x.getTime()) } ]; return ( <LineChart series={series} xType="time" xLabels={false} yLabels={false} xBaseline={true} yBaseline={true} height={400} aria-label="Baselines example chart" desc="Line chart demonstrating axis baselines only" {...props} /> );}Legend
Legend showing series names and colors, positioned above or below the chart via legendPosition.
import { cityTemperature } from '@visx/mock-data';import { LineChart, type LineChartProps } from '@godaddy/antares';export function LegendExample(props: Partial<LineChartProps>) { const series = [ { id: 'series-1', name: 'Series 1', data: cityTemperature .slice(0, 10) .map((d) => ({ x: new Date(d.date), y: parseFloat(d['New York']) })) .sort((a, b) => a.x.getTime() - b.x.getTime()) }, { id: 'series-2', name: 'Series 2', data: cityTemperature .slice(0, 10) .map((d) => ({ x: new Date(d.date), y: parseFloat(d['San Francisco']) })) .sort((a, b) => a.x.getTime() - b.x.getTime()) }, { id: 'series-3', name: 'Series 3', data: cityTemperature .slice(0, 10) .map((d) => ({ x: new Date(d.date), y: parseFloat(d['Austin']) })) .sort((a, b) => a.x.getTime() - b.x.getTime()) } ]; return ( <LineChart series={series} xType="time" yZero={false} xLabels={false} yLabels={false} legendPosition="bottom" height={400} aria-label="Legend example chart" desc="Line chart demonstrating legend only" {...props} /> );}Formatting
Axis and Tooltip Formatting
Custom formatters for axis ticks and tooltip values (e.g. currency, dates). Controlled by xTickFormat and yTickFormat.
import { cityTemperature } from '@visx/mock-data';import { LineChart, type LineChartProps, type DataPoint } from '@godaddy/antares';function formatDate(value: number | string | Date): string { if (value instanceof Date) { return value.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }); } return String(value);}function formatCurrency(value: number): string { return `$${value.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;}function formatTooltipCurrency(d: DataPoint): string { return `$${d.y!.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;}export function FormattingExample(props: Partial<LineChartProps>) { const series = [ { id: 'series-1', name: 'Series 1', data: cityTemperature .slice(0, 10) .map((d) => ({ x: new Date(d.date), y: parseFloat(d['New York']) })) .sort((a, b) => a.x.getTime() - b.x.getTime()) } ]; return ( <LineChart series={series} xType="time" xLabels={true} yLabels={true} xTickFormat={formatDate} yTickFormat={formatCurrency} tooltipValueFormatter={formatTooltipCurrency} height={400} aria-label="Formatting example chart" desc="Line chart demonstrating axis and tooltip formatting" {...props} /> );}Scale
Fixed Domain
Explicit X and Y domain for a fixed range or consistent scale across charts.
import { appleStock } from '@visx/mock-data';import { LineChart, type LineChartProps } from '@godaddy/antares';export function FixedDomainExample(props: Partial<LineChartProps>) { const data = appleStock .slice(0, 150) .map((d) => ({ x: new Date(d.date), y: d.close })) .sort((a, b) => a.x.getTime() - b.x.getTime()); const series = [ { id: 'series-1', name: 'Stock Price', data: data } ]; return ( <LineChart series={series} xType="time" xLabels={true} yLabels={true} xDomain={[new Date('2007-04-01'), new Date('2007-06-01')]} yDomain={[80, 200]} height={400} aria-label="Fixed domain example chart" desc="Line chart demonstrating explicit domain values with axis labels. Shows Apple stock data for the year 2007 with a fixed X-axis domain." {...props} /> );}Nice Values
Domain extended to nice round values (e.g. 0.2–1.0).
import { cityTemperature } from '@visx/mock-data';import { LineChart, type LineChartProps } from '@godaddy/antares';export function NiceValuesExample(props: Partial<LineChartProps>) { const series = [ { id: 'series-1', name: 'Series 1', data: cityTemperature .slice(0, 10) .map((d) => ({ x: new Date(d.date), y: parseFloat(d['New York']) })) .sort((a, b) => a.x.getTime() - b.x.getTime()) } ]; return ( <LineChart series={series} xType="time" xLabels={true} yLabels={true} xNice={true} yNice={true} height={400} aria-label="Nice values example chart" desc="Line chart demonstrating nice rounded values" {...props} /> );}Zero Included
X and Y domains include zero via xZero and yZero.
import { appleStock } from '@visx/mock-data';import { LineChart, type LineChartProps } from '@godaddy/antares';export function ZeroIncludedExample(props: Partial<LineChartProps>) { const series = [ { id: 'series-1', name: 'Series 1', data: appleStock.slice(0, 40).map((d, i) => ({ x: i, y: d.close })) } ]; return ( <LineChart series={series} xType="linear" xLabels={true} yLabels={true} xZero={true} yZero={true} height={500} aria-label="Zero included example chart" desc="Line chart demonstrating zero included in domain" {...props} /> );}Custom Ticks
Explicit tick values or count with xTickValues / yTickValues or xNumTicks / yNumTicks.
import { cityTemperature } from '@visx/mock-data';import { LineChart, type LineChartProps } from '@godaddy/antares';export function CustomTicksExample(props: Partial<LineChartProps>) { const series = [ { id: 'series-1', name: 'Series 1', data: cityTemperature .slice(0, 10) .map((d) => ({ x: new Date(d.date), y: parseFloat(d['New York']) })) .sort((a, b) => a.x.getTime() - b.x.getTime()) } ]; return ( <LineChart series={series} xType="time" xLabels={true} yLabels={true} xNumTicks={5} yNumTicks={9} height={400} aria-label="Custom ticks example chart" desc="Line chart demonstrating custom tick values/counts" {...props} /> );}Band Padding
Outer padding on a band-scale axis with xPaddingOuter / yPaddingOuter.
import { LineChart, type LineChartProps } from '@godaddy/antares';export function BandPaddingExample(props: Partial<LineChartProps>) { const xDomain = ['Q1', 'Q2', 'Q3', 'Q4']; const series = [ { name: 'Series 1', data: [ { x: 'Q1', y: '100' }, { x: 'Q2', y: '200' }, { x: 'Q3', y: '150' }, { x: 'Q4', y: '300' } ] } ]; return ( <LineChart series={series} xType="band" yType="band" xLabels={true} yLabels={true} xDomain={xDomain} xPaddingOuter={0.1} yPaddingOuter={0.1} height={400} aria-label="Band padding example chart" desc="Line chart demonstrating band scale padding" {...props} /> );}Interactive
Tooltip Disabled
Tooltip, crosshair, and data point glyphs all disabled (tooltip={false}, showCrosshair={false}, showDataPoints={false}).
import { cityTemperature } from '@visx/mock-data';import { LineChart, type LineChartProps } from '@godaddy/antares';export function TooltipDisabledExample(props: Partial<LineChartProps>) { const series = [ { id: 'series-1', name: 'Series 1', data: cityTemperature .slice(0, 10) .map((d) => ({ x: new Date(d.date), y: parseFloat(d['New York']) })) .sort((a, b) => a.x.getTime() - b.x.getTime()) } ]; return ( <LineChart series={series} xType="time" xLabels={false} yLabels={false} tooltip={false} showCrosshair={false} showDataPoints={false} height={400} aria-label="Tooltip disabled example chart" desc="Line chart demonstrating no tooltip or interactive features" {...props} /> );}Crosshair Only
Only the vertical crosshair on hover; tooltip and data point glyphs disabled.
import { cityTemperature } from '@visx/mock-data';import { LineChart, type LineChartProps } from '@godaddy/antares';export function CrosshairOnlyExample(props: Partial<LineChartProps>) { const series = [ { id: 'series-1', name: 'Series 1', data: cityTemperature .slice(0, 10) .map((d) => ({ x: new Date(d.date), y: parseFloat(d['New York']) })) .sort((a, b) => a.x.getTime() - b.x.getTime()) } ]; return ( <LineChart series={series} xType="time" xLabels={false} yLabels={false} tooltip={false} showCrosshair={true} showDataPoints={true} height={400} aria-label="Crosshair only example chart" desc="Line chart demonstrating crosshair without tooltip" {...props} /> );}Custom Tooltip Formatting
Tooltip values formatted with tooltipValueFormatter (e.g. currency, units).
import { cityTemperature } from '@visx/mock-data';import { LineChart, type LineChartProps, type DataPoint } from '@godaddy/antares';function formatTooltipValue(d: DataPoint): string { return `Value: ${(d.y as number).toFixed(2)} units`;}export function CustomTooltipFormattingExample(props: Partial<LineChartProps>) { const series = [ { id: 'series-1', name: 'Series 1', data: cityTemperature .slice(0, 10) .map((d) => ({ x: new Date(d.date), y: parseFloat(d['New York']) })) .sort((a, b) => a.x.getTime() - b.x.getTime()) } ]; return ( <LineChart series={series} xType="time" yZero={false} xLabels={false} yLabels={false} tooltipValueFormatter={formatTooltipValue} height={400} aria-label="Custom tooltip formatting example chart" desc="Line chart demonstrating custom tooltip formatter" {...props} /> );}Data
Custom Accessors
Custom data shape (e.g. date/value) with xAccessor and yAccessor.
import { type DateValue, cityTemperature } from '@visx/mock-data';import { LineChart, type LineChartProps } from '@godaddy/antares';export function CustomAccessorsExample(props: Partial<LineChartProps<DateValue>>) { const series = [ { id: 'series-1', name: 'Series 1', data: cityTemperature .slice(0, 10) .map((d) => ({ date: new Date(d.date), value: parseFloat(d['New York']) })) .sort((a, b) => a.date.getTime() - b.date.getTime()) } ]; return ( <LineChart series={series} xType="time" xAccessor={(d) => d.date} yAccessor={(d) => d.value} xLabels={false} yLabels={false} height={400} aria-label="Custom accessors example chart" desc="Line chart demonstrating custom data types with accessors" {...props} /> );}Missing Values
Null Y values create breaks in the line.
import { appleStock } from '@visx/mock-data';import { LineChart, type LineChartProps } from '@godaddy/antares';export function MissingValuesExample(props: Partial<LineChartProps>) { const missingPeriodStart = new Date('2010-01-01'); const missingPeriodEnd = new Date('2010-12-31T23:59:59.999'); const series = [ { id: 'apple-stock-missing', name: 'Apple Stock Price', data: appleStock.map(function mapStockData(d) { const date = new Date(d.date); const isInMissingPeriod = date >= missingPeriodStart && date <= missingPeriodEnd; return { x: date, y: isInMissingPeriod ? null : d.close }; }) } ]; return ( <LineChart series={series} xType="time" xLabels={false} yLabels={false} height={400} aria-label="Missing values example chart" desc="Line chart demonstrating null values handling with visual breaks" {...props} /> );}Layout
Fixed Size
Explicit chart size via width and height props (e.g. 800×400).
import { cityTemperature } from '@visx/mock-data';import { LineChart, type LineChartProps } from '@godaddy/antares';export function FixedSizeExample(props: Partial<LineChartProps>) { const series = [ { id: 'series-1', name: 'Series 1', data: cityTemperature .slice(0, 10) .map((d) => ({ x: new Date(d.date), y: parseFloat(d['New York']) })) .sort((a, b) => a.x.getTime() - b.x.getTime()) } ]; return ( <LineChart series={series} xType="time" xLabels={false} yLabels={false} width={800} height={400} aria-label="Fixed size example chart" desc="Line chart demonstrating fixed width/height" {...props} /> );}Featured
Bitcoin Price
Time-series with date and currency formatting, gridlines, and nice Y-axis.
import { bitcoinPrice } from '@visx/mock-data';import { LineChart, type LineChartProps, type DataPoint } from '@godaddy/antares';function formatDate(value: number | string | Date): string { if (value instanceof Date) { return value.toLocaleDateString('en-US', { month: 'short', year: 'numeric' }); } return String(value);}function formatLargeCurrency(value: number): string { return `$${value.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;}function formatTooltipCurrency(d: DataPoint): string { return `$${(d.y as number).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;}export function BitcoinPriceExample(props: Partial<LineChartProps>) { const series = [ { id: 'bitcoin-price', name: 'Bitcoin Price', data: bitcoinPrice.prices .map((d) => ({ x: new Date(d.time), y: Number(d.price) })) .sort((a, b) => a.x.getTime() - b.x.getTime()) } ]; return ( <LineChart series={series} xType="time" xTitle="Date" yTitle={`Price (${bitcoinPrice.currency})`} xLabels={true} yLabels={true} xTickFormat={formatDate} yTickFormat={formatLargeCurrency} yGridlines={true} yNice={true} tooltipValueFormatter={formatTooltipCurrency} height={600} aria-label="Bitcoin price chart" desc="Line chart showing Bitcoin price over time with complete configuration including large number currency formatting, date formatting, gridlines, tick marks, baselines, and nice rounded values" {...props} /> );}City Temperature
Multiple series over time with legend, shared time axis, and temperature (°F) formatting.
import { cityTemperature } from '@visx/mock-data';import { LineChart, type LineChartProps, type DataPoint } from '@godaddy/antares';function formatDate(value: number | string | Date): string { if (value instanceof Date) { return value.toLocaleDateString('en-US', { month: 'short', year: 'numeric' }); } return String(value);}function formatTemperature(value: number): string { return `${value.toFixed(1)}°F`;}function formatTooltipTemperature(d: DataPoint): string { return `${(d.y as number).toFixed(1)}°F`;}export function CityTemperatureExample(props: Partial<LineChartProps>) { const cities = ['New York', 'San Francisco', 'Austin'] as const; const series = cities.map(function mapCity(city) { return { id: `city-${city.toLowerCase().replace(/\s+/g, '-')}`, name: city, data: cityTemperature .map((d) => ({ x: new Date(d.date), y: parseFloat(d[city as keyof typeof d] as string) })) .sort((a, b) => a.x.getTime() - b.x.getTime()) }; }); return ( <LineChart series={series} xType="time" xLabels={true} yLabels={true} xTickMarks={true} yTickMarks={true} xBaseline={true} yBaseline={true} xNice={true} yNice={true} xTickFormat={formatDate} yTickFormat={formatTemperature} legendPosition="top" tooltipValueFormatter={formatTooltipTemperature} height={400} aria-label="City temperature comparison chart" desc="Line chart showing temperature comparisons across multiple cities over time with complete axis configuration including gridlines, tick marks, baselines, date formatting, and unit formatting" {...props} /> );}Browser Usage
Categorical X-axis (band scale) with multiple series and percentage formatting.
import { browserUsage } from '@visx/mock-data';import { LineChart, type LineChartProps, type DataPoint } from '@godaddy/antares';function formatPercentage(value: number): string { return `${value.toFixed(2)}%`;}function formatTooltipPercentage(d: DataPoint): string { return `${(d.y as number).toFixed(2)}%`;}export function BrowserUsageExample(props: Partial<LineChartProps>) { const browserNames = ['Google Chrome', 'Internet Explorer', 'Firefox', 'Safari', 'Microsoft Edge', 'Opera'] as const; const series = browserNames.map(function mapBrowser(browser) { return { id: `browser-${browser.toLowerCase().replace(/\s+/g, '-')}`, name: browser, data: browserUsage.map((d) => ({ x: d.date, y: parseFloat(d[browser as keyof typeof d] as string) })) }; }); return ( <LineChart series={series} xType="band" xTitle="Date" yTitle="Market Share (%)" xLabels={true} yLabels={true} xTickMarks={true} yTickMarks={true} xBaseline={true} yBaseline={true} xGridlines={true} yGridlines={true} xNice={true} yNice={true} yTickFormat={formatPercentage} tooltipValueFormatter={formatTooltipPercentage} legendPosition="bottom" height={600} aria-label="Browser usage market share chart" desc="Line chart showing browser market share percentages over time with multiple series, complete axis configuration including gridlines, tick marks, baselines, date formatting, and percentage formatting" {...props} /> );}Right-to-Left
The chart follows the current layout direction (LTR or RTL). By default, that direction is detected automatically from the browser or system settings. When it is RTL, the chart mirrors axes and labels accordingly.
import { RTLProvider } from '../../../../utils/rtl-locale-provider.tsx';import { CityTemperatureExample } from './city-temperature.tsx';import type { LineChartProps } from '@godaddy/antares';export function RTLExample(props: Partial<LineChartProps>) { return ( <RTLProvider> <CityTemperatureExample {...props} /> </RTLProvider> );}Customization
Data Attributes
The chart root exposes data attributes that reflect prop state for styling:
Chart container: data-width, data-height, data-x-labels, data-y-labels, data-x-labels-vertical, data-x-baseline, data-y-baseline, data-x-tick-marks, data-y-tick-marks
Component Customization
Use the className prop on the chart container to add or override styles:
<LineChart series={series} className="my-custom-chart" />Accessibility
ARIA Support
- Provide
aria-labelto describe the chart (e.g. "Monthly sales revenue from January to May 2024"). - Use
descfor a longer description rendered in the SVG<desc>for screen readers. - The component sets ARIA attributes on interactive and structural elements as needed.
Troubleshooting
Chart Not Sizing or Empty
Ensure the chart has a non-zero size. Place it in a container with explicit dimensions or use width and height:
// ✅ Container with size
<div style={{ width: '100%', height: 400 }}>
<LineChart series={series} />
</div>
// ✅ Or fixed dimensions on the component
<LineChart series={series} width={600} height={400} />Dates Not Displaying Correctly
Use xType="time" when the X-axis values are Date objects:
// ❌ Without xType="time", Date objects may not scale correctly
<LineChart series={seriesWithDates} />
// ✅ Use time scale for Date X values
<LineChart series={seriesWithDates} xType="time" />Tooltip or Crosshair Not Showing
Ensure tooltip, showCrosshair, or showDataPoints are not set to false, and that the chart receives pointer events (e.g. no overlay blocking hover).
Best Practices
When to Use LineChart
- Use for trends over time or along a continuous scale.
- Use when comparing a few series (e.g. 2–5 lines); avoid too many overlapping lines.
- Prefer a single chart with a legend over multiple small charts when comparing the same X range.