AngularGauge don't change dynamic height on resize

[Evgeny Malafeev]

Hello.

 

I have a AngularGauge chart with Vue.js.

I configure gauge for dynamic resizing, like in manual.

Code of my component: 

```

<template>

  <div id="chart-container">

    <fusioncharts

      :type="type"

      :width="width"

      :height="height"

      :data-format="dataFormat"

      :data-source="chartData"

    >

    </fusioncharts>

  </div>

</template>

 

<script>

import { mapState } from "vuex";

 

export default {

  name: "AngularGauge",

  props: {

    dataValue: String,

    title: String,

    colorRange: Object

  },

  computed: {

    ...mapState({

      switchedTheme: state => state.switchedTheme

    }),

    chartData() {

      return {

        chart: {

          manageResize: "1",

          captionFont: "Roboto-Light",

          captionFontColor: this.switchedTheme ? "#262626" : "#ffffff",

          captionFontSize: "20",

          captionFontBold: "0",

          bgColor: this.switchedTheme ? "#ffffff" : "#262626",

          usePlotGradientColor: "1",

          pivotFillAlpha: "0",

          pivotBorderAlpha: "0",

          valueFont: "Roboto-Regular",

          valueFontSize: "40rem",

          valueFontColor: "#3F903E",

          valueBorderRadius: "3",

          valuePadding: "10",

          lowerLimit: this.colorRange.minRangeValue,

          upperLimit: this.colorRange.maxRangeValue,

          lowerLimitDisplay: this.colorRange.minRangeValue,

          upperLimitDisplay: this.colorRange.maxRangeValue,

          showValue: this.dataValue,

          valueBelowPivot: "1",

          theme: "fusion"

        },

        colorRange: {

          color: [

            {

              minvalue: this.colorRange.low.minvalue,

              maxvalue: this.colorRange.low.maxvalue,

              code: "#3B953A"

            },

            {

              minValue: this.colorRange.middle.minvalue,

              maxValue: this.colorRange.middle.maxvalue,

              code: "#E3A402"

            },

            {

              minValue: this.colorRange.max.minvalue,

              maxValue: this.colorRange.max.maxvalue,

              code: "#C22424"

            }

          ]

        },

        dials: {

          dial: [

            {

              radius: 165,

              baseWidth: 145,

              baseRadius: 25,

              topWidth: 1,

              rearExtension: 0,

              value: this.dataValue,

              valueY: 213,

              bgColor: this.switchedTheme ? "#006FBA" : "#793DC0"

            },

            {

              radius: 132,

              baseWidth: 148,

              bgColor: this.switchedTheme ? "#ffffff" : "#262626",

              borderAlpha: 0,

              baseRadius: 25,

              topWidth: 40,

              rearExtension: 2,

              value: this.dataValue,

              showValue: "0"

            }

          ]

        },

        annotations: {

          origw: 500,

          origh: 272,

          autoscale: "1"

        }

      };

    }

  },

  data() {

    return {

      type: "angulargauge",

      renderAt: "chart-container",

      width: "100%",

      height: "100%",

      dataFormat: "json"

    };

  }

};

</script>

 

<style>

#chart-container {

  position: relative;

  width: 100%;

  height: 100%;

}

</style>

```

 

I added width and height for component in percents. And added menageResize: "1", autoScale: "1".

But when I resize a page, AngularGauge only change your width. Height didn't change at all.

In console I have this errors: 

```

fusioncharts.js?8f68:13 Error: <path> attribute d: Expected number, "MNaN,NaNQ0,0,NaN,…".
e._setFillAndStroke @ fusioncharts.js?8f68:13

```

How can I fix this problem ?

[Akash Biswas]

Hi,

 

FusionCharts allows you to provide the chart "height" and "width" either in pixels or in percentage. If you are setting in percentage, in that case the container div must be provided with the height/width in pixels as in this sample :

https://codesandbox.io/s/chord-chart-and-button-click-setjsondata-column2d-vue-b3ylq?file=/src/App.vue

