How to Use Vue Charts in a Vue Project demo repo

Vue Charts is a wrapper for ChartJs based on Vue 2.0.

👣 Steps

  1. Create a Vue project and install ChartJs and Vue Charts.
npm i -g @vue/cli
vue create vue-demo
cd vue-demo
npm i chart.js hchs-vue-charts
  1. Register Vue Charts in src/main.js.
import "chart.js";
import "hchs-vue-charts";
Vue.use(window.VueCharts);
  1. Use Vue Charts, e.g. in src/views/chart.vue.
<template>
  <div>
    <h1>Chart Demo</h1>

    <div class="grid">
      <ChartBar />
      <ChartDoughnut />
      <ChartLine />
    </div>
  </div>
</template>

<script>
import ChartBar from "@/components/chart-bar";
import ChartDoughnut from "@/components/chart-doughnut";
import ChartLine from "@/components/chart-line";

export default {
  components: {
    ChartBar,
    ChartDoughnut,
    ChartLine
  }
};
</script>

<style lang="scss" scoped>
.grid {
  display: grid;
  row-gap: 2rem;
}
</style>

In src/components/chart-bar.vue:

<template>
  <div class="card">
    <div class="card-body">
      <h2 class="card-title">Bar</h2>
    </div>

    <div class="card-img-bottom">
      <canvas id="fooCanvas" count="2" />

      <chartjs-bar
        v-for="(item, index) in types"
        :key="index"
        :backgroundcolor="item.bgColor"
        :beginzero="beginZero"
        :bind="true"
        :bordercolor="item.borderColor"
        :data="item.data"
        :datalabel="item.dataLabel"
        :labels="labels"
        target="fooCanvas"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      beginZero: true,
      labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
      types: [
        {
          bgColor: "#de98ab",
          borderColor: "0c0306",
          data: [1, 3, 5, 7, 2, 4, 6],
          dataLabel: "Bar"
        },
        {
          bgColor: "#98ddde",
          borderColor: "030c0c",
          data: [1, 5, 2, 6, 3, 7, 4],
          dataLabel: "Baz"
        }
      ]
    };
  }
};
</script>

In src/components/chart-doughnut.vue:

<template>
  <div class="card">
    <div class="card-body">
      <h2 class="card-title">Doughnut</h2>
    </div>

    <div class="card-img-bottom">
      <chartjs-doughnut
        :bind="true"
        :datasets="datasets"
        :labels="labels"
        :option="option"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      datasets: [
        {
          data: [10, 20, 40],
          backgroundColor: ["#f36e60", "#ffdb3b", "#185190"],
          hoverBackgroundColor: ["#fbd2cd", "#fef5c9", "#d1e3f7"]
        }
      ],
      labels: ["Foo", "Bar", "Baz"],
      option: {}
    };
  }
};
</script>

In src/components/chart-line.vue:

<template>
  <div class="card">
    <div class="card-body">
      <h2 class="card-title">Line</h2>

      <div class="btn-group btn-group-toggle">
        <label
          v-for="(item, index) in btn"
          :key="index"
          :class="{ active: item.value == radio }"
          class="btn btn-success"
        >
          <input
            v-model="radio"
            :name="dataLabel"
            :value="item.value"
            type="radio"
          />
          {{ item.label }}
        </label>
      </div>
    </div>

    <div class="card-img-bottom">
      <chartjs-line
        :backgroundcolor="bgColor"
        :beginzero="beginZero"
        :bind="true"
        :bordercolor="borderColor"
        :data="data[radio]"
        :datalabel="dataLabel"
        :labels="labels[radio]"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bgColor: "#81894e",
      beginZero: true,
      borderColor: "#81894e",
      btn: [
        { label: "Today", value: "day" },
        { label: "This Week", value: "week" }
      ],
      data: {
        day: [1, 3, 5, 3, 1],
        week: [12, 14, 16, 18, 11, 13, 15]
      },
      dataLabel: "Foo",
      labels: {
        day: [8, 10, 12, 14, 16],
        week: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
      },
      radio: "day"
    };
  }
};
</script>

📖 Explanation

Bar

  • Use canvas to add many charts.
  • backgroundcolor changes the background color.
  • beginzero makes the chart starts from zero if set to true.
  • bind makes the chart re-render when the data changes, if set to true.
  • bordercolor specifies the border color.
  • data accepts an array of data.
  • datalabel is for the data name.
  • labels sets the x-axis labels.

Doughnut

  • datasets is useful for changing many things at once.
  • hoverBackgroundColor is for setting the background color when it is hovered over.
  • option with empty object is needed due to this issue.
Last updated: 6/21/2019, 2:32:45 AM