Hicharts wrapping up data in Angular in production mode

Discussão em 'Angular' iniciado por Rajesh Golani, Novembro 22, 2024.

  1. We are trying to plot simple data series in Highcharts the data series is as follows,

    [
    {
    "x": 1072828800000,
    "y": 13.916425650742994
    },
    {
    "x": 1104451200000,
    "y": 15.764275012485435
    },
    {
    "x": 1135987200000,
    "y": 16.768132780082986
    },
    {
    "x": 1167523200000,
    "y": 18.008780817291456
    },
    {
    "x": 1199059200000,
    "y": 20.989796268938743
    },
    {
    "x": 1230681600000,
    "y": 22.480956411341516
    },
    {
    "x": 1262217600000,
    "y": 22.209314832741743
    },
    {
    "x": 1293753600000,
    "y": 22.102337923121055
    },
    {
    "x": 1325289600000,
    "y": 23.43494397002126
    },
    {
    "x": 1356912000000,
    "y": 23.921638341747848
    },
    {
    "x": 1388448000000,
    "y": 24.769899200556136
    },
    {
    "x": 1419984000000,
    "y": 25.955515206536543
    },
    {
    "x": 1451520000000,
    "y": 24.956450638131464
    },
    {
    "x": 1483142400000,
    "y": 25.794040661192586
    },
    {
    "x": 1514678400000,
    "y": 27.858886096237207
    },
    {
    "x": 1546214400000,
    "y": 29.8801627148459
    },
    {
    "x": 1577750400000,
    "y": 30.590097977126252
    },
    {
    "x": 1609372800000,
    "y": 30.91773692290411
    },
    {
    "x": 1640908800000,
    "y": 35.06282722513089
    },
    {
    "x": 1672444800000,
    "y": 30.054431472652876
    },
    {
    "x": 1703980800000,
    "y": 33.257303546320884
    }
    ]


    Here are the series options

    const hist_placeHolderSeriesOptions: Highcharts.SeriesColumnOptions = {
    id: 'placeHolderSeries',
    name: 'PlaceHolderSeries',
    type: 'column',
    showInNavigator: false,
    enableMouseTracking: true,
    stickyTracking: false,
    animation: true,
    zIndex: 4,
    legendIndex: 1,
    dashStyle: 'Solid',
    color: chartColors.black1,
    };


    Highcharts version: 11.4 Angular 17

    Unfortunately cannot post the entire chart code because the code is very elaborate,

    When I run our angular server as ng serve in dev mode the chart is plotted correctly. But when I do a production build of the same project without any change some how the first point of data disappears and last data point is wrapped around the first data point.

    Here's what it looks like in each mode.

    In development mode: [​IMG]

    In production mode: [​IMG]

    When I try to console log that data series the above data is what I get, so there is no difference in that.

    There are few pointers about this problem.

    1. This problem is very consistent and always appears.
    2. If I use range selector shorten the time frame and maximize it the issue disappears.

    Continue reading...

Compartilhe esta Página