CODEWITHSUNDEEP
javascriptreactjshighcharts
Neha Chaudhary
Neha Chaudhary

Reputation: 1259

change the height of react-highcharts viewbox

I have init config for my highcharts 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: {},
  };
}

I have set the height of this at 325. And it gives me a 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 want the height to be 400 and not 325 but I want the viewbox to remain as it is. Is there any way to achieve this.

Upvotes: 0

Views: 189

Answers (1)

magdalena
magdalena

Reputation: 3695

You can overwrite the boxWrapper attributes on render() chart event:

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

Demo: https://jsfiddle.net/BlackLabel/z0qg9ow7/

Upvotes: 1

Related Questions