Adding and removing chart series confuses Highcharts #1

metaperl · 2023-10-12T14:27:33Z

Description

In the screenshot attached you see:

"bob" and "john" in the legend of the graph
"alice" and "john" in the chips of the multi-select

this is a bug because they should be the same.

how to reproduce

run the program below
repeatedly select and de-select a certain element (e.g. select and de-select 'alice')
after three repetitions of step 2, a mismatch will occur between the legend and the chips displayed.

This video shows the same thing. Regrettably, the capture window did not capture the deselections and selections of the same element - https://www.youtube.com/watch?v=KOKuhgMA9dk

from nicegui import ui

# initial data
data1 = {'name': 'alice', 'data': [31, 148, 33, 68, 75, 43]}
data2 = {'name': 'bob', 'data': [3, 28, 7, 5, 8, 3]}
data3 = {'name': 'john', 'data': [11, 42, 10, 18, 9, 0]}

all_data = dict(alice=data1, bob=data2, john=data3)

print(f"keys = {list(all_data.keys())}")

chart = None
chart_options = {
    'chart': {
        'type': 'spline',
    },
    'legend': {
        'enabled': True,
        'layout': 'vertical',
        'align': 'right',
        'verticalAlign': 'middle',
    },
    'navigator': {
        'enabled': True
    },
    'scrollbar': {
        'enabled': False
    },
    'series': [data1, data2, data3]
}


def plot():
    global chart, chart_options
    chart = ui.chart(chart_options, type='stockChart', extras=['stock'])


def update_chart(selections):
    global chart

    datums = [all_data[selection] for selection in selections]


    chart.options['series'] = datums
    chart.update()



plot()
ui.select(list(all_data.keys()), multiple=True, value=list(all_data.keys()),
          label='with chips', on_change=lambda e: update_chart(e.value)
          ).classes('w-64').props('use-chips')

ui.run(reload=False)

falkoschindler · 2023-10-12T18:48:32Z

Wow, this is strange. I boiled it down to this:

def toggle():
    chart.options['series'] = [{'data': [1]}, {'data': [2]}] if len(chart.options['series']) == 1 else [{'data': [1]}]
    chart.update()

chart = ui.chart({'series': [{'data': [1]}]})
ui.button('Toggle', on_click=toggle)

Even though the options always contain a data point at 1, toggling multiple times leads to a single point at 2.

I wonder if we can reproduce the problem with a pure Highcharts example without NiceGUI...

falkoschindler · 2023-10-12T18:54:53Z

No, without NiceGUI the example is working:

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
<button onclick="toggle()">Toggle</button>
<script>
  let chart = Highcharts.chart("container", { series: [{ data: [1] }] });
  function toggle() {
    if (chart.series.length === 1) {
      chart.addSeries({ data: [2] });
    } else {
      chart.series[1].remove();
    }
  }
</script>

Now I'm pretty sure the issue is caused by update_chart() in chart.js which follows a pretty naive heuristic to add and remove series:
https://github.com/zauberzeug/nicegui/blob/eea7d8d4ce91be270edfacb29e26b385ba447d0f/nicegui/elements/chart.js#L40-L52

falkoschindler · 2023-10-13T06:15:19Z

Minimum reproduction without NiceGUI (but with the same update algorithm from chart.js):

<html>
  <head>
    <script src="https://code.highcharts.com/highcharts.js"></script>
  </head>
  <body>
    <div id="container"></div>
    <button onclick="toggle()">Toggle</button>
    <script>
      let options = { series: [{ data: [1] }] };
      let chart = Highcharts.chart("container", options);
      let seriesCount = options.series ? options.series.length : 0;

      function toggle() {
        if (options.series.length === 1) {
          options.series.push({ data: [2] });
        } else {
          options.series.pop();
        }
        update();
      }

      function update() {
        while (seriesCount > options.series.length) {
          chart.series[0].remove();
          seriesCount--;
        }
        while (seriesCount < options.series.length) {
          chart.addSeries({}, false);
          seriesCount++;
        }
        chart.update(options);
      }
    </script>
  </body>
</html>

