Search code examples
javascriptcanvasjs

CanvasJS .render() function jumps to top of screen


First of all: here is my page

I'm currently deeloping a webpage with an chart with CanvasJS and I'm facing an issue with the .render() function. I have several buttons and if I click on some of them the webpage just jumps to the top. Here is my code:

document.getElementById('time-all-time').addEventListener('click', function() {
    chart(-1);
});

the chart function only contains some instructions about the canvas:

var chart = new CanvasJS.Chart('hashrate-chart', {
  animationEnabled: true,
  title:{
  },
  axisX: {
    valueFormatString: 'HH:mm:ss - DD. MM'
  },
  axisY: {
    title: 'Hashrate (H/s)',
    includeZero: false,
    suffix: ' H/s'
  },
  legend:{
    cursor: 'pointer',
    fontSize: 16,
    itemclick: toggleDataSeries
  },
  toolTip:{
    shared: true
  },
  data: [
    {
      name: '$workr',
      type: 'spline',
      yValueFormatString: '#0.## H/s',
      showInLegend: true,
      dataPoints: [
        { x: 'test', y: 123 }
      ]
    }
  ]
});
chart.render();

Thanks in advance!

Edit/Solution: I forgot to set a min-height/height, This did it for me: https://stackoverflow.com/a/52078559/9360322


Solution

  • Finally got it. I forgot to set a height on the chart. This did it for me:

    #hashrate-chart {
        height: 400px;
    }