highcharts / node-export-server

Highcharts Node.js export server

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Chart renders in 2 different layouts (random)

jszuminski opened this issue · comments

Description

A JSON config passed to the Export Server (on the currently deployed version) renders the same chart in 2 different layouts (seems to be random).

Images

1st try:
Screenshot 2024-04-24 at 10 48 12
2nd try:
Screenshot 2024-04-24 at 10 48 30

Reproduction

Paste the following config on the https://export.highcharts.com to generate two different results:

{
  "xAxis": [
    {
      "plotBands": [
        {
          "from": 1701734400000.0,
          "to": 1705017600000.0,
          "zIndex": 2.0,
          "id": "b74d2fa1-2095-45ab-bc9c-756d690752b4",
          "color": "#d1e7dd"
        },
        {
          "from": 1705104000000.0,
          "to": 1708041600000.0,
          "zIndex": 2.0,
          "id": "c671a233-154f-4038-8971-6bf3acf81e12",
          "color": "#d1e7dd"
        }
      ],
      "plotLines": [
        {
          "value": 1708041600000.0,
          "zIndex": 3.0,
          "dashStyle": "dash",
          "id": "c671a233-154f-4038-8971-6bf3acf81e12",
          "color": "Black"
        },
        {
          "value": 1705017600000.0,
          "zIndex": 3.0,
          "dashStyle": "dash",
          "id": "b74d2fa1-2095-45ab-bc9c-756d690752b4",
          "color": "Black"
        },
        {
          "id": "Diagnose",
          "dashStyle": "dashDot",
          "color": "Red",
          "value": 1702425600000.0,
          "zIndex": 3.0,
          "label": {
            "text": "Diagnose"
          }
        },
        {
          "id": "Debut",
          "dashStyle": "dashDot",
          "color": "Red",
          "value": 1697068800000.0,
          "zIndex": 3.0,
          "label": {
            "text": "Debut"
          }
        }
      ],
      "min": 1696809600000.0,
      "height": "50%",
      "max": 1712613600000.0,
      "title": {
        "enabled": true
      },
      "top": "50%",
      "type": "datetime"
    }
  ],
  "chart": {
    "height": 378.0,
    "animation": false,
    "spacingLeft": -35.0,
    "zoomType": "x"
  },
  "yAxis": [
    {
      "id": "EDSS",
      "min": 0.0,
      "gridZIndex": 3.0,
      "tickAmount": 11.0,
      "zIndex": 4.0,
      "max": 10.0,
      "title": {
        "text": "Funksjonsskår (EDSS)"
      },
      "top": "50%",
      "height": "50%",
      "showFirstLabel": false
    },
    {
      "id": "Attakker",
      "min": 1.0,
      "labels": {
        "enabled": false
      },
      "height": "10%",
      "zIndex": 4.0,
      "max": 1.0,
      "tickColor": "none",
      "title": {
        "offset": 0.0,
        "enabled": false,
        "text": "Attakker/MR/NAB/JCV",
        "rotation": 0.0
      },
      "top": "90%"
    },
    {
      "id": "Behandlinger",
      "min": 0.0,
      "labels": {
        "enabled": false
      },
      "height": "30%",
      "zIndex": 4.0,
      "max": 3.0,
      "title": {
        "offset": -20.0,
        "rotation": 0.0,
        "text": "Behandlinger"
      },
      "top": "20%"
    },
    {
      "id": "Bivirkninger",
      "min": 0.0,
      "labels": {
        "enabled": false
      },
      "height": "20%",
      "zIndex": 4.0,
      "max": 4.0,
      "title": {
        "offset": -80.0,
        "rotation": 0.0,
        "text": "Bivirkninger"
      }
    }
  ],
  "subtitle": {
    "text": null,
    "x": -20.0
  },
  "ReportChartType": 0,
  "title": {
    "text": null,
    "x": -20.0
  },
  "colors": [
    "#003087",
    "#6CACE4",
    "#BFCED6",
    "#6FA287",
    "#ADDFB3",
    "#00C19F",
    "#93C90E",
    "#FFC845",
    "#FF671F",
    "#A76E5E",
    "#CB333B",
    "#87189D"
  ],
  "credits": {
    "enabled": false
  },
  "series": [
    {
      "color": "Black",
      "data": [
        {
          "x": 1704844800000.0,
          "y": 4.0
        },
        {
          "x": 1705017600000.0,
          "y": 4.0
        },
        {
          "x": 1705104000000.0,
          "y": 2.0
        },
        {
          "x": 1707696000000.0,
          "y": 9.0
        },
        {
          "x": 1708041600000.0,
          "y": 9.0
        },
        {
          "x": 1708387200000.0,
          "y": 5.0
        }
      ],
      "tooltip": {
        "xDateFormat": "%d.%m.%Y"
      },
      "animation": false,
      "type": "line",
      "name": "EDSS",
      "yAxis": "EDSS"
    },
    {
      "marker": {
        "radius": 8.0,
        "fillColor": "Red"
      },
      "color": "none",
      "data": [
        {
          "x": 1704758400000.0,
          "y": 1.0
        },
        {
          "x": 1707696000000.0,
          "y": 1.0
        },
        {
          "x": 1709683200000.0,
          "y": 1.0
        }
      ],
      "zIndex": 5.0,
      "tooltip": {
        "xDateFormat": "%d.%m.%Y",
        "pointFormat": "<b>{series.name}</b><br/>"
      },
      "animation": false,
      "type": "line",
      "name": "Attakk",
      "yAxis": "Attakker"
    },
    {
      "marker": {
        "radius": 8.0
      },
      "color": "DarkRed",
      "type": "line",
      "name": "NAB",
      "zIndex": 5.0,
      "tooltip": {
        "xDateFormat": "%d.%m.%Y",
        "pointFormat": "<b>{series.name}</b><br/>Svar: {point.options.svar}<br/>"
      },
      "animation": false,
      "lineWidth": 0.0,
      "yAxis": "Attakker"
    },
    {
      "marker": {
        "radius": 8.0
      },
      "color": "DarkRed",
      "type": "line",
      "name": "JCV",
      "zIndex": 5.0,
      "tooltip": {
        "xDateFormat": "%d.%m.%Y",
        "pointFormat": "<b>{series.name}</b><br/>Svar: {point.options.svar}<br/>JC Indeks: {point.options.index}<br/>"
      },
      "animation": false,
      "lineWidth": 0.0,
      "yAxis": "Attakker"
    },
    {
      "marker": {
        "radius": 8.0,
        "fillColor": "Black"
      },
      "color": "none",
      "data": [
        {
          "x": 1704672000000.0,
          "y": 1.0
        },
        {
          "x": 1707868800000.0,
          "y": 1.0
        }
      ],
      "tooltip": {
        "xDateFormat": "%d.%m.%Y",
        "pointFormat": "<b>{series.name}</b><br/>"
      },
      "animation": false,
      "type": "line",
      "name": "MR",
      "yAxis": "Attakker"
    },
    {
      "animation": false,
      "data": [
        {
          "color": "#cce5ff",
          "name": "Extavia",
          "dataLabels": {
            "enabled": true,
            "format": "{point.name}"
          },
          "x2": 1706745600000.0,
          "y": 2.0,
          "x": 1706659200000.0
        },
        {
          "color": "#cce5ff",
          "name": "Betaferon",
          "dataLabels": {
            "enabled": true,
            "format": "{point.name}"
          },
          "x2": 1708387200000.0,
          "y": 3.0,
          "x": 1706745600000.0
        },
        {
          "color": "#cce5ff",
          "name": "Betaferon",
          "dataLabels": {
            "enabled": true,
            "format": "{point.name}"
          },
          "x2": 1708473600000.0,
          "y": 3.0,
          "x": 1708387200000.0
        },
        {
          "color": "#cce5ff",
          "name": "Tecfidera",
          "dataLabels": {
            "enabled": true,
            "format": "{point.name}"
          },
          "x2": 1708732800000.0,
          "y": 1.0,
          "x": 1708473600000.0
        },
        {
          "color": "#cce5ff",
          "name": "Tecfidera",
          "dataLabels": {
            "enabled": true,
            "format": "{point.name}"
          },
          "x2": 1708992000000.0,
          "y": 1.0,
          "x": 1708732800000.0
        },
        {
          "color": "#cce5ff",
          "name": "Ocrevus",
          "dataLabels": {
            "enabled": true,
            "format": "{point.name}"
          },
          "x2": 1709251200000.0,
          "y": 1.0,
          "x": 1708992000000.0
        },
        {
          "color": "#cce5ff",
          "name": "Mavenclad",
          "dataLabels": {
            "enabled": true,
            "format": "{point.name}"
          },
          "x2": 1709424000000.0,
          "y": 2.0,
          "x": 1709251200000.0
        },
        {
          "color": "#cce5ff",
          "name": "Extavia",
          "dataLabels": {
            "enabled": true,
            "format": "{point.name}"
          },
          "x2": 1710115200000.0,
          "y": 2.0,
          "x": 1709424000000.0
        }
      ],
      "tooltip": {
        "xDateFormat": "%d.%m.%Y",
        "pointFormat": "{series.name}: <b>{point.name}</b><br/>"
      },
      "pointWidth": 20.0,
      "type": "xrange",
      "name": "Behandlinger",
      "yAxis": "Behandlinger"
    },
    {
      "animation": false,
      "data": [
        {
          "description": "MabThera",
          "color": "#f8d7da",
          "name": "Ingennnn",
          "dataLabels": {
            "enabled": true,
            "allowOverlap": true,
            "format": "{point.name}"
          },
          "x2": 1709251200000.0,
          "x": 1706745600000.0,
          "y": 3.0
        },
        {
          "description": "Extavia",
          "color": "#f8d7da",
          "name": "Fatigue",
          "dataLabels": {
            "enabled": true,
            "allowOverlap": true,
            "format": "{point.name}"
          },
          "x2": 1708560000000.0,
          "x": 1708387200000.0,
          "y": 1.0
        }
      ],
      "tooltip": {
        "xDateFormat": "%d.%m.%Y",
        "pointFormat": "{series.name}: <b>{point.name}</b><br/>Relatert til: <b>{point.description}</b><br/>"
      },
      "pointWidth": 20.0,
      "type": "xrange",
      "name": "Bivirkninger",
      "yAxis": "Bivirkninger"
    }
  ],
  "plotOptions": {
    "pie": {
      "cursor": "pointer",
      "allowPointSelect": true,
      "dataLabels": {
        "enabled": true,
        "format": "<b>{point.name}</b>: {point.y}"
      }
    },
    "bar": {
      "pointWidth": 15.0
    }
  }
}

Most likely fixed by the: #521.