Highcharts-Vue is an easy to use library that lets us add charts to our Vue apps.
In this article, we’ll look at how to add charts with the highcharts-vue library.
Line Chart
We can add a line chart by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import HighchartsVue from "highcharts-vue";
Vue.use(HighchartsVue);
new Vue({
el: "#app",
render: (h) => h(App)
});
App.vue
<template>
<div>
<highcharts class="hc" :options="chartOptions" ref="chart"></highcharts>
</div>
</template>
<script>
export default {
data() {
return {
chartOptions: {
series: [
{
data: [1, 2, 3],
},
],
},
};
},
};
</script>
We register the HighchartsVue plugin and then use the highcharts component within App.vue .
The data for the y-axis is in the series.data property.
Gantt Chart
To create a Gantt chart, we write:
main.js
import Vue from "vue";
import App from "./App.vue";
import Highcharts from "highcharts";
import Gantt from "highcharts/modules/gantt";
import HighchartsVue from "highcharts-vue";
Gantt(Highcharts);
Vue.use(HighchartsVue);
new Vue({
el: "#app",
render: (h) => h(App)
});
App.vue
<template>
<div>
<highcharts
:constructorType="'ganttChart'"
class="hc"
:options="chartOptions"
ref="chart"
></highcharts>
</div>
</template>
<script>
export default {
data() {
return {
chartOptions: {
title: {
text: "Gantt Chart with Progress Indicators",
},
xAxis: {
min: Date.UTC(2021, 10, 17),
max: Date.UTC(2021, 10, 30),
},
series: [
{
name: "Project 1",
data: [
{
name: "Start",
start: Date.UTC(2021, 10, 18),
end: Date.UTC(2021, 10, 25),
completed: 0.25,
},
{
name: "Test",
start: Date.UTC(2021, 10, 27),
end: Date.UTC(2021, 10, 29),
},
{
name: "Develop",
start: Date.UTC(2021, 10, 20),
end: Date.UTC(2021, 10, 25),
completed: {
amount: 0.12,
fill: "#fa0",
},
},
{
name: "Test Again",
start: Date.UTC(2021, 10, 23),
end: Date.UTC(2021, 10, 26),
},
],
},
],
},
};
},
};
</script>
We call the Gantt function in main.js to let us add Gantt charts.
Then we can use the highcharts component to render the chart.
The title has the title.
xAxis has the x-axis value range.
series has the data.
name has the name for the bar.
start and end are the start and end dates.
completed has the progress value.
Conclusion
We can add a line and Gantt chart easily with highcharts-vue.
