ChartComponent will not resize together with DashboardLayout panel

[torgeir tislevoll]

Hi

I am trying to design a simple dashboard with panels containing different ChartComponents.

I followed the guide you have on youtube here : https://www.youtube.com/watch?v=pj5wrwHhJk8

This is my Dashboard component:

const DashboardLayoutTEST = () => {

   

    const panels = [

        { id: 'Panel 1', header: '<div>Panel 1</div>', content: () => <LineChart id="chart1" />, col: 0, sizeY: 2, minSizeY: 1, maxSizeY: 2 },

        { id: 'Panel 2', header: '<div>Panel 2</div>', content: () => <LineChart id="chart2" />, col: 1, row: 0 },

        { id: 'Panel 3', header: '<div>Panel 3</div>', content: () => <LineChart id="chart3" />, col: 2 },

        { id: 'Panel 4', header: '<div>Panel 4</div>', content: () => <LineChart id="chart4" />, col: 1, row: 1, sizeX: 2, minSizeX: 1, maxSizeX: 2 }

    ];

    return (

        <div className="App">

            <DashboardLayoutComponent

                panels={panels}

                columns={3}

                allowDragging={true}

                allowResizing={true}>

            </DashboardLayoutComponent>

        </div>

    );

}

export default DashboardLayoutTEST

LineChart component:

const LineChart : React.FC<LineChartProps> = ({id}) => {

  const colorMode = useSelector((state: RootState) => state.application.colorMode);

  return (

    <ChartComponent

      id={id}

      height='100%'

      resized={() => {console.log("does not print anything")}}

      primaryXAxis={LinePrimaryXAxis}

      primaryYAxis={LinePrimaryYAxis}

      chartArea={{ border: { width: 0 } }}

      tooltip={{ enable: true }}

   

     

      background={colorMode === 'Dark' ? '#33373E' : '#D3D3D3'}

    >

      <Inject services={[LineSeries, DateTime, Legend, Tooltip]} />

      <SeriesCollectionDirective>

        {lineCustomSeries.map((item, index) =>

          <SeriesDirective key={index} {...item} />

        )}

      </SeriesCollectionDirective>

    </ChartComponent>

  )

}

export default LineChart

Whenever I try to resize the panels, the LineChart will not follow:

 

I have tried using 

• height: "100%"
• height: "100% width "100%"

Is there something I am missing?

I also tried this using react-grid-layout instead and I had the exact same issue, so im thinking this has something to do with the ChartCo

[Jafar Ali Shahulhameed]

Hi Torgeir,

Based on the shared details we can understand that you are tying to utilize Syncfusion Dashboard Layout component with charts and facing an issue while resizing the panel. We have prepared the sample aligning with your requirements and replicated the issue and it can be resolved by calling the Dashboard Layout component’s refresh method. Kindly refer the code changes below,

const onPanelResize = (args) => {

    if (args.element && args.element.querySelector('.e-panel-container .e-panel-content div div')) {

        let chartObj = (args.element.querySelector('.e-panel-container .e-panel-content div div')).ej2_instances[0];

        chartObj.height = '95%';

        chartObj.width = '100%';

        chartObj.refresh();

    }

};

We have also attached the sample for your reference,

Sample: https://stackblitz.com/edit/react-w81anu-dzslvh?file=index.js

Kindly check out the shared details and get back to us if you need further assistance.

Regards,

Jafar

[torgeir tislevoll]

Thanks a bunch, worked perfect

[torgeir tislevoll]

Do you have an example in typescript how to resize the charts inside panels if the charts are imported functional components?

I am trying it like this

const DashboardTest: React.FC = () => {

  const dashboardObj = useRef(null);

  const cellSpacing = [10, 10];

  const onPanelResize = (args: any) => {

    if (args.element && args.element.querySelector('.e-panel-container .e-panel-content div div')) {

      let chartObj = (args.element.querySelector('.e-panel-container .e-panel-content div div')).ej2_instances[0];

      chartObj.height = '95%';

      chartObj.width = '100%';

      chartObj.refresh();

    }

  };

  return (

    <div>

      <div id="edit_target" className="control-section">

        <DashboardLayoutComponent

          id="edit_dashboard"

          columns={18}

          cellSpacing={cellSpacing}

          ref={dashboardObj}

          resizeStop={onPanelResize.bind(this)}

          allowResizing={true}

          allowDragging={true}

        >

          <PanelsDirective>

            <PanelDirective

              sizeX={6}

              sizeY={8}

              minSizeX={6}

              minSizeY={4}

              row={0}

              col={0}

              content={PieChart}

              header="Pie Chart"

            ></PanelDirective>

            <PanelDirective

              sizeX={6}

              sizeY={8}

              row={0}

              col={6}

              content={BarChart}

              header="Bar Chart"

            ></PanelDirective>

            <PanelDirective

              sizeX={6}

              sizeY={8}

              row={0}

              col={12}

              content={LineChart}

              header="Line Chart"

            ></PanelDirective>

          </PanelsDirective>

        </DashboardLayoutComponent>

      </div>

    </div>

  );

};

export default DashboardTest;

PieChart:

import React from 'react';

import {

  AccumulationChartComponent,

  Inject,

  AccumulationSeriesCollectionDirective,

  AccumulationSeriesDirective,

  AccumulationLegend,

  PieSeries,

  AccumulationTooltip,

  AccumulationDataLabel,

} from '@syncfusion/ej2-react-charts';

function PieChart() {

  const pieData = [

    { x: 'Jan', y: 12.5, text: 'January' },

    { x: 'Feb', y: 25, text: 'February' },

    { x: 'Mar', y: 50, text: 'March' },

  ];

  return (

    <div >

      <AccumulationChartComponent

        style={{ height: '100%', width: '100%' }}

        legendSettings={{ visible: false }}

        enableSmartLabels={true}

        enableAnimation={true}

        center={{ x: '50%', y: '50%' }}

        tooltip={{

          enable: true,

          header: '<b>${point.x}</b>',

          format: 'Composition : <b>${point.y}%</b>',

        }}

      >

        <Inject services={[AccumulationLegend, PieSeries, AccumulationTooltip, AccumulationDataLabel]} />

        <AccumulationSeriesCollectionDirective>

          <AccumulationSeriesDirective

            dataSource={pieData}

            name="Earnings"

            xName="x"

            yName="y"

            dataLabel={{

              visible: true,

              position: 'Inside',

              name: 'value',

              font: { fontWeight: '600' },

            }}

            radius="100%"

            innerRadius="40%"

            palettes={['#00bdae', '#357cd2', '#e56691']}

          />

        </AccumulationSeriesCollectionDirective>

      </AccumulationChartComponent>

    </div>

  );

};

export default PieChart;

But when i Resize it down, it will overflow, like this:

[Jafar Ali Shahulhameed]

Hi Torgeir,

We can understand that you are expecting to resize the charts along with the Dashboard when being resized. We have achieved your requirement by using the Dashboard Layout component’s resize event. Kindly refer the code changes below.

const onPanelResize = (args) => {

    if (args.element && args.element.querySelector('.e-panel-container .e-panel-content .e-chart')) {

        let chartObj = (args.element.querySelector('.e-panel-container .e-panel-content .e-chart')).ej2_instances[0];

        chartObj.height = '95%';

        chartObj.width = '100%';

        chartObj.refresh();

    }

};

We have attached the sample for your reference,

Sample: S9er8q (forked) - StackBlitz

Kindly check out the shared details and get back to us if you need further assistance.

Regards,

Jafar