Home forums Using CanvasJS Resize issue in canvas react charts

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

    skp

    I’m facing a resize issue in canvasjs reactjs doughnut and bubble charts, the fact is that it is working good in mobile view but whenever the sidemenu is closed or open, it does not fit in or not responsive.
    `import React, { Component } from “react”;
    import CanvasJSReact from “../../../assets/canvasjs/canvasjs.react”;
    var CanvasJSChart = CanvasJSReact.CanvasJSChart;

    class DoughnutChart extends Component {
    constructor(props) {
    super(props);
    this.state = {
    options: {},
    };
    }

    componentDidMount() {
    this.chartDetails();
    }

    componentDidUpdate(prevProps) {
    if (prevProps.data != this.props.data) {
    this.chartDetails();
    }
    }

    chartDetails() {
    this.setState({
    options: {
    interactivityEnabled: true,
    animationEnabled: true,
    animationDuration: 1000,
    backgroundColor: “transparent”,

    legend: {
    horizontalAlign: “center”,
    verticalAlign: “bottom”,
    },
    data: [
    {
    type: “doughnut”,
    startAngle: 270,
    radius: “90%”,
    showInLegend: this.props.legend,
    innerRadius: “50%”,
    indexLabel: “{y}”,
    toolTipContent: “{name}: {y}“,
    indexLabelPlacement: “outside”,
    dataPoints: dataPoints,
    },
    ],
    },
    });
    }

    render() {
    return <CanvasJSChart options={this.state.options} />;
    }
    }

    export default DoughnutChart;

    #29516

    @skp,

    Re-rendering the chart on closing and opening the sidemenu should work fine in your case.

    If you are still facing the issue, kindly create a sample project reproducing the issue and share it with us over Google-Drive or Onedrive along with sample data so that we can look into the code, understand your scenario better and help you out.

    —-
    Manoj Mohan
    Team CanvasJS

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

You must be logged in to reply to this topic.