Line Charts

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

Default Line Chart

<template>
 <DefaultLineChart
  :chartOptions="{
    chart: {
      type: 'line',
      zoom: {
        enabled: false,
      },
    },
    colors: ['#4BB543', '#3A416F', '#17c1e8'],
    dataLabels: {
      enabled: false,
    },
    stroke: {
      curve: 'smooth',
    },
    legend: {
      show: false,
    },
    grid: {
      row: {
        colors: ['#f3f3f3', 'transparent'],
        opacity: 0.5,
      },
    },
    xaxis: {
      categories: [
        'Apr',
        'May',
        'Jun',
        'Jul',
        'Aug',
        'Sep',
        'Oct',
        'Nov',
        'Dec',
      ],
    },
  }"
  :series="[
    {
      name: 'Organic Search',
      data: [50, 40, 300, 220, 500, 250, 400, 230, 500],
    },
    {
      name: 'Referral',
      data: [30, 90, 40, 140, 290, 290, 340, 230, 400],
    },
    {
      name: 'Direct',
      data: [40, 80, 70, 90, 30, 90, 140, 130, 200],
    },
  ]"
/>
</template>

<script setup>
import DefaultLineChart from "@/examples/charts/DefaultLineChart.vue";
</script>

1<template>
2 <DefaultLineChart
3  :chartOptions="{
4    chart: {
5      type: 'line',
6      zoom: {
7        enabled: false,
8      },
9    },
10    colors: ['#4BB543', '#3A416F', '#17c1e8'],
11    dataLabels: {
12      enabled: false,
13    },
14    stroke: {
15      curve: 'smooth',
16    },
17    legend: {
18      show: false,
19    },
20    grid: {
21      row: {
22        colors: ['#f3f3f3', 'transparent'],
23        opacity: 0.5,
24      },
25    },
26    xaxis: {
27      categories: [
28        'Apr',
29        'May',
30        'Jun',
31        'Jul',
32        'Aug',
33        'Sep',
34        'Oct',
35        'Nov',
36        'Dec',
37      ],
38    },
39  }"
40  :series="[
41    {
42      name: 'Organic Search',
43      data: [50, 40, 300, 220, 500, 250, 400, 230, 500],
44    },
45    {
46      name: 'Referral',
47      data: [30, 90, 40, 140, 290, 290, 340, 230, 400],
48    },
49    {
50      name: 'Direct',
51      data: [40, 80, 70, 90, 30, 90, 140, 130, 200],
52    },
53  ]"
54/>
55</template>
56
57<script setup>
58import DefaultLineChart from "@/examples/charts/DefaultLineChart.vue";
59</script>

Props Information

Name	Type	Default	Description
title	String		Used to set the title.
height	NumberString	300	Used to set the chart height.
chartOptions	object		It is an object and is used to set the chart configuration.
series	array		It is an array and is used to set the data and label.

Line Chart

Pro

Income

$130,832 +90%

<template>
 <LineChart
  title="Income"
  :value="{
    amount: '$130,832',
    percentage: { value: '+90%', color: 'success' },
  }"
  :chartOptions="{
    chart: {
      type: 'area',
      zoom: {
        enabled: false,
      },
    },
    colors: ['#252f40'],
    labels: [
      'Apr',
      'May',
      'Jun',
      'Jul',
      'Aug',
      'Sep',
      'Oct',
      'Nov',
      'Dec',
    ],
    dataLabels: {
      enabled: false,
    },
    stroke: {
      curve: 'smooth',
    },
    legend: {
      show: false,
    },
    yaxis: {
      show: false,
    },
  }"
  :series="[
    {
      name: 'Income',
      data: [50, 45, 60, 60, 80, 65, 90, 80, 100],
    },
  ]"
/>
</template>

<script setup>
import LineChart from "@/examples/charts/LineChart.vue";
</script>

1<template>
2 <LineChart
3  title="Income"
4  :value="{
5    amount: '$130,832',
6    percentage: { value: '+90%', color: 'success' },
7  }"
8  :chartOptions="{
9    chart: {
10      type: 'area',
11      zoom: {
12        enabled: false,
13      },
14    },
15    colors: ['#252f40'],
16    labels: [
17      'Apr',
18      'May',
19      'Jun',
20      'Jul',
21      'Aug',
22      'Sep',
23      'Oct',
24      'Nov',
25      'Dec',
26    ],
27    dataLabels: {
28      enabled: false,
29    },
30    stroke: {
31      curve: 'smooth',
32    },
33    legend: {
34      show: false,
35    },
36    yaxis: {
37      show: false,
38    },
39  }"
40  :series="[
41    {
42      name: 'Income',
43      data: [50, 45, 60, 60, 80, 65, 90, 80, 100],
44    },
45  ]"
46/>
47</template>
48
49<script setup>
50import LineChart from "@/examples/charts/LineChart.vue";
51</script>

Props Information

Name	Type	Default	Description
title	String		Used to set the title.
height	NumberString	100	Used to set the chart height.
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.
chartOptions	object		It is an object and is used to set the chart configuration.
series	array		It is an array and is used to set the data and label.

Gradient Line Chart

Pro

<template>
<GradientLineChart
  :chartOptions="{
    chart: {
      type: 'area',
    },
    colors: ['#4BB543', '#3A416F'],
  labels: ['Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  dataLabels: {
      enabled: false,
    },
    stroke: {
      curve: 'smooth',
    },
    legend: {
      show: false,
    },
  }"
  :series="[
    {
      name: 'Mobile Apps',
      data: [50, 40, 300, 220, 500, 250, 400, 230, 500],
    },
    {
      name: 'Websites',
      data: [30, 90, 40, 140, 290, 290, 340, 230, 400],
    },
  ]"
