Zoom does not work

[ssuess]

No matter what I do, I can't get zoom to work on highcharts-vue, although everything else seems to work normally. I am building my project with vue and quasar latest versions. Here are my chart options

<template>
<div v-if="chartdone" class="mychart"><highcharts :options="chartStuff" class="chartdiv"></highcharts></div>
</template>

<script>
export default {
  name: 'ChartTest',
  data () {
    return {
      chartStuff: {
        title: null,
        type: 'line',
        zoomType: 'x',
        legend: {
          symbolRadius: 10,
          squareSymbol: true,
          symbolWidth: 10,
          symbolPadding: 10
        },
        tooltip: {
          shared: true,
          shadow: false,
          useHTML: true,
          backgroundColor: 'white',
          style: { opacity: 1 },
          headerFormat: '<div style="background:#080037;color:white;padding:9px;top:1px;margin:-9px;margin-left:-8px;position:relative;z-index:5000;"><strong>{point.key}</strong></div><table>',
          pointFormat: '<tr><td colspan=2><hr style="color:silver;"></td></tr><tr><td style="color: {series.color}"><strong>{series.name}</strong>: </td>' +
              '<td style="text-align: right"><b>{point.y}</b></td></tr>',
          footerFormat: '</table>',
          borderColor: 'silver',
          xDateFormat: '%Y-%m-%d %H:%M'
          // valueDecimals: 2
        },
        marker: { enabled: false },
        credits: {
          enabled: false
        },
        xAxis: {
          type: 'datetime',
          title: {
            text: 'Dates'
          },
          dateTimeLabelFormats: {
            day: '%d %b %Y'
          }
          // minRange: 3600000
        },
        yAxis: {
          // height: '250',
          title: {
            text: 'Count'
          },
          // type: 'logarithmic'
          min: 0 // comment out when making type logarithmic
        },
        series: []
      },
chartdone: false
}
}
</script>

[ssuess]

UGH, I finally solved my own problem. The option needed to be nested inside chart, like so:

chartStuff: {
        title: null,
        chart: {
        zoomType: 'x'
        },
        legend: {
          symbolRadius: 10,
          squareSymbol: true,
          symbolWidth: 10,
          symbolPadding: 10
        },
        tooltip: {
          shared: true, //...etc

[Denyllon]

Hi @ssuess ,

Thank you for reporting the issue. After taking a look on your code, I see that the zoomType parameter is put directly on the chartOptions, but it should be wrapped by another object called chart, like in the below example.

Live example: https://codesandbox.io/s/highcharts-vue-demo-90yvq API Reference: https://api.highcharts.com/highcharts/chart.zoomType

Kind regards!