Auto Height Resize In Bar Chart

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: