Home forums Report Bugs Dynamic chart height in React

This topic contains 1 reply, has 2 voices, and was last updated by  Shashi Ranjan 6 days, 21 hours ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #26737

    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)
    #26753

    @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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.