Get Free Trial

Highcharts not changing Y-axis label when drilldown

Answered
Patrick Berens asked on November 9, 2020

Hi ya Support,
We are trying to integrate Highcharts with Flexmonster and we are running into problem in the drilldown view. It seems it doesn’t change the y-axis label when drilling down so viewers of just the graph aren’t sure what dimension they are seeing.
 
From your example:

  1. Go to https://jsfiddle.net/flexmonster/qf73smhf/
  2. Scroll down to chart, click on “Blue”
  3. Notice y-axis label still says “Color” not “Region”

 
Anyway to fix this?
Thanks,
Patrick

5 answers

Public
Vera Didenko Vera Didenko Flexmonster November 10, 2020

Hello, Patrick,
 
Thank you for writing to us. 
 
We kindly suggest using the Highcharts setTitle method together with Highcharts drilldown and drillup events.
For instance: 

function createAndUpdateChart(chartConfig) {

let defaultTitleXAxis = "Color";
let drilldownTitleXAxis = "Region";

chartConfig.title.text = "With Drilldown";

chartConfig.chart.events = {
drilldown: function(e) {
this.xAxis[0].setTitle({ text: drilldownTitleXAxis });
},
drillup: function(e) {
this.xAxis[0].setTitle({ text: defaultTitleXAxis });
}
};

Highcharts.chart('highcharts-container', chartConfig);
}

We have modified the provided JSFiddle to illustrate this approach: https://jsfiddle.net/flexmonster/93kcqabv/
 
Please let us know if this helps.
 
Kind regards, 
Vera

Public
Patrick Berens December 20, 2020

Sorry, got pulled off onto something else.
 
Thank you for the code example. However, we are letting our users select charts arbitrarily and we’d rather not code this ourselves manually since we are already selecting data from flexmonster.
 
I looked in the chartConfig object, and it has “Region” and “Count of Business Type” available, but it doesn’t have the column name “Business Type”. Is this omission perhaps a bug? It would be nice if we could get at it within the chartConfig or if it was populated correctly during drilldown in highcharts to begin with that would be best!
 
I’ve updated the fiddle so that it responds to the pivot table above rather than having its own config. I’ve also included a console.log to show chartConfig state with missing “Business Type” value.
https://jsfiddle.net/hdtL4f31/10/
Thanks,
Patrick

Public
Vera Didenko Vera Didenko Flexmonster December 21, 2020

Hello, Patrick, 
 
Thank you for your response.
 
Regarding "Business Type" not being displayed in the chart configuration:
We would like to kindly explain that this is expected: the chart configuration returned by the Highcharts connector corresponds to the Highcharts documentation.

Our team has prepared a quick fix for the issue with the Y-axis label not changing when drilling down.
Please see the sample project in the attachments "flexmonster-highcharts-drilldown-fix.zip"
The project contains the following:

  1. flexmonster.highcharts.js – the fixed version of Flexmonster Highcharts connector.
  2. index.html – a Flexmonster and Highcharts example with drilldown using the updated flexmonster.highcharts.js file.

 
Could you please let us know if this works fine for you?
If so, our team will add this fix to the upcoming minor release of Flexmonster with the ETA 28th of December.
 
Looking forward to your feedback.
 
Kind regards, 
Vera

Public
Patrick Berens December 24, 2020

Looks great, thanks so much!
Patrick

Public
Vera Didenko Vera Didenko Flexmonster December 30, 2020

Hello, Patrick, 
 
We are happy to inform you that our team has added the fix to the latest version of Flexmonster.
 
Should any questions arise, please feel free to reach out.
 
Kind regards, 
Vera

Please login or Register to Submit Answer