Set initial state for (custom) buttons before drawing - HighCharts

315 Views Asked by At

In HighCharts, is there any way to define the initial/default state of a button before drawing the chart ?

Right now I execute a function after the chart was drawn and disable some of my custom buttons (range buttons)

chart.exportSVGElements[X].setState(3)

but I'm wondering if it isn't possible to simply define something

states: {
  hover: {
    lineWidth: 2
  }
},
currentState: 3

in my "config" object.

Thanks in advance, and sorry if I missed it in the documentation

Edit: Yes sorry you are right I didn't show how I initialise my buttons :

exporting: {
sourceWidth: 1400,
sourceHeight: 600,
scale: 1,
buttons: {
  contextButton: {
    menuItems: [
      'printChart',
      'separator',
      'downloadPNG',
      'downloadJPEG',
      'downloadPDF',
      'downloadSVG',
      'separator',
      'downloadCSV',
      'downloadXLS',
      'separator',
      {
        text: 'Delete graph',
        onclick: function() {
           deleteGraph(this.renderTo.id);
        }
      }
    ]
  },
  customButton: {  //Add Serie Button
    onclick: function (e) {
      if( $(this.renderTo).hasClass("is-monitoring") ){
        toastr.error("Unable to add a new serie during monitoring.");
        return false;
      }

      toggleFiltreWidthFromChart(this);
    },
    className: UI_IDs.customHighChartsAddPointButton,
    symbol: 'deleteGraphe',
    symbolStroke: 'red'
  },
  j_1: {
    text: "YTD",
    className: UI_IDs.customHighChartsZoomButton + " j_1",
    onclick: function (event) {
        if (this.series.length < 0)
            return false;

      var max = this.xAxis[0].dataMax,
          range = 24 * 3600 * 1000;  //one day
      this.xAxis[0].setExtremes(max - range, max);
    }
  },
  j_7: {
    text: "Last week",
    className: UI_IDs.customHighChartsZoomButton + " j_7",
    onclick: function (event) {
        if (this.series.length < 0)
            return false;

      var max = this.xAxis[0].dataMax,
          range = 7 * 24 * 3600 * 1000;  //7 days
      this.xAxis[0].setExtremes(max - range, max);
    }
  },
  j_30: {
    text: "30 derniers jours",
    className: UI_IDs.customHighChartsZoomButton + " j_30",
    onclick: function (event) {
        if (this.series.length < 0)
            return false;

      var max = this.xAxis[0].dataMax,
          range = 30 * 24 * 3600 * 1000;  //30 days
      this.xAxis[0].setExtremes(max - range, max);
    }
  },
  j_all: {
    text: "See All",
    className: UI_IDs.customHighChartsZoomButton + " j_all",
    onclick: function (event) {
      this.zoomOut();
    }
  },
  remove_last_annotation: {
    symbol: removeLastAnnotation,
    symbolX:19,
    symbolY:19,
    _titleKey: "removeLastAnnotation",
    className: UI_IDs.removeLastAnnotation_base64,
    onclick: function (event) {
      if (this.annotations.length < 1)
        return false;

      this.annotations[this.annotations.length-1].destroy();
      this.annotations.splice(this.annotations.length-1, 1);
    }
  }
}
}

This is a part of a big JS Object that defines a "default" config, and when the user wishes to create a new graph, I call (and store)

charts.push(Highcharts.chart(graphId, config, function(){
   ...
}));
0

There are 0 best solutions below