Adjust the height setting of the React-Highcharts viewport

Question

Adjust the height setting of the React-Highcharts viewport

My initial configuration for highcharts looks like this:-

function getInitialHighChartsConfig(chartType) {
  return {
    credits: false,
    chart: {
      type: chartType,
      height: 325,
    },
    title: {
      text: '',
      useHTML: true,
    },
    yAxis: {
      title: {
        text: '',
      },
      allowDecimals: false,
    },
    xAxis: {
      title: {
        text: '',
      },
      allowDecimals: false,
    },
    plotOptions: {},
    series: {},
  };
}

The height has been set to 325. This results in an SVG Element like below

<svg version="1.1" class="highcharts-root " style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Arial, Helvetica, sans-serif;font-size:12px;" xmlns="http://www.w3.org/2000/svg" width="1120" height="325" viewBox="0 0 1120 325">

I would like the height to be 400 instead of 325 while keeping the viewbox as it is. Is there a way to achieve this?

javascript reactjs highcharts

Answer 1

Answer №1

To modify the boxWrapper attributes during the render() chart event, follow this example:

  chart: {
    height: 400,
    events: {
      render() {
        let chart = this;
        chart.renderer.boxWrapper.attr({
          viewBox: '0 0 ' + chart.chartWidth + ' ' +
            325
        });
      }
    }
  }

See it in action: https://jsfiddle.net/BlackLabel/z0qg9ow7/

Answer 2

To modify the boxWrapper attributes during the render() chart event, follow this example:

  chart: {
    height: 400,
    events: {
      render() {
        let chart = this;
        chart.renderer.boxWrapper.attr({
          viewBox: '0 0 ' + chart.chartWidth + ' ' +
            325
        });
      }
    }
  }

See it in action: https://jsfiddle.net/BlackLabel/z0qg9ow7/

Adjust the height setting of the React-Highcharts viewport

Answer №1

Similar questions

Unable to retrieve information from the json-server

Utilizing React Native Camera Kit allows for the seamless and continuous scanning of QR codes, offering multiple callbacks when a code is

Loading Textures in Three.js Using async / await is the Way to Go

Tips for adjusting the content direction of a Popover

Center Items in Flexbox, Implementing React Material with React

Tips for eliminating empty trailing values and Carriage Returns from a JavaScript array

Vue automatically populates an empty array with an Observer object

Is it possible to invoke React's useState and useCallback multiple times within a singular functional component? And if it is, how exactly does the process function?

How can the animation of Material UI expansion panel be turned off?

Simple way to automatically reload your script using an npm server

Mastering the art of utilizing AJAX for autocomplete functionality

Change the view using React before scrolling to a specific element on the page

Issues with Autofocus in AngularJs on Firefox

When using React, it's important to verify if the page has been refreshed before updating the local storage based on the GraphQL query. If the page

Show a success message, clear the post data, and redirect back to the current page

Secure access with Next.js, next-auth, and backend with Node.js

How can Vue JS 3 components exchange data between each other?

Is it feasible to incorporate an external library as a script within a class or functional component in React?

VS Code lacks autocomplete intellisense for Cypress

Refining/searching with selectors in AJAX response