Mls
Posts: 7
Joined: Thu Feb 18, 2021 9:15 pm

Chart reflow slows down the app

Hello,

I'm using reflow after opening/closing a drawer so that the map is resized accordingly but, whenever this happens, the performance is really bad.

Any ideas?

Thanks.
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Chart reflow slows down the app

Hi,
We appreciate you reaching out to us!

Try to use redraw events, they fires when the chart is redrawn.
In the attached documentation inside is an example of use with highcharts maps.

API References:
https://api.highcharts.com/highmaps/chart.events.redraw

Let me know if that was what you looking for.
Best regards.
Sebastian Hajdus
Highcharts Developer
Mls
Posts: 7
Joined: Thu Feb 18, 2021 9:15 pm

Re: Chart reflow slows down the app

Hi,

Thanks for your answer.

I used reflow instead but it didn't make any difference.

I removed the map and the drawer work just fine.

Any ideas?
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Chart reflow slows down the app

Hi,
For a better understanding of your case, could you reproduce your chart configuration on an online code editor?

I'm waiting for news from you.
Best regards.
Sebastian Hajdus
Highcharts Developer
Mls
Posts: 7
Joined: Thu Feb 18, 2021 9:15 pm

Re: Chart reflow slows down the app

Ηi,

I'm attaching the code of the mapchart.

Code: Select all

import React, { useState, useRef, useEffect } from "react";
import { connect } from "react-redux";
import * as actions from "src/actions/index";
import Highcharts from "highcharts/highmaps";
import HighchartsReact from "highcharts-react-official";
import Card from "@material-ui/core/Card";
import map from "src/data/locations.json";

interface PROPS {
  open: boolean;
  filtersReducer: FilterProps;
}

interface FilterProps {
  locations: {
    values: Array<string>;
    selected: string;
  };
}

interface ChartProps {
  chart: any;
  chartOptions: object;
}

