Vue Line Charts - Argon

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

Default Line Chart

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 {
27  components: {
28    DefaultLineChart ,
29    },
30 };
31</script>

<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>

Props Information

Name	Type	Default	Description
id	String		Used to set the chart id.
title	String		Used to set the chart title.
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.

Line Chart

Pro

Income

$130,832 +90%

1<template>
2  <line-chart
3   title="Income"
4   :value="{
5    amount: '$130,832',
6    percentage: { value: '+90%', color: 'success' },
7   }"
8   :chart="{
9    labels: [
10      'Apr',
11      'May',
12      'Jun',
13      'Jul',
14      'Aug',
15      'Sep',
16      'Oct',
17      'Nov',
18      'Dec',
19    ],
20    datasets: {
21      label: 'Income',
22      data: [50, 45, 60, 60, 80, 65, 90, 80, 100],
23    },
24  }"
25/>
26</template>
27
28<script>
29import LineChart  from "@/examples/Charts/LineChart.vue";
30export default {
31  components: { LineChart , },
32 };
33</script>

<template>
  <line-chart
   title="Income"
   :value="{
    amount: '$130,832',
    percentage: { value: '+90%', color: 'success' },
   }"
   :chart="{
    labels: [
      'Apr',
      'May',
      'Jun',
      'Jul',
      'Aug',
      'Sep',
      'Oct',
      'Nov',
      'Dec',
    ],
    datasets: {
      label: 'Income',
      data: [50, 45, 60, 60, 80, 65, 90, 80, 100],
    },
  }"
/>
</template>

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

Props Information

Name	Type	Default	Description
id	string		Used to set the chart id.
title	string		Used to set a title for the chart.
value	object		Used to set a description for the chart and has the following keys: `amount` of type string. `percentage` of type object with `value` and `color` keys.
height	string	100	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.

Gradient Line Chart

Pro

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 {
23 components: {
24    GradientLineChart ,
25   },
26};
27</script>

<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>

Props Information

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

Mini Gradient Line Chart

Pro

1<template>
2<mini-gradient-line-chart
3 title="Mini Gradient Line Chart"
4 :chart="{
5  labels: [
6    'Apr',
7    'May',
8    'Jun',
9    'Jul',
10    'Aug',
11    'Sep',
12    'Oct',
13    'Nov',
14    'Dec',
15  ],
16  datasets: [
17    {
18      data: [50, 45, 60, 60, 80, 65, 90, 80, 100],
19      label: 'Visitors',
20    },
21  ],
22}"
23/>
24</template>
25
26<script>
27import MiniGradientLineChart  from "@/examples/Charts/MiniGradientLineChart.vue";
28export default {
29  components: { MiniGradientLineChart },
30};
31</script>

<template>
<mini-gradient-line-chart
 title="Mini Gradient Line Chart"
 :chart="{
  labels: [
    'Apr',
    'May',
    'Jun',
    'Jul',
    'Aug',
    'Sep',
    'Oct',
    'Nov',
    'Dec',
  ],
  datasets: [
    {
      data: [50, 45, 60, 60, 80, 65, 90, 80, 100],
      label: 'Visitors',
    },
  ],
}"
/>
</template>

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

Props Information

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

Progress Line Chart

Pro

Tasks

480

60%

1<template>
2<progress-line-chart
3 title="Tasks"
4 :count="480"
5 :progress="60"
6 :chart="{
7  labels: [
8    'Apr',
9    'May',
10    'Jun',
11    'Jul',
12    'Aug',
13    'Sep',
14    'Oct',
15    'Nov',
16    'Dec',
17  ],
18  data: [40, 45, 42, 41, 40, 43, 40, 42, 39],
19 }"
20/>
21</template>
22
23<script>
24import ProgressLineChart  from "@/examples/Charts/ProgressLineChart.vue";
25export default {
26  components: { ProgressLineChart },
27};
28</script>

<template>
<progress-line-chart
 title="Tasks"
 :count="480"
 :progress="60"
 :chart="{
  labels: [
    'Apr',
    'May',
    'Jun',
    'Jul',
    'Aug',
    'Sep',
    'Oct',
    'Nov',
    'Dec',
  ],
  data: [40, 45, 42, 41, 40, 43, 40, 42, 39],
 }"
/>
</template>

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

Props Information

Name	Type	Default	Description
id	string		Used to set the chart id.
title	string	Tasks	Used to set a title for the chart.
height	string	100	Used to set a `height` for the chart.
icon	string	calendar-grid-58	Used to set the chart icon
count	Number		Used to set the total count of items under the title of the chart.
progress	Number		Used to set the chart progress bar percentage value.
chart*	object		Used to set the chart data. It should be an `object` that contains the `labels` and `data` keys and these keys should be an `array`. Its a required prop.