Line Charts - Soft UI

Our Vue Line Chart examples are perfect to show trends and perform comparative analysis. See below:

Default Line Chart

Use the following example to create a simple and versatile line chart for your website.

<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 an id for the chart.
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 object with the following keys: `label` of type string. `data` of type array. It is a required prop.

Gradient Line Chart

Pro

Use the following example to create eye-catching line charts for your website.

<template>
 <gradient-line-chart
   id="chart-line"
   :chart="{
    labels: ['Apr', 'May', 'Jun', 'Jul', "Aug", "Sep", "Oct", "Nov", "Dec"],
   datasets: [
     {
       label: 'Mobile Apps',
       data: [50, 40, 300, 220, 500, 250, 400, 230, 500],
     },
     {
       label: 'Websites',
       data: [30, 90, 40, 140, 290, 290, 340, 230, 400],
     },
   ],
 }"
/>
</template>

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

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

Props Information

Name	Type	Default	Description
id*	string		Used to set an id for the chart. It is a required prop.
title	string		Used to set a title for the chart.
description	string		Used to set a description for the chart.
height	string	300	Used to set a `height` for the chart.
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 object with the following keys: `label` of type string. `data` of type array. It is a required prop.