Home Forums Report Bugs Dynamic chart height in React

Dynamic chart height in React

Viewing 2 posts - 1 through 2 (of 2 total)
  • #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.


      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 {
        const { chartData } = this.props
        const options = {
          zoomEnabled: true,
          zoomType: "x",
          animationEnabled: true,
          exportEnabled: true,
            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}/>
        const { chartData } = this.props
                <div className='chartContainer'>
                 { chartData && this.chart() }
    const mapStateToProps = (state) => {
      return {
        chartData:   state.chartData
    export default connect(mapStateToProps)(Chart)


    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.