Chart Playground

Build a chart by changing the controls, editing the data, and copying the generated code.

Every control maps to a real Chart.js setting, so the generated code is what you would write by hand. Controls change with the chart type, since an option like cutout belongs to a doughnut and stacked belongs to a bar.

Turn themed off to see what Chart.js renders on its own, and back on to see what OpenVue derives from the active theme. Switching the theme or dark mode while it is on updates the chart without any code on your side.

Data

Labels become the categories along the axis, and each series becomes one dataset. Series colors are assigned by position from a fixed palette, so a series keeps its color when others are added or removed. The palette holds eight colors; beyond that it repeats.

Label

Advanced options

The controls above cover the common settings. Chart.js has many more, so anything written here is merged over them and applied live. This is also the precedence rule the component follows: whatever you pass in options wins over the values derived from the theme. See the Chart.js options reference for the full surface.

Generated code

The complete component for the chart above, ready to paste into your application. Switch between the Composition and Options API with the buttons, copy it with the copy button, or open it in StackBlitz to run it straight away.

<template>
    <div class="card">
        <Chart type="bar" :data="chartData" :options="chartOptions" />
    </div>
</template>

<script setup>
import { ref } from 'vue';

const chartData = ref({
    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
    datasets: [
        {
            label: 'Sales',
            data: [540, 325, 702, 620]
        },
        {
            label: 'Returns',
            data: [120, 90, 145, 130]
        }
    ]
});

const chartOptions = ref({
    plugins: {
        legend: { display: true, position: 'top' },
        tooltip: { mode: 'index', intersect: false }
    },
    scales: {
        x: {
            grid: { display: false },
            stacked: false
        },
        y: {
            grid: { display: true },
            stacked: false
        }
    }
});
</script>

What charts can and cannot do

Chart is a wrapper around Chart.js, so its capabilities are Chart.js capabilities. It renders to a canvas, which means the marks cannot be styled with CSS or targeted with pass through options the way other components can. Anything visual is configured through options rather than through classes.

Interaction is limited to what Chart.js provides: hover, tooltips and legend toggling. The select event reports the clicked element, and getChart() returns the underlying instance for anything not exposed as a property. For charts beyond the built in types, register a Chart.js plugin through the plugins property.

A chart mixing types, such as bars with a line over them, is built by setting type on the individual datasets rather than on the component. The playground keeps one type for every series, so see the Combo example for that case.