wovoui

Charts

Chart component is implemented using Chart.jsopen in new window javascript library.

Basic Example


<template>
    <Chart :data="chartData.data"
           :type="chartData.type"
           :options="chartData.options"
    />
</template>

<script setup lang="ts">
    import {Chart} from "@wovosoft/wovoui";

    const chartData = {
        type: "bar",
        data: {
            labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
            datasets: [{
                label: '# of Votes',
                data: [12, 19, 3, 5, 2, 3],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

Chart.js API

Chart.js API methods are exposed to apply reactivity to the chart easily. That means you can use Chart.js API METHODSopen in new window using component refs like given below example:

$refs.component_ref.update();
$refs.component_ref.destroy();
1
2

Not all methods, properties of Chart.js are exposed. In case you want to have more control, You can use the Chart.js instance directly. It's exposed.

$refs.component_ref.chart.update();
$refs.component_ref.chart.destroy();
1
2