Dynamic chart height in React

• September 10, 2019 at 11:23 pm #26737
  
  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)

  September 12, 2019 at 2:09 am #26753
  
  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