Setting the width of a single bar in Highcharts Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Setting the width of a single bar in Highcharts without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I’ve been trying to change the width of a single column in a bar chart created using Highcharts. Here is a codepen.

In all the search that I did, I could only find two solutions given in this question.

The problem with that is that since they are set dinamically after initialization, any action that calls the redraw method will revert their width to the calculated one.

Also, I don’t understand why they are using series[0].data[5].graphic.attr('width') and how it affects, since I don’t see such property in the object (console screenshot)

Finally, in the codepen I’m also changing the color of the same point, but doing it in the initialization function. I wonder if there is a way to do the same for the width.

Am I missing something? Because I didn’t find anything in the API docs and I’m clueless as to how these solutions actually work if there is no such property in the object.

Answer

Short explanation:

  • attr method is inherited from Element class. You can see that method in prototype (in console click __proto__). Method attr works in two ways: attr(property_name) is a getter (to get e.g. width) and attr({ property_name: value }) is a setter (to set e.g. width). If you use source files (.src.js), then you would notice that SVGElement class.

  • width will change on any redraw event, because it is recalculated again (like updating point, or resizing window). In fact you can use chart.events.redraw and there change width. In fact, I would use both, chart.events.redraw and chart.events.load with one function, to update widths.

And to explain, why you can’t set width in point, like you did with color: there is not such option on point level, like pointWidth. You can set specific width for all points within one series only (using mentioned pointWidth). There is an idea for Highcharts, to add such feature (to the core or as a plugin). Feel free to vote for it on the UserVoice. Here is interesting example: http://jsfiddle.net/75oucp3b/14/ (works with v4.1.8)

We are here to answer your question about Setting the width of a single bar in Highcharts - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji