Docs
Purchase now

Charts

Chart components are wrappers over Vue Chart.js library and enhanced visually to look inline with the dashboard style.

Initialization:

// Charts
  import * as chartConfigs from '@/components/argon-core/Charts/config';
  import LineChart from '@/components/argon-core/Charts/LineChart';
  import BarChart from '@/components/argon-core/Charts/BarChart';

export default {
  components: {
    LineChart,
    BarChart
  }
}

Line Chart example

Overview
Sales value
<card type="default" header-classes="bg-transparent">
    <div slot="header" class="row align-items-center">
        <div class="col">
            <h6 class="text-light text-uppercase ls-1 mb-1">Overview</h6>
            <h5 class="h3 text-white mb-0">Sales value</h5>
        </div>
        <div class="col">
            <ul class="nav nav-pills justify-content-end">
                <li class="nav-item mr-2 mr-md-0">
                    <a class="nav-link py-2 px-3"
                       href="#"
                       :class="{active: bigLineChart.activeIndex === 0}"
                       @click.prevent="initBigChart(0)">
                        <span class="d-none d-md-block">Month</span>
                        <span class="d-md-none">M</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link py-2 px-3"
                       href="#"
                       :class="{active: bigLineChart.activeIndex === 1}"
                       @click.prevent="initBigChart(1)">
                        <span class="d-none d-md-block">Week</span>
                        <span class="d-md-none">W</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <line-chart
            :height="350"
            ref="bigChart"
            :chart-data="bigLineChart.chartData"
            :extra-options="bigLineChart.extraOptions"
    >
    </line-chart>

</card>

<script>
import * as chartConfigs from '@/components/argon-core/Charts/config';
export default {
  data() {
    return {
      bigLineChart: {
        allData: [
          [0, 20, 10, 30, 15, 40, 20, 60, 60],
          [0, 20, 5, 25, 10, 30, 15, 40, 40]
        ],
        activeIndex: 0,
        chartData: {
          datasets: [],
          labels: [],
        },
        extraOptions: chartConfigs.blueChartOptions,
      }
    };
  },
  methods: {
    initBigChart(index) {
      let chartData = {
        datasets: [
          {
            label: 'Performance',
            data: this.bigLineChart.allData[index]
          }
        ],
        labels: ['May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      };
      this.bigLineChart.chartData = chartData;
      this.bigLineChart.activeIndex = index;
    }
  },
  mounted() {
    this.initBigChart(0);
  }
};
</script>
Show Code

Updating charts

A common use case is the one where you need to update the chart data in real time. Although this is pretty easy to do, there are some nuances to it, due to certain limitations around change detections in Vue.js and Vue Chart.js.

In order to update charts, you'll have to re-assign the whole chartData, otherwise the changes

DO

<line-chart :chart-data="myChartData"></line-chart>
<script>
 export default {
   data() {
     return {
      myChartData: {
         datasets: [
           {
             label: 'Performance',
             data: [0, 20, 10, 30, 15, 40, 20, 60, 60],
           }
         ],
         labels: ['May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      }  
     }
   },
   methods: {
     updateChart() {
       this.myChartData = {
         datasets: [
           {
             label: 'Performance',
             data: [10, 20, 10, 30, 15, 40, 20, 60, 60],
           }
         ],
         labels: ['May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
       }
     }
   }
 }
</script>

DON'T

<line-chart :chart-data="myChartData"></line-chart>
<script>
 export default {
   data() {
     return {
      myChartData: null  
     }
   },
   methods: {
     updateChart() {
       this.myChartData.datasets[0] = 10
     }
   }
 }
</script>

Although second option is more convinient it won't work and the chart won't update. Another easy option is to clone the original values, update them, then re-assign your chartData

Bar Chart

Performance
Total orders
<template>
<card header-classes="bg-transparent">
    <div slot="header" class="row align-items-center">
        <div class="col">
            <h6 class="text-uppercase text-muted ls-1 mb-1">Performance</h6>
            <h5 class="h3 mb-0">Total orders</h5>
        </div>
    </div>

    <bar-chart
            :height="350"
            ref="barChart"
            :chart-data="redBarChart.chartData">
    </bar-chart>
</card>
</template>

<script>
export default {
  data() {
    return {
     redBarChart: {
       chartData: {
         labels: ['Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
         datasets: [{
           label: 'Sales',
           data: [25, 20, 30, 22, 17, 29]
         }]
       }
     }

    };
  }
};
</script>
Show Code

LineChart Props

BarChart Props

PieChart Props

DoughnutChart Props

← Datepicker →