The question is, how to improve the update() function.

falkoschindler · 2023-10-13T08:42:20Z

I created a test page for manipulating Highcharts options:

test.html

<html>
  <head>
    <script src="https://code.highcharts.com/highcharts.js"></script>
  </head>
  <body>
    <div id="container"></div>
    <button onclick="insert_low()">Insert low</button>
    <button onclick="insert_high()">Insert high</button>
    <button onclick="remove_low()">Remove low</button>
    <button onclick="remove_high()">Remove high</button>
    <button onclick="reset()">Reset</button>
    <button onclick="clear_all()">Clear</button>
    <script>
      let options = { series: [{ data: [0] }, { data: [1] }, { data: [2] }] };
      let seriesCount = options.series.length;
      let chart = Highcharts.chart("container", options);

      function insert_low() {
        options.series.unshift({ data: [options.series[0].data[0] - 1] });
        update();
      }

      function insert_high() {
        options.series.push({ data: [options.series[options.series.length - 1].data[0] + 1] });
        update();
      }

      function remove_low() {
        options.series.shift();
        update();
      }

      function remove_high() {
        options.series.pop();
        update();
      }

      function reset() {
        options.series = [{ data: [0] }];
        update();
      }

      function clear_all() {
        options.series = [];
        update();
      }

      function update() {
        while (seriesCount > options.series.length) {
          chart.series[0].remove();
          seriesCount--;
        }
        while (seriesCount < options.series.length) {
          chart.addSeries({}, false);
          seriesCount++;
        }
        chart.update(options);
      }
    </script>
  </body>
</html>

Currently all series collapse into a point at -1 when clicking "insert low".
And a lengthy discussion with ChatGPT about improving the update() function wasn't successful.

falkoschindler · 2023-10-18T09:21:14Z

I still don't have a good solution for fixing this issue.
In order to focus on a quick release of upcoming version 1.4, I'll postpone this one to 1.4.1.

falkoschindler · 2023-11-08T07:06:21Z

I'm currently thinking about how to solve an update like this:

<html>
  <head>
    <script src="https://code.highcharts.com/highcharts.js"></script>
  </head>
  <body>
    <div id="container"></div>
    <button onclick="add()">Add</button>
    <script>
      let options = { series: [{ data: [1] }, { data: [2] }, { data: [3] }] };
      let chart = Highcharts.chart("container", options);

      function add() {
        options.series.unshift({ data: [0] });
        chart.update(options);
      }
    </script>
  </body>
</html>

The chart simply collapses, which doesn't make any sense and looks like a bug in Highcharts. But it's hard to find a related bug report. This one might be relevant, maybe not. With 1.1K open and 13K closed issues it's hard to tell if this behavior is known and/or already worked on.

By the way: A conversation with their AI didn't yield much insight.

falkoschindler self-assigned this Oct 12, 2023

falkoschindler added the bug Something isn't working label Oct 12, 2023

falkoschindler changed the title ~~repeated selection and deselection of a multi-select item leads to mismatch of legend and chips~~ Adding and removing chart series confuses Highcharts Oct 12, 2023

falkoschindler added the help wanted Extra attention is needed label Oct 13, 2023

falkoschindler transferred this issue from zauberzeug/nicegui Nov 21, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adding and removing chart series confuses Highcharts #1

Adding and removing chart series confuses Highcharts #1

metaperl commented Oct 12, 2023

falkoschindler commented Oct 12, 2023

falkoschindler commented Oct 12, 2023

falkoschindler commented Oct 13, 2023

falkoschindler commented Oct 13, 2023

falkoschindler commented Oct 18, 2023

falkoschindler commented Nov 8, 2023

Adding and removing chart series confuses Highcharts #1

Adding and removing chart series confuses Highcharts #1

Comments

metaperl commented Oct 12, 2023

Description

how to reproduce

falkoschindler commented Oct 12, 2023

falkoschindler commented Oct 12, 2023

falkoschindler commented Oct 13, 2023

falkoschindler commented Oct 13, 2023

falkoschindler commented Oct 18, 2023

falkoschindler commented Nov 8, 2023