You can also set the container dimension dynamically in your implementation accordingly. Check the below link for reference :

https://stackoverflow.com/questions/51869011/change-fusion-chart-division-height-and-width/52167057#52167057

 

Thanks,

Akash.

[Evgeny Malafeev]

Hi, Akash.

Thanks, for your answer.

In your sample, where container dimension change dynamically, height for container has static value: 350px.

In my case, I need dynamically change width and height for container with AngularGauge. Because when I open page on wide screen 55" 3840x2160 px container will grow and I need the chart increased in width and height, respectively.

And I can't set static value for width/height chart-container.

[Evgeny Malafeev]

I added minimum working example on CodeSandbox.

In this example, it is seen that when resizing the window with the container, the chart will change only in the width of the container. The height value does not change and remains the same. I added a pink background color for the container to make it more visual.

What is wrong with this code and how can I fix it?

Please need your help.

How to make the chart dynamically change according to the height of its container?

[Akash Biswas]

Hi,

 

- Setting the container dimension :

The container(div) dimension could be set in percentage. If the "height" is set in percentage, in that case the percentage is calculated with respect to the height of the one-level up that is its containing block. If the height of the containing block is not specified explicitly then it will have nothing to determine the height.
For an elaborate explanation on why height in percentage is not working, please check this reference link : https://stackoverflow.com/questions/31728022/why-is-percentage-height-not-working-on-my-div/31728799#31728799

 

- FusionCharts dimension in percentage :

FusionCharts has the capability to automatically take the container div dimension when the chart "height" and "width" configuration values are set in percentage. Provided that you have taken care to set the container div dimension explicitly or dynamically(as in your use-case) accordingly in your implementation.
Setting the container div dimension is not within FusionCharts scope, and must be taken care in the implementation.
Chart dimension in percentage documentation link : https://www.fusioncharts.com/dev/chart-guide/chart-configurations/size-and-type

 

Thanks,

Akash.

[Evgeny Malafeev]

Hi, Akash.

I carefully studied the materials you attached.

Since I set the height of the graph container as a percentage, I need to explicitly specify the height of all parents, up to the html tag. In my sandbox example, I explicitly set the height for all the parent elements.

html {
  height: 100vh;
}
body {
  height: 100vh;
  margin: 0;
}
#app {
  width: 100%;
  height: 100vh;
}

#chart-container {
  width: 100%;
  height: 100%;
  background-color: pink;
}

But the chart when resizing the window still does not change its height.

Maybe the problem is in some other property?
Maybe you have a working example of codeSandbox or something similar, where the Angular Gauge dynamically changes its size in width and height when resizing a window?

 

[Akash Biswas]

Hi,

 

As mentioned that setting the HTML element dimension is not within FusionCharts scope, and must be taken care in the implementation as per your requirement. On that context the chart would take the element container dimension accordingly when the chart configuration "height" and "width" parameters are set in percentage. To make the container dynamic in your HTML template, it need to be set accordingly at your end.

However, you can refer to this sample that it works fine with the Angular Gauge on resizing the window, and there is no problem with any configuration or property with respect to the chart : http://jsfiddle.net/8cuf7Lho/3/

 

Thanks,

Akash.

[Evgeny Malafeev]

Hi, Akash.

I carefully studied your working example on jsfiddle, and here's what I noticed.

You use native javascript and the following html markup is created for the chart:

div.class="chart-container" > span.class="fusioncharts-container" > svg(with chart).

 And this example works fine when changing width / height.

But I use Vue.js and vue-fusioncharts. And in my case I get next html-markup:

div.class="chart-container" > div#id="fc-'number'" > span.class="fusioncharts-container" > svg(with chart).

I have one div element after chart-container. Maybe it is feature vue-fusioncharts ?

This div has no sizes. And when I dynamically change dimensions my chart, It no change your height. It was my problem.

How can I fix this?

I added next CSS code for my vue-component: 

#chart-container > div {
  width: 100%;
  height: 100%;
}

And it work great!

Maybe this post can someone else solve a similar problem.

Thank you so much, Akash for your help!