Highcharts: the chart is only visible for less than a second

[Vincent-Mazel]

Expected behaviour

What I'm trying to do is to create a burndown chart.

Actual behaviour

I want before loading the burndown with the .highcharts() method select the start date and the end date. As a consequence, I use a form with two input and .submit in js to recuperate the dates.
After that, I test if the user didn't put bad dates (if the start date isn't greater than the end date) and then I call several functions to set the properties of my chart (these functions are called in the generateBurndown() thing).
The problem is that after calling this line $("#burndown").highcharts(chart), I only see my burndown chart for less than a second before the page reloads (I think this is a reload, I'm not really sure).

Live demo with steps to reproduce

You just need to run a local web server. I use this : php -S localhost:8000.
Here is my project zipped :
burndown_chart.zip

Thanks in advance for your help.

[pawelfus]

Hi @Vincent-Mazel

Thanks for letting us know about this issue. This is how form submit works - once form is submitted, page reloads/redirects. Instead use simple button with click action. Alternatively, you can call event.preventDefault() or return false in your submit, simple example:

  $("#formDates").submit(function() {
    const startDate = new Date($("#startDate").val());
    const endDate = new Date($("#endDate").val());

    if (startDate > endDate)
      alert("Ola manant, choisis bien tes dates voyons !");
    else generateBurndown(startDate, endDate);

    return false;
  });

In case you have more questions, please contact our support: https://www.highcharts.com/support - this is our bug tracker ;)