gbath
Posts: 2
Joined: Tue Apr 03, 2012 10:51 pm

Column spacing

Hi,

I've just started using the really nice highcharts library and have one question about column spacing.

The options I've used are at http://jsfiddle.net/qeL8f/, which works fine with tightly packed columns.

Using exactly the same options in my page, the following image shows how it renders. Notice the padding to the right and also the white lines? Any ideas why?
test.gif
test.gif (1.83 KiB) Viewed 4040 times
Thank you

Graham
jlbriggs
Posts: 1465
Joined: Tue Sep 21, 2010 2:33 pm

Re: Column spacing

I have also noticed that the placement of columns gets a bit buggy if you want this level of control.

You would think that with pointPadding, groupPadding, shadows and borders all disabled, there would be no gap between any columns, but the code that has to calculate the pixel placement seems to have a little trouble picking the right pixel in these cases.
Being able to set the pointPadding as a pixel value instead of a proportion would certainly be nice as well...I would really love to be able to set a 1px gap between columns in a lot of cases.

I have not found a suitable solution for this problem. Makes for some less than ideal histograms...
fiddles: http://jsfiddle.net/jlbriggs/J9JLr/
Fusher
Posts: 7912
Joined: Mon Jan 30, 2012 10:16 am

Re: Column spacing

I agree, but think, that may be caused not only by Highcharts, but also by SVG - the same example in VML (IE7/8) works fine. When you look into the DOM, rectangles have good positions and width/height (distance between columns is equal to width of the columns) but SVG is vector graphic, not pixel.
There is to options to make this chart without this white spaces:
- add negative pointPadding (like -0.01)
- for each point in each series set attribute shape-rendering ( http://www.w3.org/TR/SVG/painting.html# ... ngProperty ) , this way for example: http://jsfiddle.net/Fusher/qeL8f/4/ (just add function 'click' button this to redraw/load function)

@jlbriggs:
The same way you can add 1px spacing between columns: http://jsfiddle.net/Fusher/qeL8f/5/
But again - it's vector graphic, working on pixels isn't the best idea.
Paweł Fus
Highcharts Developer
jlbriggs
Posts: 1465
Joined: Tue Sep 21, 2010 2:33 pm

Re: Column spacing

Interesting.
The difference in the rendering with crispEdges set ( http://jsfiddle.net/jlbriggs/9LGVA/113/ ) and without ( http://jsfiddle.net/jlbriggs/9LGVA/114/ ) is pretty significant.

Have to wonder why that isn't the default.
I suppose it has to do with people wanting smooth rounded corners and things like that...?

The 1px gap doesn't seem to really happen consistently even with that, but I understand your point as to why.

thanks.
fiddles: http://jsfiddle.net/jlbriggs/J9JLr/
gbath
Posts: 2
Joined: Tue Apr 03, 2012 10:51 pm

Re: Column spacing

Thank you both for the input. I've used a small negative pointPadding and it is working nicely.
User avatar
cailie
Posts: 81
Joined: Sun Aug 28, 2011 7:43 am
Location: Vancouver, BC, Canada
Contact: Website

Re: Column spacing

Hi all,

We ran up against this too last year, after columns were made more crisp. Our column charts are tightly packed, and we wanted only a subtle seam. We ended up tweaking the crisp function. As you have done, Torstein suggested that we use a small negative pointPadding.

Fusher, regarding your comment, "When you look into the DOM, rectangles have good positions and width/height (distance between columns is equal to width of the columns)...":

Due to flooring, the x values are not always spaced at intervals equal to the column width. In GBath's example, the width of each column is 6. But the x values are sometimes 5. Here are the first several x values:

Code: Select all

32 (+ 6)
38 (+ 6)
44 (+ 6)
50 (+ 5) *
55 (+ 6)
61 (+ 6)
67 (+ 6)
73 (+ 6)
79 (+ 6)
85 (+ 6)
91 (+ 6)
97 (+ 6)
103 (+ 5) *
108 (+ 6)
114 (+ 6)
120 (+ 6)
126 (+ 6)
132 (+ 6)
138 (+ 6)
144 (+ 6)
150 (+ 6)
156 (+ 5) *
161
and so on...

Cheers,
-C
User avatar
cailie
Posts: 81
Joined: Sun Aug 28, 2011 7:43 am
Location: Vancouver, BC, Canada
Contact: Website

Re: Column spacing

This issue is also discussed here:
http://highcharts.uservoice.com/forums/ ... -an-option

As promised in the feature request comments, here are screenshots of the chart when the browser is zoomed in a few levels.
Attachments
IE8 with zoom
IE8 with zoom
IE8_crisp_columns.PNG (62.92 KiB) Viewed 3863 times
Chrome with zoom
Chrome with zoom
Chrome_crisp_columns.PNG (53.07 KiB) Viewed 3863 times
lanbo
Posts: 34
Joined: Tue Sep 04, 2012 4:02 pm

Re: Column spacing

Hi guys,

I am also looking for a solution to this problem.

I'm using candlestick charts and sometimes (specially in small graphs) they tend to look blurry in IE9.
When IE9 is set in Quirks mode then they look crisp and nice.

I have tried the suggested solution of jquery + crispEdges but did not manage to make candles look crisp.

I was wondering what I was doing wrong. I decided to check jlbriggs examples above (jsfiddle) with IE9 and noticed that both of them look blurry.
There is not a single difference BUT in firefox edges look crisp (using crispEdges) and blurry (not using crispEdges). So I guess IE9 is not taking crispEdges attr into consideration for some reason.

I'm running Windows 7 + IE9. Any idea why crispEdges does not work in my IE9 configuration? I believe I'll have to render my charts in quirks mode, which sucks.

BTW, thanks for developing this great product. Small issues apart, highcharts is a very niece piece of code!
Last edited by lanbo on Thu Sep 27, 2012 7:32 am, edited 3 times in total.
lanbo
Posts: 34
Joined: Tue Sep 04, 2012 4:02 pm

Re: Column spacing

Well, it turns out IE9 does not honor shape-rendering :-(
See: http://stackoverflow.com/questions/7282 ... n-ie9?rq=1

In that post, these guys suggest to shift all elements by 0.5. I'm not sure how this could be achieved with highcharts. Any idea?

UPDATE:

HAHA :-) I fixed it.

This is my trick:

Code: Select all

            if (Ext.isIE9) //Use any ie9 detection technique you like
            {
                $(myChart.series).each(function(i, e) { //all series
                    $(e.data).each(function(i, e) { //all points
                        if (e.graphic)
                            e.graphic.translate(0,0.5);
                    });
                });
            }
Note that translating it will make it look blurry in chrome and other browsers. Thus, it is important to detect first whether your browser is IE9 and then translate by half a pixel in the y-axis direction.

I hope this may help others!

Return to “Highcharts Usage”