View Full Version : Remove padding from chart (type column / stacked)

4 May 2012, 6:26 AM
I've been trying to make a very simplistic Ext chart for the better part of the day, and whilst the charts api seems well documented and quick to use, I have become stumped on implementing my stacked bar chart effectively.

I am trying to make a stacked bar chart with no axis, with text centred inside the bars of a singular stacked bar which takes up a set amount of space.

However the text always appears to not centre inside the bar and the stacked bar chart appears to have padding on either side of it, which I can not seem to be able to remove.

I am trying to make the width of the graph level with the ext buttons, however some left padding is causing this to not happen, any help would be much appreciated... Please find code below


var exampleStore = Ext.create('Ext.data.JsonStore', {
fields: ['veryLowName', 'lowName', 'okName', 'highName', 'veryHighName', 'veryLow', 'low', 'ok', 'high', 'veryHigh'],
data: [
veryLowName: 'very Low',
lowName: 'low',
okName: 'ok',
highName: 'high',
veryHighName: 'veryHigh',
veryLow: 34000000,
low: 23890000,
ok: 18450000,
high: 20060000,
veryHigh: 20060000

var colors = [

'rgb(255, 165, 0)',
'rgb(255, 140, 0)',
'rgb(127, 255, 47)',
'rgb(255, 215, 0)',
'rgb(255, 255, 0)'


Ext.chart.theme.Browser = Ext.extend(Ext.chart.theme.Base, {
constructor: function (config) {
Ext.chart.theme.Base.prototype.constructor.call(this, Ext.apply({
colors: colors
}, config));

var chart = Ext.create('Ext.chart.Chart', {
width: baseWidth,
height: baseHeight,
animate: true,
theme: 'Browser:gradients',
shadow: true,
store: exampleStore,
series: [{
type: 'column',
width: baseWidth,
showInLegend: true,
yField: ['veryLow', 'low', 'ok', 'high', 'veryHigh'],
stacked: true,
tips: {
trackMouse: true,
width: 65,
height: 28,
renderer: function (storeItem, item) {
this.setTitle(String(item.value[1] / 1000000) + '%');
label: {
field: ['veryLowName', 'lowName', 'okName', 'highName', 'veryHighName'],
display: 'middle',
contrast: true,
font: '18px Arial'
chart.legend = {
position: 'left'

me.monitorPanel = new Ext.Panel({
width: baseWidth,
height: 600,

11 May 2012, 2:58 PM
You will have to inspect your text in element inspector to get the correct CSS to modify.