const AppDrawer = (
  { open, filtersReducer }: PROPS,
  highchartReactProps: HighchartsReact.Props
) => {
  const {
    locations: { values, selected: selectedLocation },
  } = filtersReducer;

  // Chart config
  const [chartState, setChartState] = useState<ChartProps>({
    chartOptions: {
      chart: {
        map,
        height: "600px",
        // reflow: true,
        // colorCount: 5,
      },
      mapNavigation: {
        enabled: false,
      },
      legend: {
        title: {
          style: {
            fontWeight: "200",
            fontSize: "0.8rem",
            fontFamily: "Arial, Helvetica, sans-serif",
          },
          text: "Κρούσματα",
        },
        itemStyle: {
          fontSize: "0.7rem",
          fontWeight: "normal",
        },
        align: "left",
        verticalAlign: "top",
        layout: "vertical",
        symbolRadius: 0,
        symbolHeight: 15,
        valueDecimals: 0,
        y: 100,
      },
      colorAxis: {
        dataClasses: [
          {
            from: 0,
            to: 20,
            color: "#e4f5f9",
          },
          {
            from: 20,
            to: 40,
            color: "#9fdbeb",
          },
          {
            from: 40,
            to: 60,
            color: "#66c6e0",
          },
          {
            from: 60,
            to: 80,
            color: "#34b4d6",
          },
          {
            from: 80,
            to: 100,
            color: "#2495b3",
          },
        ],
      },
      title: {
        text: "Λοιμώδη Νοσήματα",
        align: "left",
        floating: true,
        y: 20,
        style: {
          fontFamily: "Arial, Helvetica, sans-serif",
          fontSize: "1rem",
        },
      },
      subtitle: {
        text: "Kρούσματα τοξοπλάσματος σε άνθρωπο",
        align: "left",
        floating: true,
        y: 40,
        style: {
          fontFamily: "Arial, Helvetica, sans-serif",
        },
      },
      tooltip: {
        className: "map-tooltip-container",
        formatter: function (this: any) {
          console.log(this);
          return `<div class="map-tooltip-container">
                    <div class="map-tooltip-header">
                      <div class="map-tooltip-pointName">
                        <span>${this.point.name}</span>
                      </div>
                    </div>
                    <div class="map-tooltip-body">
                      <div class="map-tooltip-pointValue">
                        <span>${this.point.value}</span>
                      </div>
                      <div class="map-tooltip-pointText">
                        <span>Kρούσματα τοξοπλάσματος σε άνθρωπο</span>
                      </div>
                    </div>
                  </div>`;
        },
        followPointer: false,
        borderWidth: 0,
        padding: 0,
        useHTML: true,
      },
      series: [
        {
          name: "Random data",
          states: {
            hover: {
              borderColor: "#ff7141",
              brightness: 0,
            },
          },
          cursor: "pointer",
          dataLabels: {
            enabled: false,
            format: "{point.name}",
          },
          allAreas: false,
          data: [
            ["0", 0],
            ["1", 1],
            ["2", 2],
            ["3", 3],
            ["4", 4],
            ["5", 5],
            ["6", 6],
            ["7", 7],
            ["8", 8],
            ["9", 9],
            ["10", 10],
            ["11", 11],
            ["12", 12],
            ["13", 13],
            ["14", 14],
            ["15", 15],
            ["16", 16],
            ["17", 17],
            ["18", 18],
            ["19", 19],
            ["20", 20],
            ["21", 21],
            ["22", 22],
            ["23", 23],
            ["24", 24],
            ["25", 25],
            ["26", 26],
            ["27", 27],
            ["28", 28],
            ["29", 29],
            ["30", 30],
            ["31", 31],
            ["32", 32],
            ["33", 33],
            ["34", 34],
            ["35", 35],
            ["36", 36],
            ["37", 37],
            ["38", 38],
            ["39", 39],
            ["40", 40],
            ["41", 41],
            ["42", 42],
            ["43", 43],
            ["44", 44],
            ["45", 45],
            ["46", 46],
            ["47", 47],
            ["48", 48],
            ["49", 49],
            ["50", 50],
            ["51", 51],
            ["52", 52],
            ["53", 53],
            ["54", 54],
          ],
        },
      ],
    },
    chart: {},
  });

  const { chartOptions, chart } = chartState;

  // Get chart instance from callback and store it
  const afterChartCreated = (chart: any) => {
    setChartState({
      ...chartState,
      chart,
    });
  };

  // Compare prev with new props, then change state accordingly
  const usePrevious = <T extends unknown>(value: T): T | undefined => {
    const ref = useRef<T>();
    useEffect(() => {
      ref.current = value;
    });
    return ref.current;
  };

  const prevOpen = usePrevious(open);
  useEffect(() => {
    if (prevOpen !== open && prevOpen !== undefined) {
      chart.redraw();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [open]);

  return (
    <div className="mapchart-container">
      <div className="highcharts-wrapper">
        <HighchartsReact
          highcharts={Highcharts}
          constructorType={"mapChart"}
          options={chartOptions}
          callback={afterChartCreated}
          {...highchartReactProps}
        />
      </div>
      <div className="map-card-container">
        <Card className="total-card-container">
          <span className="total-card-text">ΠΑΝΕΛΛΑΔΙΚΑ</span>
          <span className="total-card-count">232</span>
        </Card>
        <Card className="point-card-container">
          <span className="point-card-text">{selectedLocation}</span>
          <span className="point-card-count">32</span>
        </Card>
      </div>
    </div>
  );
};

const mapStateToProps = (state: { filtersReducer: FilterProps }) => {
  return {
    filtersReducer: state.filtersReducer,
  };
};

export default connect(mapStateToProps, actions)(AppDrawer);
Any help would be much appreciated.
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Chart reflow slows down the app

Hi,
Thanks for your code, but I can't recreate your case.

Please use a template from our wrapper and simplified your example for testing.
https://github.com/highcharts/highcharts-react#examples

Best regards.
Sebastian Hajdus
Highcharts Developer
Mls
Posts: 7
Joined: Thu Feb 18, 2021 9:15 pm

Re: Chart reflow slows down the app

Hello,

Sorry for my late response.

All I want to know is the right way to update my map chart.

As you can see in the code, I'm using the afterChartCreated way to access the chart instance and redraw it when the drawer closes/opens.

Am I doing something wrong?

The performance is really bad. If I comment out the map component, everything runs just fine (I have 6 other charts in the page).

Any help would be much appreciated.
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Chart reflow slows down the app

Hi Mls,
Your example is too extensive for testing, let's work on this simplified demo with a map in React.

In this example, the update is done with React Hooks, according to the documentation:
https://github.com/highcharts/highchart ... -to-update

Demo:
https://codesandbox.io/s/sparkling-cdn- ... src/App.js

Let me know how are you doing with this.
Best regards.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Maps”