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

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