I have a 250px wide column chart, it looks great when there are 10+ items in the series, but when there's only 2-3, the bars are drawn really wide, which looks somewhat odd.

   _____
  |     |
  |     |
-----|-----

I can set the width in the series config:

{
  style: { width: 25 }
}

This works, but the thinner bars are still left-aligned with their previous position, so they don't match up with the axis tick and label.

Like so:

   _
  | |
  | |
-----|-----

I don't want to change the axis spacing, I want to end up with widely-spaced, 25px bars (that are correctly centered on the axis tick):

     _
    | |
    | |
-----|-----

Any ideas?

I have a 250px wide column chart, it looks great when there are 10+ items in the series, but when there's only 2-3, the bars are drawn really wide, which looks somewhat odd.

   _____
  |     |
  |     |
-----|-----

I can set the width in the series config:

{
  style: { width: 25 }
}

This works, but the thinner bars are still left-aligned with their previous position, so they don't match up with the axis tick and label.

Like so:

   _
  | |
  | |
-----|-----

I don't want to change the axis spacing, I want to end up with widely-spaced, 25px bars (that are correctly centered on the axis tick):

     _
    | |
    | |
-----|-----

Any ideas?

• javascript
• extjs
• charts
• extjs4

5 Answers 5

renderer: function(sprite, record, attr, index, store) {                    

    return Ext.apply(attr, {
        fill: color,
        width: 50,
        x: Math.max(attr.x, attr.x + (attr.width - 50) / 2)
    });
}

Maybe a bit to late but this is my solution

renderer: function(sprite, record, attr, index, store) {                    

    return Ext.apply(attr, {
        fill: color,
        width: 50,
        x: Ext.getCmp('chart_id').axes.items[1].inflections[value][0] - 25
    });
}

In this example I read the x axe and find any given point (label stripes) than I looped though my bars, you can use a count or something and use in instead of value. Hope it works!

//try like below
series:[
    {...
        style:{
            minBarWidth:5,
            maxBarWidth:5
        }
    },
    {...}
]

I think the problem is that the chart you are looking for is Cartesian one and the column chart doesn't work for you because it hasn't any exact X value.

So, I simulate the Cartesian chart (like Line chart) to look like the column chart like this:

It's a trick somehow but it works fine for me.

axes: [{
        type: 'Numeric',
        position: 'bottom',
        fields: ['min-X','max-X']
}, {
        type: 'Numeric',
        position: 'left',
        fields: ['min-Y','max-Y']
}],

series: [{
        type: 'line',
        axis: ['bottom', 'left'],
        xField: 'line1-X',
        yField: 'line1-Y',
        showMarkers: false,
        style: {
                stroke: '#ccc',
                'stroke-width': 10
        }
},{
        type: 'line',
        axis: ['bottom', 'left'],
        xField: 'line2-X',
        yField: 'line2-Y',
        showMarkers: false,
        style: {
                stroke: '#ccc',
                'stroke-width': 10
        }
},{
        type: 'line',
        axis: ['bottom', 'left'],
        xField: 'line3-X',
        yField: 'line3-Y',
        showMarkers: false,
        style: {
                stroke: '#ccc',
                'stroke-width': 10
        }
},{
        type: 'line',
        axis: ['bottom', 'left'],
        xField: 'line4-X',
        yField: 'line4-Y',
        showMarkers: false,
        style: {
                stroke: '#ccc',
                'stroke-width': 10
        }
}]

And the data:

{
        line1-X: 2,   line1-Y: 0,
        line2-X: 5,   line2-Y: 0,
        line3-X: 5.5, line3-Y: 0,
        line4-X: 8,   line4-Y: 0,

        min-X: 0,  min-Y: 0,
        max-X: 10, max-Y: 100
},{
        line1-X: 2,   line1-Y: 40,
        line2-X: 5,   line2-Y: 80,
        line3-X: 5.5, line3-Y: 60,
        line4-X: 8,   line4-Y: 100,

        min-X: 0,  min-Y: 0,
        max-X: 10, max-Y: 100
}

But in this approach you have to know the maximum number of Columns(Lines) you have. And each time insert Zero(0) data to one you don't want to show. If you don't know the number of Columns(Lines) you have to create them dynamically.

This is my idea and it works the way I want it. Maybe it helps you to find your solution.

try using the "gutter" property to set the gap between the column.