Nuxt Charts
The Nuxt charts refer to a graphical representation of data.
Keep reading these simple yet flexible Javascript charting for designers & developers.
We used Vue Chart.js along with Chart.js library and created some re-usable components on top of it so you can easily use in your project.
import LineChart from 'src/components/Charts/LineChart'
import BarChart from 'src/components/Charts/BarChart'
import PieChart from 'src/components/Charts/PieChart'
Global usage
Vue.component(LineChart.name, LineChart)
Vue.component(BarChart.name, BarChart)
For local usage
export default {
components: {
LineChart,
BarChart
}
}
Line Chart component
Simple With Gradient
10,000
<card class="card-chart" no-footer-line>
<template slot="header">
<h5 class="card-category">Simple With Gradient</h5>
<h3 class="card-title">
<i class="tim-icons icon-chart-bar-32 text-primary "></i> 10,000
</h3>
</template>
<div class="chart-area">
<line-chart
:chart-data="lineChart1.chartData"
:gradient-colors="lineChart1.gradientColors"
:gradient-stops="lineChart1.gradientStops"
:extra-options="lineChart1.extraOptions"
:height="200"
>
</line-chart>
</div>
</card>
Line Chart With Numbers And Grid
With Numbers and Grid
750,000€
<card class="card-chart">
<template slot="header">
<h5 class="card-category">With Numbers and Grid</h5>
<h3 class="card-title">
<i class="tim-icons icon-send text-info "></i> 750,000€
</h3>
</template>
<div class="chart-area">
<line-chart
:labels="lineChart2.labels"
:chart-data="lineChart2.chartData"
:extra-options="lineChart2.extraOptions"
:height="200"
>
</line-chart>
</div>
</card>
Gradient Bar Chart
Gradient Bar Chart
1,000,000£
<card class="card-chart">
<template slot="header">
<h5 class="card-category">Gradient Bar Chart</h5>
<h3 class="card-title">
<i class="tim-icons icon-shape-star text-danger "></i> 1,000,000£
</h3>
</template>
<div class="chart-area">
<bar-chart
:chart-data="barChart1.chartData"
:extra-options="barChart1.extraOptions"
:gradient-colors="barChart1.gradientColors"
:gradient-stops="barChart1.gradientStops"
:height="200"
>
</bar-chart>
</div>
</card>
Multiple Bars Chart Pro
Multiple Bars Chart With Grid
130,000$
<card class="card-chart" no-footer-line>
<template slot="header">
<h5 class="card-category">Multiple Bars Chart With Grid</h5>
<h3 class="card-title">
<i class="tim-icons icon-time-alarm text-warning "></i> 130,000$
</h3>
</template>
<div class="chart-area">
<bar-chart
:chart-data="barChart2.chartData"
:extra-options="barChart2.extraOptions"
:height="200"
>
</bar-chart>
</div>
</card>
Pie chart component Pro
Simple Pie Chart
10.000$
A total of $54000
<card class="card-chart card-chart-pie">
<h5 slot="header" class="card-category">Simple Pie Chart</h5>
<div class="row">
<div class="col-6">
<div class="chart-area">
<pie-chart
:chart-data="pieChart1.chartData"
:extra-options="pieChart1.extraOptions"
:height="120"
>
</pie-chart>
</div>
</div>
<div class="col-6">
<h4 class="card-title">
<i class="tim-icons icon-trophy text-success "></i> 10.000$
</h4>
<p class="category">A total of $54000</p>
</div>
</div>
</card>
Multiple Pie Chart Pro
Multiple Pie Chart
130,000
Feedback from 20.000 users
<card class="card-chart card-chart-pie">
<h5 slot="header" class="card-category">Multiple Pie Chart</h5>
<div class="row">
<div class="col-6">
<div class="chart-area">
<pie-chart
:chart-data="pieChart2.chartData"
:extra-options="pieChart2.extraOptions"
:height="120"
>
</pie-chart>
</div>
</div>
<div class="col-6">
<h4 class="card-title">
<i class="tim-icons icon-tag text-warning "></i> 130,000
</h4>
<p class="category">Feedback from 20.000 users</p>
</div>
</div>
</card>
Line Chart props
PROP NAME | TYPE | DEFAULT | DESCRIPTION |
---|---|---|---|
extraOptions | Object | N/A | |
gradientColors | Array | [ “rgba(72,72,176,0.2)”, “rgba(72,72,176,0.0)”, “rgba(119,52,169,0)” ] | |
gradientStops | Array | [ 1, 0.4, 0 ] |
Bar Chart props
PROP NAME | TYPE | DEFAULT | DESCRIPTION |
---|---|---|---|
extraOptions | Object | N/A | |
gradientColors | Array | [ “rgba(72,72,176,0.2)”, “rgba(72,72,176,0.0)”, “rgba(119,52,169,0)” ] | |
gradientStops | Array | [ 1, 0.4, 0 ] |
Pie Chart props Pro
PROP NAME | TYPE | DEFAULT | DESCRIPTION |
---|---|---|---|
extraOptions | Object | N/A | |
gradientColors | Array | [ “rgba(72,72,176,0.2)”, “rgba(72,72,176,0.0)”, “rgba(119,52,169,0)” ] | |
gradientStops | Array | [ 1, 0.4, 0 ] |