/>
</template>

<script setup>
import GradientLineChart from "@/examples/charts/GradientLineChart.vue";
</script>

1<template>
2<GradientLineChart
3  :chartOptions="{
4    chart: {
5      type: 'area',
6    },
7    colors: ['#4BB543', '#3A416F'],
8  labels: ['Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
9  dataLabels: {
10      enabled: false,
11    },
12    stroke: {
13      curve: 'smooth',
14    },
15    legend: {
16      show: false,
17    },
18  }"
19  :series="[
20    {
21      name: 'Mobile Apps',
22      data: [50, 40, 300, 220, 500, 250, 400, 230, 500],
23    },
24    {
25      name: 'Websites',
26      data: [30, 90, 40, 140, 290, 290, 340, 230, 400],
27    },
28  ]"
29/>
30</template>
31
32<script setup>
33import GradientLineChart from "@/examples/charts/GradientLineChart.vue";
34</script>

Props Information

Name	Type	Default	Description
height	NumberString	290	Used to set the chart height.
chartOptions	object		It is an object and is used to set the chart configuration.
series	array		It is an array and is used to set the data and label.

Mini Gradient Line Chart

Pro

<template>
<MiniGradientLineChart
  :chartOptions="{
    chart: {
      type: 'area',
      zoom: {
        enabled: false,
      },
    },
    colors: ['#4BB543'],
    labels: [
      'Apr',
      'May',
      'Jun',
      'Jul',
      'Aug',
      'Sep',
      'Oct',
      'Nov',
      'Dec',
    ],
    dataLabels: {
      enabled: false,
    },
    stroke: {
      curve: 'smooth',
    },
    legend: {
      show: false,
    },
    dataLabels: {
      enabled: false,
    },
  }"
  :series="[
    {
      name: 'Visitors',
      data: [50, 45, 60, 60, 80, 65, 90, 80, 100],
    },
  ]"
/>
</template>

<script setup>
import MiniGradientLineChart from "@/examples/charts/MiniGradientLineChart.vue";
</script>

1<template>
2<MiniGradientLineChart
3  :chartOptions="{
4    chart: {
5      type: 'area',
6      zoom: {
7        enabled: false,
8      },
9    },
10    colors: ['#4BB543'],
11    labels: [
12      'Apr',
13      'May',
14      'Jun',
15      'Jul',
16      'Aug',
17      'Sep',
18      'Oct',
19      'Nov',
20      'Dec',
21    ],
22    dataLabels: {
23      enabled: false,
24    },
25    stroke: {
26      curve: 'smooth',
27    },
28    legend: {
29      show: false,
30    },
31    dataLabels: {
32      enabled: false,
33    },
34  }"
35  :series="[
36    {
37      name: 'Visitors',
38      data: [50, 45, 60, 60, 80, 65, 90, 80, 100],
39    },
40  ]"
41/>
42</template>
43
44<script setup>
45import MiniGradientLineChart from "@/examples/charts/MiniGradientLineChart.vue";
46</script>

Props Information

Name	Type	Default	Description
height	NumberString	150	Used to set the chart height.
chartOptions	object		It is an object and is used to set the chart configuration.
series	array		It is an array and is used to set the data and label.

Progress Line Chart

Pro

Tasks

480

60%

<template>
<ProgressLineChart
  title="Tasks"
  :count="480"
  :progress="60"
  :chartOptions="{
    chart: {
      type: 'area',
      zoom: {
        enabled: false,
      },
    },
    colors: ['#2dce89'],
    labels: [
      'Apr',
      'May',
      'Jun',
      'Jul',
      'Aug',
      'Sep',
      'Oct',
      'Nov',
      'Dec',
    ],
    dataLabels: {
      enabled: false,
    },
    stroke: {
      curve: 'smooth',
    },
    legend: {
      show: false,
    },
    yaxis: {
      show: false,
    },
  }"
  :series="[
    {
      name: 'Tasks',
      data: [40, 45, 42, 41, 40, 43, 40, 42, 39],
    },
  ]"
/>
</template>

<script setup>
import ProgressLineChart from "@/examples/charts/ProgressLineChart.vue";
</script>

1<template>
2<ProgressLineChart
3  title="Tasks"
4  :count="480"
5  :progress="60"
6  :chartOptions="{
7    chart: {
8      type: 'area',
9      zoom: {
10        enabled: false,
11      },
12    },
13    colors: ['#2dce89'],
14    labels: [
15      'Apr',
16      'May',
17      'Jun',
18      'Jul',
19      'Aug',
20      'Sep',
21      'Oct',
22      'Nov',
23      'Dec',
24    ],
25    dataLabels: {
26      enabled: false,
27    },
28    stroke: {
29      curve: 'smooth',
30    },
31    legend: {
32      show: false,
33    },
34    yaxis: {
35      show: false,
36    },
37  }"
38  :series="[
39    {
40      name: 'Tasks',
41      data: [40, 45, 42, 41, 40, 43, 40, 42, 39],
42    },
43  ]"
44/>
45</template>
46
47<script setup>
48import ProgressLineChart from "@/examples/charts/ProgressLineChart.vue";
49</script>

Props Information

Name	Type	Default	Description
title	String		Used to set the title.
height	NumberString	100	Used to set the chart height.
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.
isRTL	bool		Used to set the direction for RTL pages
chartOptions	object		It is an object and is used to set the chart configuration.
series	array		It is an array and is used to set the data and label.