CODEWITHSUNDEEP
javascripthighcharts
Sarahrb
Sarahrb

Reputation: 669

Enable x-axis label for the last chart selected

I have common x axis for all 3 charts. Want to show X-axis label only for the last chart selected. I wouldn't know exactly how many chart I would select. So this has to be dynamic.

I tried below: I initially disable x-axis label for all charts. Need to enable x-axis label only for the last chart selected(Which would be the bottom most chart).

 document.querySelectorAll('#checkboxes input').forEach(function(checkbox) {
 checkbox.addEventListener('change', (e) => {
 const id = e.target.dataset.id,
 checked = e.target.checked,
 checkedCheckboxes = document.querySelectorAll('#checkboxes input:checked').length,
 node = document.querySelector(`#chart${id}`);

 const chartEps = [
    chartEp1,
    chartEp2,
    chartEp3,
  ] 
  console.log("id", id)   
  //chartEps[id].xAxis[0].options.labels.enabled = true

  // The ID has to be the id of last chart selected. So that only for last chart xAxis label is enabled.   
  chartEps[id].update({ 
  labels: {
     enabled: true
 },
 });

Please see fiddle: https://jsfiddle.net/xhLt6a01/8/

Instead of dynamic x axis label, I also tried setting empty chart with x axis which need to shown at all times at the bottom (commented code at the bottom of fiddle).

But couldn't get both options to work. I would really appreciate If I could get any help on this.

Upvotes: 3

Views: 239

Answers (1)

kikon
kikon

Reputation: 8620

To dynamically enable/disable the labels, in the update call, set the option xAxis, but (somehow unexpectedly) it should be at the top level of the options object, at the same level as chart:

Highcharts.charts.forEach(function(chart, i) {
  chart.update({
     chart: {
        height: height / checkedCheckboxes
     },
     xAxis:{
        labels: {
           enabled: ...your boolean criterion here for chart i... 
        }
     }
  });
});

For the particular case when you want to enable the axis only for the last shown chart I'd use something on lines of

{enabled: selected[i] && selected.indexOf(true, i+1) === -1}

where selected is an array that keeps track on selected checkboxes, that is equivalent to shown charts. Take a look at this fiddle for a modified version of your original code.

Upvotes: 2

Related Questions