In this article, we will learn how to resize the bar chart.
Step 1: Create a new Vue project:
vue create auto-height-resize-demo
Step 2: Install require packages:
npm i highcharts-vue highcharts
Step 3: Open main.js file and add the following in it:
import { createApp } from 'vue' import App from './App.vue' import HighchartsVue from 'highcharts-vue' createApp(App).use(HighchartsVue).mount('#app')
Step 4: Create Hightchart.vue file and add the following in it:
<template> <div> <highcharts :options="chartOptions" ref="chart" /> </div> </template> <script> export default { name: 'HighChart', data(){ return{ chartOptions: { chart: { type: "bar", style: { fontFamily: "Damion", fontSize: 17 }, events: { load: function() { let categoryHeight = 35; this.update({ chart: { height: categoryHeight * this.pointCount + (this.chartHeight - this.plotHeight) } }); } } }, title: { text: "Number of notes in total : 70", style: { fontSize: 25 } }, xAxis: { categories: [ "C#", "Dise\u00f1o Web", "GitHub", "Guitarra", "Java", "Javascript", "PHP", "Python", ], labels: { style: { fontSize: 17 } }, title: { text: "Categorias" } }, yAxis: { min: 0, title: { text: "Notas", align: "high" }, labels: { style: { fontSize: 17 }, overflow: "justify" } }, tooltip: { useHTML: true, style: { fontSize: 17 }, formatter: function() { return "Cantidad de notas: " + this.point.y; } }, plotOptions: { series: { dataLabels: { //enabled:true, }, events: { legendItemClick: function() { return false; } } } }, legend: { reversed: true, itemStyle: { fontSize: 12 } }, credits: { enabled: false }, series: [ { name: "Notas", //pointWidth: 50, data: [ { name: "C#", y: 9 }, { name: "Dise\u00f1o Web", y: 13 }, { name: "GitHub", y: 1 }, { name: "Guitarra", y: 1 }, { name: "Java", y: 1 }, { name: "Javascript", y: 3 }, { name: "PHP", y: 1 }, { name: "Python", y: 7 }, ] } ], navigation: { menuItemStyle: { fontSize: 12 } } } } } } </script> <style scoped> h3 { margin: 40px 0 0; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>
Step 5: Open App.vue file and add the following in it:
<template> <img alt="Vue logo" src="./assets/logo.png"> <Highchart /> </template> <script> import Highchart from './components/Highchart.vue' export default { name: 'App', components: { Highchart } } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
Code in Action: