Vue Charts.css

# Datasets

Datasets are different series of data. In Vue Charts.CSS you can have 1 or more series.

# Add Datasets

To add multiple datasets simply add more entries to your datasets variable.





 








 
 
 
 
 
 
 
 
 
 
 
 
 
 
 




<charts-css
    type="bar"
    heading="Team's coffee count"
    :labels="coffeeLabels"
    :datasets="coffeeDatasets"
/>

<script>
    export default {
        data()
        {
            return {
                coffeeLabels: [ "Monday", "Tuesday", "Wednesday", "Thursday", ],
                coffeeDatasets: [
                    {
                        name: "Ben",
                        values: [1, 3, 2, 12],
                    },
                    {
                        name: "Tim",
                        values: [1, 3, 1, 2],
                    },
                    {
                        name: "John",
                        values: [72, 227, 0, 0],
                    },
                ],
            };
        }
    }
</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

You must also add labels and optionally a legend to describe the datasets.




 

 


<charts-css
    type="bar"
    heading="Coffee count"
    :labels="coffeeLabels"
    :datasets="coffeeDatasets"
    show-legend
/>
1
2
3
4
5
6
7

← Labels →