What is the best way to add content to fill the empty space left after a column has been hidden in a column

Is there a way to automatically adjust the space when a column is hidden by clicking on the legend item?

<div id="container" style="height: 300px"></div>
<script src="http://code.highcharts.com/highcharts.src.js"></script>

    var chart = new Highcharts.Chart({

    chart: {
        type: 'column',
        renderTo: 'container'
    },

    "title":{  
      "text":"TITLE",
      "align":"left"
   },
   "subtitle":{  
      "text":"Subtitle Text",
      "align":"left",
      "style":{  
         "paddingBottom":"20px"
      }
   },
   "xAxis":{  
      "categories":[  
         "Category1",
         "Category2",
         "Category3",
         "Category4",
         "Category5"
      ],
      "crosshair":true,
      "title":{  

      },
      "labels":{  
         "enabled":false,
         "format":"{value}"
      }
   },
   "yAxis":{  
      "min":0,
      "title":{  
         "text":"Meters"
      },
      "labels":{  
         "format":"{value}"
      }
   },
   "tooltip":{  
      "enabled":true,
      "headerFormat":"<span style=\"font-size:10px\">{point.key}</span><br/>",
      "shared":true,
      "useHTML":true
   },
   "legend":{  
      "enabled":true,
      "align":"left",
      "useHTML":true
   },
   "plotOptions":{  
      "column":{  
         "pointPadding":0.2,
         "borderWidth":0,
         "dataLabels":{  
            "enabled":true,
            "format":"{point.y:.2f} ",
            "style":{  
               "textShadow":0
            }
         }
      },
      "series":{  
         "grouping":false
      }
   },
    "series":[  
      {  
         "name":"Category1",
         "data":[  
            {  
               "name":"Category1",
               "y":45,
               "x":0
            }
         ]
      },
      {  
         "name":"Category2",
         "data":[  
            {  
               "name":"Category2",
               "y":43,
               "x":1
            }
         ]
      },
      {  
         "name":"Category3",
         "data":[  
            {  
               "name":"Category3",
               "y":43,
               "x":2
            }
         ]
      },
      {  
         "name":"Category4",
         "data":[  
            {  
               "name":"Category4",
               "y":42,
               "x":3
            }
         ]
      },
      {  
         "name":"Category5",
         "data":[  
            {  
               "name":"Category5",
               "y":42,
               "x":4
            }
         ]
      },
      {  
         "name":"",
         "data":[  
            {  

            }
         ],
         "visible":false,
         "showInLegend":false,
         "exporting":false
      },
      {  
         "name":"Bla bla bla",
         "data":[  
            45,
            43,
            43,
            42,
            42
         ],
         "showInLegend":false,
         "visible":false,
         "exporting":true
      }
   ],
   "exporting":{  
      "enabled":false,
      "chartOptions":{  
         "legend":{  
            "enabled":true,
            "maxHeight":null,
            "itemStyle":{  
               "fontFamily":"Arial"
            }
         }
      }
   },
   "loading":{  
      "style":{  
         "opacity":0.9
      }
   },
   "drilldown":{  
      "drillUpButton":{  
         "theme":{  
            "style":{  
               "display":"none"
            }
         }
      }
   }
});

Check out the live example here.

After clicking on the first or last legend item, the chart redraws, but this doesn't occur when clicking on a middle legend item. Is this a bug or a feature? How can I modify this behavior so that clicking on middle legend items also triggers a chart redraw?

Thank you in advance

Answer №1

To eliminate empty space on the xAxis, consider setting and updating breaks:

