Chart component uses Chart.JS underneath so it needs to be installed as a dependency.

A chart is configured with the type and data properties. Chart type is defined using the type property that accepts pie, doughnut, line, bar, radar and polarArea as a value. The data defines the datasets represented with the chart.

Colors, fonts and grid lines come from the design tokens of the active theme, so a chart matches the rest of your UI without configuration and follows preset and dark mode changes as they happen. Use the options property to customize the presentation; anything you set there takes precedence over the theme defaults.

A pie chart is a circular statistical graphic which is divided into slices to illustrate numerical proportion.

A doughnut chart is a variant of the pie chart, with a blank center allowing for additional information about the data as a whole to be included.

A bar chart or bar graph is a chart that presents grouped data with rectangular bars with lengths proportional to the values that they represent.

A bar chart is rendered horizontally when indexAxis option is set as y.

Bars can be stacked on top of each other when stacked option of a scale is enabled.

A line chart or line graph is a type of chart which displays information as a series of data points called 'markers' connected by straight line segments.

Multiple axes can be added using the scales option.

Various styles of a line series can be customized to display customizations like an area chart.

Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.

A radar chart is a graphical method of displaying multivariate data in the form of a two-dimensional chart of three or more quantitative variables represented on axes starting from the same point.

A scatter chart plots individual points against two value axes, so each item in data is an object with an x and a y rather than a single number.

A bubble chart adds a third value to each point. Alongside x and y, the r property sets the radius of the bubble in pixels, so it is not scaled by the axes.

Different chart types can be combined in the same graph usign the type option of a dataset.

Existing PrimeVue chart configurations keep working without changes. The data and options you already pass are handed to Chart.js as they are, and anything you set explicitly takes precedence over the values described below. Two things are worth knowing before you upgrade.

Chart.js 4 is required

The peer dependency is chart.js@^4.0.0, so a project still on Chart.js 3 fails at install time with a peer conflict rather than breaking silently at runtime. Upgrade Chart.js first, then install OpenVue. Note that Chart.js 3 to 4 has its own breaking changes independent of OpenVue, covered in the Chart.js v4 migration guide.

Theming is on by default

The themed property defaults to true, which applies colors, fonts and grid styling from the active design tokens to any value you have not set yourself. This is why a chart matches the rest of your UI without configuration, but it also means a chart carried over from PrimeVue may render with different default colors than before. Set themed to false to disable it entirely and get the plain Chart.js defaults.

<Chart type="bar" :data="data" :options="options" :themed="false" />

The defaults that differ from plain Chart.js, all of which apply only when you have not set the value yourself:

• Series colors come from the theme palette, assigned by dataset index so a series keeps its color as other series are added or removed.
• The legend is hidden on a cartesian chart with a single dataset, since the surrounding copy already names it. Pie, doughnut and polar area charts always keep it.
• Line points are hidden until hover so a dense series reads as a line, with the hit area kept large enough to target them.
• Bars are capped at 48px and rounded at the data end.
• Grid lines are drawn on the value axis only, and axis border lines are hidden.

Screen Reader

Chart components internally use canvas element, refer to the Chart.js accessibility guide for more information. The canvas element can be customized with canvasProps property to define aria roles and properties, in addition any content inside the component is directly passed as a child of the canvas to be able to provide fallback content like a table.

<Chart type="line" :data="data" :canvasProps="{'role': 'img', 'aria-label': 'Data'}" />