Dynamic chart height in React

[offwhite]

I’m currently moving a project over to a react app and a chart that I’m rendering, while it has no height set, and the container it’s rendered in has an explicit height (eg: 900px), the chart is still rendered with the default 400px height.

The outputted dom and chart options are the same for both the react and pure html versions, but the react chart maintains the default height.

css:

.chartContainer{
  height: calc(100vh - 150px);
}

The react component:

import React, {Component} from 'react'
import PropTypes from 'prop-types'

const CanvasJSReact = require('../lib/canvasjs.react');
const CanvasJSChart = CanvasJSReact.default.CanvasJSChart;

class Chart extends Component {
  chart(){
    const { chartData } = this.props

    const options = {
      zoomEnabled: true,
      zoomType: "x",
      animationEnabled: true,
      exportEnabled: true,
      toolTip:{
        content: "{name}: {legendText}: {y} {label}"
      },
      axisX: {
        labelFontSize: 12,
        crosshair: {enabled: true}
      },
      axisY: {
        labelFontSize: 12,
        interval: 20,
        gridThickness: 0.5,
        gridColor: "#999999",
        crosshair: {enabled: true}
      },
      data: chartData
    }

    return (
      <CanvasJSChart options={options} onRef={ref => this.chart = ref}/>
    );
  }

  render(){
    const { chartData } = this.props

    return(
            <div className='chartContainer'>
             { chartData && this.chart() }
           </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    chartData:   state.chartData
  }
}

export default connect(mapStateToProps)(Chart)

[Shashi Ranjan]

@offwhtie,

Passing the height value as a property of containerProps should work fine in your case. Please take a look at this example for the same.

—
Shashi Ranjan
Team CanvasJS