Navigate Docs

Area Chart

Graph with lines connecting data points and shaded areas between the lines and the x-axis.

Check API Reference

Installation

Nuxt:

        

Vue 3:

        
Star

API Reference

All the props you can use with the AreaChart component.

AreaChartProps

datarequired
T[]

The data to be displayed in the area chart. Each element of the array represents a data point. The structure of 'T' should be compatible with the chart's rendering logic.

heightrequired
number

The height of the chart in pixels.

xLabeloptional
string

Optional label for the x-axis.

yLabeloptional
string

Optional label for the y-axis.

categoriesrequired
Record<string, BulletLegendItemInterface>

A record mapping category keys to `BulletLegendItemInterface` objects. This defines the visual representation and labels for each category in the chart's legend.

xFormatterrequired
(i: number, idx?: number) => string | number

A function that formats the x-axis tick labels. @param i The x-axis key of the item to be formatted. @param idx The index of the data point (optional). @returns The formatted x-axis label.

yFormatteroptional
(i: number, idx?: number) => string | number

An optional function that formats the y-axis tick labels. @param i The y-axis key of the item to be formatted. @param idx The index of the data point (optional). @returns The formatted y-axis label or value.

curveTypeoptional
CurveType

The type of curve to use for the area chart lines. See `CurveType` for available options.

xNumTicksoptional
number

The desired number of ticks on the x-axis.

xExplicitTicksoptional
number

Force specific ticks on the x-axis.

minMaxTicksOnlyoptional
boolean

Force only first and last ticks on the x-axis.

yNumTicksoptional
number

The desired number of ticks on the y-axis.

hideLegendoptional
boolean

If `true`, hides the chart legend.

hideTooltipoptional
boolean

If `true`, hides the chart tooltip.

xGridLineoptional
boolean

If `true`, displays grid lines along the x-axis.

xDomainLineoptional
boolean

If `true`, displays a domain line (axis line) along the x-axis.

yGridLineoptional
boolean

If `true`, displays grid lines along the y-axis.

yDomainLineoptional
boolean

If `true`, displays a domain line (axis line) along the y-axis.

xTickLineoptional
boolean

If `true`, displays tick lines on the x-axis.

legendPositionoptional
LegendPosition

Optional position for the legend, if applicable. See `LegendPosition` for available options.

Ready to build something amazing?

All components are built with Nuxt UI v3, TypeScript, and Tailwind CSS for maximum flexibility

Frequently Asked Questions

Everything you need to know about our templates

How do I get access to the Nuxt Dashboard?

What's included in the All-Access Pass?

Can I customize the charts and components?

Do I need specific technical skills?

What chart types are available?

Can I use this for commercial projects?

What's the difference between the pricing tiers?

Do you offer refunds?