CODEWITHSUNDEEP
javascriptchartshighcharts
ilazgo
ilazgo

Reputation: 650

How can I move columns to the right in a Highcharts chart?

I have a column chart with Highcharts library, something like this:

chart

If you see the red lines maybe you notice what I want achieve. I need to reduce the space between columns and move them to the right, so the chart will have more space between the y-labels and the first column.

Notice that I need a fixed width of 48px for every column. I tried with with groupPadding : 0 and pointPadding : 0 with no luck.

plotOptions : {
    series : {
        colorByPoint : true,
        pointWidth : 48,
        borderWidth : 0,
    }
},

All the sample code is on jsFiddle.

How can I move all the columns to the right and reduce the space between columns?

UPDATE: As an answer says, a solution is to change the container width to a smaller one. But I need that the grid lines (the grey ones) fill all the page (actually, fill the parent div that would have more width than the chart container). Is it possible to draw the grey lines (the grid lines) outside the chart?

Upvotes: 1

Views: 3386

Answers (3)

ilazgo
ilazgo

Reputation: 650

Finally I've done what @HristoIvanov told me in a comment. They suggest that I should put NULL columns at the begining.

Setting the first categorie as NULL and not showing it, is what I need because highcharts left the space for the first column.

That's the code that I needed:

xAxis : {
    showFirstLabel: false,
    categories : [ null, 'A', 'B', 'C', 'D', 'E', 'F', 'G' ],
    [ ... ]

And don't forget the data:

series : [
    { data : [null, 11, 22, 53, 74, 65, 46, 37] }

You can view the result in jsFiddle.

Upvotes: 1

rogMaHall
rogMaHall

Reputation: 691

This looks more like what you were going for: JSFiddle

There were a couple things that were giving you trouble. The chart by default wants to fill out the div it's in as much as possible because of Highcharts default settings (check out the reflow option). So to keep the columns close together you have set a max-width or width on the container that you feel satisfies the spacing between columns.

<div id="container" style="max-width: 650px; height: 520px; margin: 0 auto"></div>

And give yourself a little more margin on the left of the chart to compensate. 

chart : {
  renderTo : 'container',
  type : 'column',
  showAxes : true,
  marginRight : 0,
  marginLeft : 50,
  spacingLeft : 20,
  spacingRight : 0
},

The second is the offset of the y-axis labels to give some spacing between them and the first column. Highcharts doesn't seem to have an initial offset for the first x point, but offset should suffice.

yAxis: {
   offset: 60
}

Upvotes: 1

Ezio Auditore
Ezio Auditore

Reputation: 169

Your code was with a ","

Try this:

            plotOptions : {
                series : {
                    colorByPoint : true,
                    pointPadding : 0,
                    groupPadding : 0 
                }
            },

Here is your demo: http://jsfiddle.net/zgypy32h/5/

http://jsfiddle.net/zgypy32h/4/

Upvotes: 0

Related Questions