Line Charts - Material

The Line Charts components helps you to simply create a beautiful line chart for displaying the data.

Default Line Chart

<template>
  <default-line-chart
  :chart="{
    labels: ['Apr', 'May', 'Jun', 'Jul', "Aug", "Sep", "Oct", "Nov", "Dec"],

    datasets: [
      {
        label: 'Organic Search',
        data: [50, 40, 300, 220, 500, 250, 400, 230, 500]
      },
      {
        label: 'Referral',
        data: [30, 90, 40, 140, 290, 290, 340, 230, 400]
      },
      {
        label: 'Direct',
        data: [40, 80, 70, 90, 30, 90, 140, 130, 200]
      }
    ]
  }"
/>
</template>

<script>
import DefaultLineChart  from "@/examples/Charts/DefaultLineChart.vue";
export default { components: { DefaultLineChart, }, };
</script>

1<template>
2  <default-line-chart
3  :chart="{
4    labels: ['Apr', 'May', 'Jun', 'Jul', "Aug", "Sep", "Oct", "Nov", "Dec"],
5
6    datasets: [
7      {
8        label: 'Organic Search',
9        data: [50, 40, 300, 220, 500, 250, 400, 230, 500]
10      },
11      {
12        label: 'Referral',
13        data: [30, 90, 40, 140, 290, 290, 340, 230, 400]
14      },
15      {
16        label: 'Direct',
17        data: [40, 80, 70, 90, 30, 90, 140, 130, 200]
18      }
19    ]
20  }"
21/>
22</template>
23
24<script>
25import DefaultLineChart  from "@/examples/Charts/DefaultLineChart.vue";
26export default { components: { DefaultLineChart, }, };
27</script>

Props Information

Name	Type	Default	Description
id	String	chart-line	Used to set the chart id.
height	String	300	Used to set the chart height.
chart*	object		Used to set the chart data. It should be an `object` that contains the `labels` and `datasets` keys. The `labels` should be an array. The `datasets` should be an array with the following keys: `label` of type string. `data` of type array. It is a required prop.