http://jsfiddle.net/a4vcye4p/1/

  events: {
    legendItemClick: function() {
      var series = this,
        seriesIndex = series._i,
        xAxis = series.xAxis,
        newBreaks = [];
      if (series.visible) {
        newBreaks = xAxis.options.breaks;
        newBreaks.push({
          from: seriesIndex,
          to: seriesIndex + 1,
          seriesIndex: seriesIndex
        });
      } else {
        Highcharts.each(xAxis.options.breaks, function(br) {
          if (br.seriesIndex !== seriesIndex) {
            newBreaks.push(br);
          }
        });
      }
      xAxis.update({
        breaks: newBreaks
      });
    }
  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Strategies for organizing your week with a calendar

Hello, I am working on creating a weekly calendar using PHP and I want to add events to the calendar like in this example. However, I am unsure how to display the events in the calendar at the correct time of day. Here is the code snippet I am currently u ...

Distinguishing the Mouse Wheel Event

Take a look at this code snippet: <script type="text/javascript"> var scrollFunc = function(e) { var direct = 0; e = e || window.event; if(e.wheelDelta) {//IE/Opera/Chrome userMouse(e.wheelDelta); } else if(e.detail) {//Fire ...

Is there a way to switch (transpose) the rows and columns of a dynamically generated HTML table from Highchair in Angular 12?

Click here to view the code for creating a highchart table. In the provided example, I have successfully implemented a highchart table using the code below. Highcharts.chart('container', { title: { text: 'Solar Employment Growth by Sec ...

Guide on enabling a new input field in React when a dropdown option is selected by a user

I'm attempting to show an additional input field when the user selects "Other" from the dropdown menu. I have implemented a state for the input field that toggles between true and false based on the selected value from the dropdown. However, I am enco ...

Why does Javascript Tic-Tac-Toe delay notifying the user until the entire board is full?

There have been a lot of questions about Tic-Tac-Toe javascript, but my issue is unique. My code works fine, but it doesn't declare a winner or a tie game until the entire board is filled. I suspect that my if statements are causing problems and can&a ...

Inquiring about socket.io: How can an io emit its own signal?

I am currently working on implementing the emit event in an express router, and I'm attempting to pass a global.io variable. However, I've encountered an issue where despite adding the following code: io.emit('join','Tudis' ...

Managing the React Router component as a variable

I'm currently working on integrating React-Router into an existing React app. Is there a way to use react-router to dynamically display components based on certain conditions? var displayComponent; if(this.state.displayEventComponent){ {/* ...

Navigating Angular with relative paths: A guide to locating resources

Here is the structure of my app: index.html main.ts app |--main.component.html |--main.component.ts |--app.module.ts |--note.png ... etc I am trying to include the note.png file in main.component.html which is located in the same folder. I have att ...

Delay in loading of parent when UI-router child resolves

The child state resolves are causing a delay in loading the parent state Here is how my states are configured: $stateProvider .state('a', { url: '/a/:aid', controller: 'ACtrl', t ...

Using Conditional Rendering and ReactCSSTransitionGroup for Dynamic Animations

I have developed a small application that displays different components based on a Redux state. I am trying to add a "fade" animation when one of the components renders, but unfortunately, it is not working as expected. Here is my current setup: content.j ...

Can you retrieve data or HTML content from the main Vue 3 component?

I have experience using Vue in previous projects but I'm currently facing some challenges on how to pass information/arguments to a root Vue 3 component. My goal is to set up something like this in my HTML: <div class="nav-app" nav=&quo ...

The Controller's ActionResult methods are not successfully collecting form data sent through an ajax request

I'm facing an issue with my purchase form where the purchase_return object in the controller is not receiving any data. It seems to be getting productId as 0 and productNm as null. Can someone help me figure out what's causing this issue? Here&a ...

Bringing the Jquery cursor into focus following the addition of an emoji

Looking to add emojis in a contenteditable div but facing an issue with the cursor placement. Here is a DEMO created on codepen.io. The demo includes a tree emoji example where clicking on the emoji adds it to the #text contenteditable div. However, after ...

Custom Typescript type that runs concurrently with the base type is disregarded

Assumption: When creating a custom type that mirrors an existing type, the expectation is for variables assigned to that type to maintain it and not default back to the base type. In the function f provided below, the expected return type should be Dog ins ...

Unable to access object key data from JSON-SERVER

I am currently attempting to send a GET request to json-server in order to retrieve data from a nested object. However, the response I am receiving is empty instead of containing the desired data key. After thoroughly reviewing the documentation, I could ...

bespoke JavaScript confirmation dialogue box

After customizing a confirmation box for the logout feature, I encountered an issue. When the user presses cancel, the box closes and control remains on the same page as expected. However, when the user clicks yes to logout, nothing happens. Could anyone p ...

Utilizing pop-up info boxes

After thoroughly reviewing the documentation on Imagemapster's website and browsing several posts, I am still struggling to get the tooltips working correctly. I attempted to share my HTML and JS code on jsfiddle.com without success, so I have provide ...

Refresh the Page or URL After Submitting a Form using JavaScript or PHP

Just a heads up: I'm fairly new to the world of web development. Currently, I'm in the process of crafting an event calendar using CodeIgniter. However, I've hit a bit of a snag. Whenever I try to update an event using JavaScript, the page ...

"Encountering a problem with the client-session middleware: the value of req.session_state is becoming undefined

I'm facing an issue with client-session middleware in Express. After setting the session_state, it doesn't seem to be accessible when redirecting to a new route. I followed a tutorial on YouTube (client-session part starts at around 36:00) and do ...

Troubleshooting: Mongoose Array Object Order Modification Issue

Imagine we have a person named Michael who lists his favoriteFruits as [ { name: 'Apple'}, {name: 'Banana'} ] The challenge at hand is to change the order of his favorite fruits. In other words, we want to transform it from: [ { name ...