CODEWITHSUNDEEP
javascripthighcharts
Bernardo Marques
Bernardo Marques

Reputation: 1055

Change chart property with onClick event

I'm trying to change data vizualization with an onClick event. But since property is defined when chart is called I can´t get the property to update. I'm using a button from exporting menu, so I don´t think using a jQuery method to update would work.

What I'm trying to achieve is this: 

          customButton: {
            text: "Update",
            onclick: function() {
              if (!isStackingPercentage) {
                handlePercentageClick()
                //redraw chart?
              }
              else if (isStackingPercentage) {
                handleStackingClick()
                //redraw chart?
              }
            }
          }

The property is defined this way

    plotOptions: {
        column: {
          stacking: isStackingPercentage ? "percent" : "stacking",
          dataLabels: {
            enabled: false
          }
        }
      },

Here is a working example

Upvotes: 0

Views: 170

Answers (1)

ppotaczek
ppotaczek

Reputation: 39079

You can access chart reference through this in onclick function and use update method:

  exporting: {
    buttons: {
      customButton: {
        text: "Update",
        onclick: function() {
          if (!isStackingPercentage) {
            handlePercentageClick();
            this.update({
              plotOptions: {
                column: {
                  stacking: 'percent'
                }
              }
            });
          } else if (isStackingPercentage) {
            handleStackingClick();
            this.update({
              plotOptions: {
                column: {
                  stacking: 'normal'
                }
              }
            });
          }
        }
      }
    }
  }

Live demo: https://jsfiddle.net/BlackLabel/rb584w70/

API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart#update

Upvotes: 1

Related Questions