tyahav
Posts: 15
Joined: Thu Jul 01, 2021 7:37 am

Make the height property as dynamic value

Hi,

I'm trying to be able and set Height automatically when resizing the screen sizes.
Currently, I am setting the size to be with default size when it *loads*, but then I'm resizing the screen the height of the graph keeps the same and does not change.
I am returning the object (Highcharts is set as global usage), I don't know how to change it for using the 'setSize' method or 'reflow()' as it looks like my solution for this.
I am using Vue and TS in my client code.

I'm using Chart as follows:

Code: Select all

    const miniHeight = () => {
      if (window.innerHeight < 1080) {
        return 280;
      } else {
        return 340;
      }
    };

    const expandedHeight = () => {
      if (window.innerHeight >= 900 && window.innerHeight < 1020) {
        return 450;
      } else if (window.innerHeight >= 1020 && window.innerHeight < 1080) {
        return 400;
      } else if (window.innerHeight >= 1080) {
        return 500;
      }
    };

Code: Select all

    
    return {
      chart: {
        type: "spline",
        height: expanded ? expandedHeight() : miniHeight(),
        spacingTop: 20,
        spacingRight: 30,
        animation: false,
      },
      title: {
        text: "",
        align: "left",
        x: 80,
        y: 10,
        style: {
          display: "block",
          fontSize: "14px",
          paddingLeft: "80px",
          fontWeight: "500",
          fontFamily: "Gotham",
          color: "black",
        },
      },
      xAxis: {
        crosshair: {
          width: 1,
          color: "#CCCCCC",
        },
      plotOptions: {
        spline: {
          marker: {
            enabled: false,
            symbol: "circle",
          },
        },
        series: {
          events: {
            legendItemClick: function() {
              return false;
            },
            pointPlacement: "on",
            pointStart: 0,
          },
        },
      },
      series: [{
          name: "Facing",
          data: dataSeries.mainGraph,
          color: "#6A7EC7",
          lineWidth: 3,
          yAxis: 0,
          visible: true,
        },
      ],
    };
Thank you,
Tom
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Make the height property as dynamic value

Hello,

Thanks for contacting us with your question!

You can do this in two ways. Using setSize() function:
Demo: https://jsfiddle.net/BlackLabel/5q1tLp93/
API: https://api.highcharts.com/class-refere ... rt#setSize

Or using responsive property:
Demo: https://jsfiddle.net/BlackLabel/sq0u5pLd/
API: https://api.highcharts.com/highcharts/responsive

Let me know if that was what you were looking for!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
Eddie_V2
Posts: 1
Joined: Fri May 26, 2023 3:16 pm

Re: Make the height property as dynamic value

wierd, when using your sollution I am getting the followiing error:

update is not a function
jedrzej.r
Posts: 725
Joined: Tue Jan 24, 2023 11:21 am

Re: Make the height property as dynamic value

Hi!

Welcome to our forum and thanks for reaching out to us with your issue!

Could you please reproduce this issue in a live editor? You can start by editing this fiddle: https://jsfiddle.net/BlackLabel/0pbeym97/. Without it, I won't be able to help you and find a solution to your problem.

I'm waiting for your reply.
Best regards!
Jędrzej Ruta
Highcharts Developer

Return to “Highcharts Usage”