Line Chart x axis labels which are datetime rendering fine when running in local but not working in production build(deployed in netlify)

[Rajesh]

Line Chart x axis labels which are date time, rendering fine when running in local but not working in production build(deployed in netlify). Above image is running in Dev. Below image is the one running in production mode, after resizing browser working fine.

Code:

import * as React from "react";

import {

ChartComponent,

SeriesCollectionDirective,

SeriesDirective,

Inject,

LineSeries,

Legend,

Tooltip,

DateTime,

Category,

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

import { MultiLineChartProps } from "./types";

const MultiLineChart = ({

primaryXAxis,

primaryYAxis,

DatasourceArray,

palettes,

tooltip,

height,

width

}: MultiLineChartProps) => {

return (

<ChartComponent

height={height}

width={width}

primaryXAxis={primaryXAxis}

tooltip={tooltip}

primaryYAxis={primaryYAxis}

palettes={palettes}

>

<Inject

services={[LineSeries, Legend, DateTime, Category, Tooltip]}

></Inject>

<SeriesCollectionDirective>

{DatasourceArray.map((x, index: number) => {

return (

<SeriesDirective

key={index}

name={x.name}

marker={x.marker}

width={x.width}

type="Line"

dashArray={x.dashArray}

dataSource={x.data}

xName="x"

yName="y"

/>

);

})}

</SeriesCollectionDirective>

</ChartComponent>

);

};

export default MultiLineChart;

<div className="h-[100%] w-[99%]">

<MultiLineChart

height="100%"

width="99%"

palettes={["#FE5656","#4460CA"]}

DatasourceArray={[

{

name: "Previous Calls Volume",

data: previousCalls.map((pc) => ({ x: pc.label, y: pc.calls })),

dashArray: "7"

},

{

name: "Current Calls Volume",

data: currentCalls.map((cc) => ({ x: cc.label, y: cc.calls })),

dashArray: "0"

}

]}

tooltip={{ enable: true, enableAnimation: true }}

primaryXAxis={callVolumePrimaryXAxis}

primaryYAxis={{title: "Calls per day"}}

></MultiLineChart>

</div>

[Durga Gopalakrishnan]

Hi Rajesh,

Greetings from Syncfusion.

We request you to share the chart width in production and development environment, so that it will be helpful to validate your scenario further. We have used chart loaded event to obtain the chart width. Please check with the below snippet.

onChartLoad(args) {

        let chart = document.getElementById('charts');

        console.log(chart.ej2_instances[0].availableSize.width);

    }

Sample : https://stackblitz.com/edit/react-xvz696

Please let us know if you have any concerns.

Regards,

Durga G

[Rajesh]

• Loaded event calling twice
• localhost:8000 is the production mode screen shot, second time width is more than 2x of first one.
• localhost:3000 is the development mode screen shot, second time width is same as first one.
• 610.83 is the correct fit in this case
• using below cdn for css.
<link rel='nofollow' href="https://cdn.syncfusion.com/ej2/tailwind.css" rel="stylesheet">



[Durga Gopalakrishnan]

Hi Rajesh,

As per your attached screenshot, it seems to be you are rendering controls inside dashboard layout panels. Usually the reported problem occurs when controls are rendered before panel is created, so we request you to re-render the control using chart refresh method inside layout created event.

We have prepared sample based on your requirement. Please check with below snippet and sample.

Code Snippet :

<DashboardLayoutComponent created={this.afterCreation.bind(this)}> </DashboardLayoutComponent>

afterCreation(args){

        let chart1 = document.getElementById('chart1').ej2_instances[0];

        chart1.refresh();

  }

Sample : https://stackblitz.com/edit/react-jjcpt8-trdcy3

Kindly revert us if you have any concerns.

Regards,

Durga G

[Rajesh]

Tried the suggested solution but still not working, event getting fired verified using debugging. Please find code below.

[Durga Gopalakrishnan]

Hi Rajesh,

We request you to specify the static height and width for chart container and ensure in local and production environment and update us the details if you are still facing problem.

UG : https://ej2.syncfusion.com/react/documentation/chart/chart-dimensions/

Kindly get back to us if you need any further assistance.

Regards,

Durga G

[Rajesh]

Hi,

we did add height and width to chart as well as container,

<div className="h-[100%] w-[99%]">

id="callVolumeChart"

height="100%"

width="99%"

palettes={["#FE5656", "#4460CA"]}

DatasourceArray={[

{

name: "Previous Calls Volume",

data: previousCalls.map((pc) => ({ x: pc.label, y: pc.calls })),

dashArray: "7",

},

{

name: "Current Calls Volume",

data: currentCalls.map((cc) => ({ x: cc.label, y: cc.calls })),

dashArray: "0",

},

]}

tooltip={{ enable: true, enableAnimation: true }}

primaryXAxis={callVolumePrimaryXAxis}

primaryYAxis={{ title: "Calls per day" }}

>

---- MultiLineChart----------

<ChartComponent

      id={id}

      height={height}

      width={width}

      primaryXAxis={primaryXAxis}

      tooltip={tooltip}

      primaryYAxis={primaryYAxis}

      palettes={palettes}

    >

      <Inject

        services={[LineSeries, Legend, DateTime, Category, Tooltip]}

      ></Inject>

      <SeriesCollectionDirective>

        {DatasourceArray.map((x, index: number) => {

          return (

            <SeriesDirective

              key={index}

              name={x.name}

              marker={x.marker}

              width={x.width}

              type="Line"

              dashArray={x.dashArray}

              dataSource={x.data}

              xName="x"

              yName="y"

            />

          );

        })}

      </SeriesCollectionDirective>

    </ChartComponent>

PS: added only

rel='nofollow' href="https://cdn.syncfusion.com/ej2/tailwind.css" rel="stylesheet">

to index file and except this CDN not loading any other syncfusion css files

[Durga Gopalakrishnan]

Hi Rajesh,

By default, chart doesn’t required any CSS reference. However we request you to resize the chart in loaded event using chartResize method after few seconds.

onChartLoad(args) {

        if (shouldChartRefresh) {

            setTimeout(() => {

                shouldChartRefresh = false;

                chart.ej2_instances[0].chartResize();

            }, 1000);

        }

    }

Sample : https://stackblitz.com/edit/react-xvz696-98v1mt

If you are still facing problem, please revert us.

Regards,

Durga G.

[Rajesh]

Hi,

This is working , could i know the cause for this issue which is only replicating in production.

Also since we have 3-6 charts in a page , we have to maintain Boolean flag as state for each chart which is hard thing, is there any equivalent event for the dashboard layout component ?  

[Durga Gopalakrishnan]

Hi Rajesh, 

In production mode, the reported problem occurs when charts are rendered before dashboard layout panels are created. So, when there is no parent element, then chart will be rendered in its default height and width.  

We have created event only in dashboard layout component which is triggered once panels are created. But unfortunately using this, chart is not rendered, so we suggested to resize the chart using chartResize method. As of now, we don’t have other option to overcome this scenario. 

Please let us know if you have any concerns. 

Regards, 

Durga G.