How to set chart fixed height?

[ras24]

I want to make a fixed height bar chart .

This is the code :

<template>
  <h2>Bar Chart</h2>
  <div style="height: 700px">
    <vue3-chart-js v-bind="{ ...barChart }" />
  </div>
</template>

<script>
import Vue3ChartJs from "@j-t-mcc/vue3-chartjs";

export default {
  name: "App",
  components: {
    Vue3ChartJs,
  },
  setup() {
    const barChart = {
      type: "bar",
      options: {
        min: 0,
        max: 100,
        responsive: true,
        plugins: {
          legend: {
            position: "top",
          },
        },
        scales: {
          y: {
            min: -100,
            max: 100,
            ticks: {
              callback: function (value) {
                return `${value}%`;
              },
            },
          },
        },
      },
      data: {
        labels: ["VueJs", "EmberJs", "ReactJs", "AngularJs"],
        datasets: [
          {
            label: "My First Dataset",
            backgroundColor: ["#1abc9c", "#f1c40f", "#2980b9", "#34495e"],
            data: [40, 20, 50, 10],
          },
          {
            label: "My Second Dataset",
            backgroundColor: ["#2ecc71", "#e67e22", "#9b59b6", "#bdc3c7"],
            data: [-40, -20, -10, -10],
          },
        ],
      },
    };

    return {
      barChart,
    };
  },
};
</script>

I already try to set the height to 700px

<div style="height: 700px">
  <vue3-chart-js v-bind="{ ...barChart }" />
</div>

But it's not working, chart height doesn't change at all.

How to set bar chart fixed height?

[Jack2104]

I have this issue too

[ras24]

Please help to solve this problem

[Jack2104]

@ras24 I literally have no idea what to do, @J-T-McC any ideas?

[J-T-McC]

Sorry, pretty busy these days.

I have added fixed width and height properties. They must be used with options.responsive: false

    const lineChart = {
      type: 'line',
      height: 200,
      width: 500,      
      options: {
        responsive: false
      },
      data: {
        // ...
      },
    }

If you are using responsive charts and you want your chart to conform to the parent container dimensions you can try using options.maintainAspectRatio: false,

[Jack2104]

Awesome, it's working now. @ras24 your issue should be solved, so this issue can be closed

[ras24]

@J-T-McC thank you very much for your help, it's working now.