Highcharts visualizations going blank

Dear community,

I frequently run into the problem that highcharts visualizations are visible for a fraction of a second and then blank out and stay blank until a user interaction forces them to reload (e.g. switch to a different page and back)

The following actions can cause the visualizations to go blank:

  • Automatic refresh from updating of datatables
  • Screen resizing
  • Any modification of the app in the app builder

There is no console warning or error or anything else that would indicate the cause of the problem.

Do you know where this problem comes from and how to solve it?

Best regards

Hi @johannesheininger,

I forgot to mention it in the first post - all datasources are datatables.

here is the complete app:

  "version": "0.1",
  "global": {
    "styles": {
      "chartColors": [
        "#003f5c",
        "#2f4b7c",
        "#665191",
        "#a05195",
        "#d45087",
        "#f95d6a",
        "#ff7c43",
        "#ffa600",
        "#5c0b53",
        "#8a1550",
        "#af3246",
        "#c85739",
        "#d3802c",
        "#d1ab2d",
        "#c0d64b",
        "#9eff82"
      ]
    }
  },
  "screens": [
    {
      "layout": "layout2",
      "conditions": {
        "minScreenWidth": 0
      }
    }
  ],
  "layouts": [
    {
      "id": "layout2",
      "type": "flexGrid",
      "config": {
        "grid": {
          "configs": [
            {
              "columns": "1fr",
              "rows": "1fr 1fr",
              "gap": "5px",
              "template": [
                "Container1",
                "Container2"
              ]
            }
          ],
          "noPadding": true
        },
        "containers": [
          {
            "id": "Container1",
            "appearance": []
          },
          {
            "id": "Container2"
          }
        ]
      },
      "placements": [
        {
          "containerId": "Container1",
          "elementId": "training_efforts_by_topic_element"
        },
        {
          "containerId": "Container2",
          "elementId": "training_efforts_by_team_element"
        }
      ]
    }
  ],
  "datasources": [
    {
      "id": "training_efforts_by_topic_datasource",
      "origin": "datatable",
      "config": {
        "dataId": "0f20a101-e5d8-48a4-b00d-8c973b729e2b",
        "schema": "table"
      }
    },
    {
      "id": "training_efforts_by_team_datasource",
      "origin": "datatable",
      "config": {
        "dataId": "92aedb38-dbd8-46ff-802c-dcbec99bf810",
        "schema": "table"
      }
    }
  ],
  "elements": [
    {
      "id": "training_efforts_by_topic_element",
      "type": "highcharts",
      "source": "training_efforts_by_topic_datasource",
      "sourceOptions": {
        "sql": "select * from inputTable i order by year_month"
      },
      "config": {
        "title": {
          "text": "Training efforts by ticket",
          "style": {}
        },
        "chart": {
          "type": "column"
        },
        "xAxis": {
          "title": {
            "text": "Month"
          }
        },
        "plotOptions": {
          "series": {
            "stacking": "normal",
            "dataLabels": {
              "enabled": true,
              "format": "{point.y:.2f} d"
            },
            "animation": true
          }
        },
        "yAxis": {
          "stackLabels": {
            "enabled": true,
            "format": "{total:.2f} d"
          },
          "title": {
            "text": "Number of open tickets"
          }
        },
        "tooltip": {
          "pointFormat": "{series.name}: {point.y:.2f}"
        }
      }
    },
    {
      "id": "training_efforts_by_team_element",
      "type": "highcharts",
      "source": "training_efforts_by_team_datasource",
      "sourceOptions": {
        "sql": "select * from inputTable i order by year_month"
      },
      "config": {
        "title": {
          "text": "Training efforts by team",
          "style": {}
        },
        "chart": {
          "type": "column"
        },
        "xAxis": {
          "title": {
            "text": "Month"
          }
        },
        "plotOptions": {
          "series": {
            "stacking": "normal",
            "dataLabels": {
              "enabled": true,
              "format": "{point.y:.2f} d"
            },
            "animation": true
          }
        },
        "yAxis": {
          "stackLabels": {
            "enabled": true,
            "format": "{total:.2f} d"
          },
          "title": {
            "text": "Number of open tickets"
          }
        },
        "tooltip": {
          "pointFormat": "{series.name}: {point.y:.2f}"
        }
      }
    }
  ],
  "pages": [],
  "endpoints": [],
  "syncSets": [],
  "partials": [],
  "customElementPacks": [],
  "customHooks": []
}

After some investigation with @johannesheininger it seems that not defining the series within the configuration causes the problem.

While this is an acceptable fix for some use cases, there are also some where it would be rather inconvenient to explicitly specify the series.

Do you know an alternative solution?