0

I am using https://www.npmjs.com/package/highcharts-angular to produce highcharts in Angular.

When I set the xAxis min,max and zoom, the points disappear. When I do not set the min,max, the points do not disappear on zoom.

Here is my chart options for highcharts. 

        this._chartOptions= {
      title: { text: "highcharts" },
      plotOptions: {
        series: {
          states: {
            hover: {
              enabled: false // hover
            },

          },
          gapSize: 2,
        }
      },
      series:[ 
    { 
    data: [x,y],
    name: "name",
    allowPointSelect: false,
    step: false
    } ... 
      ],
      rangeSelector: {
        enabled: true,
        inputEnabled: true,
        buttons: [
          {
            type: 'hour',
            count: 24,
            text: '1d',
            dataGrouping: {
              forced: true,
              units: [['hour', [1]]]
            }
          },
          {
            type: 'day',
            count: 7,
            text: '1w',
            dataGrouping: {
              forced: true,
              units: [['day', [1]]]
            }
          },
          {
            type: 'week',
            count: 4,
            text: '1m',
            dataGrouping: {
              forced: true,
              units: [['week', [1]]]
            }
          },
          {
            type: 'month',
            count: 3,
            text: '1y',
            dataGrouping: {
              forced: true,
              units: [['month', [1]]]
            }
          },
          {
            type: 'all',
            text: 'All',
          }
        ]
      },
      xAxis: {
        min: new Date(this._fromDate + timezoneOffset) ,
        max: new Date(this._toDate + timezoneOffset),
        type: 'datetime',
      },
      chart: {
        zoomType: 'x',
        }
      },
    },
      function (chart) {
        // apply the date pickers
        setTimeout(function () {
          $('input.highcharts-range-selector', $('#' + chart.options.chart.renderTo)).datepicker()
        }, 0)
      };
    break;
}

Here is snapshot of the highcharts

Normal

Zooming

Mocha
  • 2,035
  • 12
  • 29
  • In the xAxis property you set Date objects, you should set timestamp in miliseconds (numbers). If it does not work, try to create a live example, e.g. on plunkr jsfiddle, etc. – morganfree Mar 09 '18 at 12:53
  • @morganfree Yes, your answer is correct. Please leave an answer so that I can mark it as correct. But why does highcharts allow a date object to be set as the min/max when it is not zoomed in? – Mocha Mar 09 '18 at 21:40

0 Answers0