Charts - Tree Shaking

#Usage

import { ChartLine, ChartSvg, ChartTooltip, ChartXAxis, ChartYAxis } from '@primeui/vue-chart';

<ChartSvg>
    <ChartLine :data="data" category-x-field="month" value-y-field="revenue" />
    <ChartXAxis />
    <ChartYAxis />
    <ChartTooltip />
</ChartSvg>

Every component is available two ways from the same package: flat named imports that tree-shake, and a compound Chart namespace that reads cleanly but pins every chart type into the bundle. Same components either way. For a line chart that should not carry the candlestick, treemap, and radar code, use the flat imports.

#Flat Imports

Import the renderer and the chart types being drawn:

import { ChartSvg, ChartLine } from '@primeui/vue-chart';

<ChartSvg>
    <ChartLine :data="data" category-x-field="month" value-y-field="revenue" />
</ChartSvg>

The bundler keeps only the named imports. Every chart type and customization has a flat name: ChartSvg, ChartCanvas, ChartLine, ChartBar, ChartPie, ChartRadar, ChartScatter, ChartCandlestick, ChartHeatmap, ChartTreemap, ChartPolar, plus customizations (ChartTooltip, ChartLegend, ChartZoom, axes, and so on). Each wrapper imports its renderer from a narrow chart-core subpath, so naming ChartLine never reaches the candlestick or treemap renderers.

#Compound API

import { Chart } from '@primeui/vue-chart';

<Chart.Svg>
    <Chart.Line :data="data" category-x-field="month" value-y-field="revenue" />
</Chart.Svg>

This exposes <Chart.Svg>, <Chart.Line>, <Chart.Bar>, and the rest off one object. It reads cleanly and there is nothing to look up. The cost: Chart is a namespace object resolved at runtime, so the bundler keeps every chart type whether or not the template draws it. On a lazy-loaded page that rarely matters.

#SVG and Canvas

ChartSvg and ChartCanvas (Chart.Svg and Chart.Canvas) are two renderers over the same chart components. The chart types inside (ChartLine, ChartBar, ...) are the same either way. Swapping one root for the other on a line chart does not change the bundle size in any meaningful way, because the cartesian engine and the line renderer are the bulk of it and both paths share them. Tree-shaking drops the chart types that go undrawn, not the engine. Any chart pays for the cartesian core baseline, the chosen renderer, and the types requested.

#Bundle Impact

For a line chart, the compound import carries every chart type at once. The flat import keeps the cartesian engine, the chosen renderer, and the line type, and leaves the unused types behind as stray label strings rather than drawing code. Each chart type added to a flat build costs roughly its own renderer and nothing else, so the bundle grows only with the types actually drawn.

#Choosing an Import Style

The flat imports are the size-safe default and read almost as cleanly as the namespace. The compound API is fine when readability wins and the page is lazy-loaded. Reaching into an aggregate chart-core barrel to grab a helper can drag in renderers that never render, and there is no longer a reason to. Every chart type and the runtime helpers (easings, getEasing, registerEasing, defineChartPlugin, svgNode, defaultLightTheme, defaultDarkTheme) are re-exported from @primeui/vue-chart. The type re-export is type-only, so it is erased at build and adds nothing to the bundle.

#Related Docs

• API
• Performance