Highcharts/Highstock “Custom ticks” screwing xAxis up

Refresh

April 2019

Views

93 time

1

How do I prevent the function from screwing with the other axis labels? Or how do I set custom xaxis labels for rangeSelector All only?

I recently resolved a responsive error I was receiving here with the navigator in Highcharts, which could be found here:

custom ticks based on selected range from rangeSelector in Highstock

I was able to solve and fix the issue with the answer provided, but providing multiple/custom ticks are still an issue for me. The code I used to attempt at making custom ticks for the xAxis is below (Guaranteed an issue with this code affecting the axis, I have debugged this with my basic knowledge)

    events: {
      setExtremes: function(e) {
        if (e.trigger === "rangeSelectorButton" && e.rangeSelectorButton.text === "All") {
          var range = e.max - e.min;

          // ticks spaced by one day or one hour
          var ticksSpacing = range >= 86400 * 1000 ? 86400 : 3600;

          this.update({
              tickPositioner: function() {
                  var positions = [],
                  info = this.tickPositions.info;
                  for (var x = this.dataMin; x <= this.dataMax; x += ticksSpacing * 1000) { // Seconds * 1000 for ticks
                      positions.push(x);
                  };
                  positions.info = info;
                  return positions;
              }
          }, false);
        }
      }
    },

but the whole config I have for the xAxis is here

  xAxis: {
    events: {
      setExtremes: function(e) {
        if (e.trigger === "rangeSelectorButton" && e.rangeSelectorButton.text === "All") {
          var range = e.max - e.min;

          // ticks spaced by one day or one hour
          var ticksSpacing = range >= 86400 * 1000 ? 86400 : 3600;

          this.update({
              tickPositioner: function() {
                  var positions = [],
                  info = this.tickPositions.info;
                  for (var x = this.dataMin; x <= this.dataMax; x += ticksSpacing * 1000) { // Seconds * 1000 for ticks
                      positions.push(x);
                  };
                  positions.info = info;
                  return positions;
              }
          }, false);
        }
      }
    },
    title: {
      enabled: true,
      text: 'Date (Timezone: PST)',
      style: {
        color: 'white'
      }
    },
    labels: {
      style: {
        color: 'white'
      }
    },
    type: 'datetime',
    dateTimeLabelFormats: {
        day: '%b %e, %Y'
    },
    tickInterval: 1
  },

So you understand, here are images when an initial load; (selected: 6) in rangeSelector by default, which seems normal at first and not run the script function

enter image description here

What happens after selecting the All button manually from default load

enter image description here

To zoom in on how the xAxis labels are being affected, the dates are formatted to this now

enter image description here

0 answers