CODEWITHSUNDEEP
javascripthighcharts
darkpool
darkpool

Reputation: 14661

Setting a custom variable in Highcharts

Is there a way to create a variable that gets given a value when a highcharts object is created, which can be accessed later on.

For example when working with a chart that allows you to drilldown/drillup levels, there is no way that im aware of to keep track of which level you're on. I therefore create a flag that starts at level 0, and gets updated whenever the chart fires a drillup/drilldown event, eg:

var drilldown_level = 0;
var template = {
    chart: {
        type: 'column',
        events: {
            drillup: function() {
                drilldown_level -= 1;
            },
            drilldown: function() {
                drilldown_level += 1;
            }
        }
    },
    // other options and data go here
}

var chart = new Highcharts.Chart(template);

The above works well enough when you've only got one chart. Whenever I need to know what drilldown level the chart is on, I simply check the drilldown_level variable. However the problem comes when I have multiple charts. I need a way to set create a drilldown_level variable per chart instance, so I can then refer to each specific chart's drilldown_level.

Is there a way to create a flag or variable that can be referred to in this way for each chart?

Upvotes: 0

Views: 1689

Answers (2)

Hien Nguyen
Hien Nguyen

Reputation: 18973

This is my way to set custom variable formatDate and use it in xAxis formatter.

I share for whom concern.

let formatDate = this.chart.userOptions.formatDate;

chartOption = {
    chart: {
      spacingBottom: 0,
      spacingTop: 10,
      spacingLeft: 0,
      spacingRight: 0
    },
    title: {
      text: '단위(억원)',
      align: 'left',
      style: {
        color: ConstantsConfigChart.colorText,
        fontSize: ConstantsConfigChart.fontsize14
      },
      x: 0
    },
    subtitle: {
      text: ' '
    },
    yAxis: {
      title: {
        text: ' '
      },
      labels: {
        formatter: function () {
          return Highcharts.numberFormat(this.value / 100000000, 2);
        }
      },
      tickAmount: 5
    },
    xAxis: {
      type: 'datetime',
      dateTimeLabelFormats: {
        day: '%Y-%m-%d'
      },
      labels: {     
        formatter: function () {

          let formatDate = this.chart.userOptions.formatDate;

          let currentPoint = this.chart.series[0].userOptions.data.find(c => c.x == this.value);
          if (formatDate == DateFormat.WEEK) return currentPoint.display;
          if (formatDate == DateFormat.DAY) return Highcharts.dateFormat('%m월 %d일', this.value);
          if (formatDate == DateFormat.MONTH) return Highcharts.dateFormat('%m월', this.value);
        },
        rotation: 45
      },
      offset: 10,
    },
    colors: this.colorService.pickColors(),
    series: [],
    exporting: {
      enabled: false
    },
    credits: {
      enabled: false
    },
    formatDate: DateFormat.WEEK
  };

var dashboard1 = Highcharts.chart('dashboard1', chartOption);

Upvotes: 0

Grzegorz Blachliński
Grzegorz Blachliński

Reputation: 5222

You can add drilldownLevel variable directly into your chart: 

chart: {
  type: 'column',
  events: {
    load: function() {
      this.drilldownLevel = 0;
    },
    drilldown: function() {
      this.drilldownLevel += 1;
    },
    drillup: function() {
      this.drilldownLevel -= 1;
    }
  }
},

This will give you a chance to use check drilldown level for multiple charts.

Here you can see simple example how it can work: http://jsfiddle.net/qwuxwzx5/

And here you can find example with two charts: http://jsfiddle.net/qwuxwzx5/1/

Upvotes: 2

Related Questions