Vue-chartjs: How to set a dynamic height and width whilst having responsive = true?

[ChadTaljaardt]

Expected Behavior

I want to allow a user to add widgets to their dashboard, these widgets can be resized by clicking and dragging the card to a specified height,

When i click and drag to shorted the width of the card, the chart renders correctly staying in the centre of the card and resizing appropriately, however if i do the same with the height of the card, i want the same functionality which it currently doesn't allow.

Actual Behavior

When i resize width, it works properly. When i resize height, the card can end up being smaller than the graph and the graph ends up overlaying the card.

Environment

• vue.js version: 2.3.3
• vue-chart.js version: ^3.0.2
• npm version: 5.5.1

[ChadTaljaardt]

This is an example of the issue im having where the card height is less than the height of the graph.

[ChadTaljaardt]

https://github.com/jbaysolutions/vue-grid-layout

This is the package im using for the dashboard widget system which might help.

[apertureless]

With 2.8.0: https://github.com/apertureless/vue-chartjs/releases/tag/v2.8.0
Dynamic styles got introduced.

<template>
     <div>
       <line-chart :styles="myStyles"/>
       <button @click="increase()">Increase height</button>
     </div>
</template>

<script>
export default {
  data () {
    return {
      height: 300
    }
  },
  methods: {
    increase () {
     this.height += 10
    }
  },
  computed: {
    myStyles () {
      return {
        height: `${this.height}px`,
        position: 'relative'
      }
    }
  }
}
</script>

You can pass a style object with the height to the styles prop. I guess vue-grid has some kind of api exposing the width and height of the widget. You could grab that and put it into the computed style.

Have to btw. tried to set the maintainAspectRatio to true?

[ChadTaljaardt]

Setting the aspect ratio to true works in terms of resizing the height, but then it can end up going larger than the card itself if the card is longer horizontally than vertically.

And the method works if there is 1 element, but i have multiple elements and need to figure out how to make it work with many of them, i tried to use a method instead of a computed property because computed properties cant accept props but its not working for me.

[apertureless]

Thats weird.
According to the docs, this should work.

http://www.chartjs.org/docs/latest/general/responsive.html

https://codepen.io/chartjs/pen/YVWZbz

Are you setting position: relative to the widget ?

[ChadTaljaardt]

Ill give it another go and trying to get it to work and reply.

[apertureless]

I guess passing position: relative should fix this. As the vue-grid-layout items are positioned absolute.

So adding a class with position relative to the chart should help.

[ChadTaljaardt]

@apertureless https://gist.github.com/ChadTaljaardt/d8840c5ba6342566dad734bcfc09d937

I still cant seem to get this working, do you see what im doing wrong here?

[ChadTaljaardt]

@apertureless Hello, have you been able to see if you can see any issues with it?

[apertureless]

@ChadTaljaardt

Hey,
it is hard to debug, if you can't run the code :P
However it seems there is somewhere an issue with your css, because vue-chart.js works fine with vue-grid-layout if you set

position: relative;
width: 100%;
height: 100%;

on the parent div.

See https://codepen.io/apertureless/pen/jZOBeV

[iAminaDarwish]

<template>
  <div class="chartWrapper">
    <div class="chartContainer" :style="{minWidth:100*chartt.labels.length+'px'}">
      <barChart
        :showLabel="true"
        :renderedLabel="chartt.renderedLabel"
        :labels="chartt.labels"
        :datasets="chartt.datasets"
      />
    </div>
  </div>
</template>

<script>
import barChart from "../components/barChart";

export default {
  mixins: [],
  components: {
    barChart
  },
  props: [],
  data() {
    return {
      chart: {
        type: "bar",
        title: "user1",
        renderedLabel: "label",
        class: "col-md-6 col-xs-12",
        datasets: [
          {
            label: "user1",
            backgroundColor: ["#f48fb1", "#f2c037"],
            borderWidth: 0,
            hoverBorderColor: "white",
            hoverBorderWidth: 2,
            datawithdates: [
              {
                IDUpdated: "8454",
                userUpdated: "user1",
                updateDate: "2020-04-09"
              },
              {
                IDUpdated: "87178",
                userUpdated: "user1",
                updateDate: "2020-04-09"
              }
            ],
            data: [5, 0]
          }
        ],
        labels: ["2020-04-09", "2020-04-10"]
      }
    };
  }
};
</script>

<style >
div.chartWrapper {
  position: relative;
  overflow-x: auto;
  width: 100%;
}

div.chartContainer {
  position: relative;
}
</style>