PDA

View Full Version : Scrollable charts legend



jksuf
20 Feb 2015, 2:19 AM
Hi guy,

I have a very simple fiddle that describes my problem https://fiddle.sencha.com/#fiddle/ij3.
But to sum up: I have 4 series in a bar chart. They all have a long name, so the legend is very big but the chart's width is not big enough to render the entire legend, so the last item is partially visible.
What I would like to know is if there is a way to :

Display a horizontal scrollbar in the legend so the user can scroll to see every items

Or

Make the items to stack on a new line when there isn't enough space
The same code is here:


Ext.define('CustomChart', {
extend: 'Ext.chart.CartesianChart',

width: 390,
height: 400,

legend: {
docked: 'bottom'
},

store: Ext.create('Ext.data.JsonStore', {
fields: ['month', 'data1', 'data2', 'data3', 'data4' ],
data: [
{ month: 'Jan', data1: 20, data2: 37, data3: 35, data4: 4 },
{ month: 'Feb', data1: 20, data2: 37, data3: 36, data4: 4 },
{ month: 'Mar', data1: 19, data2: 36, data3: 37, data4: 4 }
]
}),

axes: [{
type: 'numeric',
position: 'left',
grid: true,
fields: ['data1']
}, {
type: 'category',
position: 'bottom',
grid: true,
fields: ['month']
}],

series: [{
type: 'bar',
axis: 'left',
title: [ 'a long name 1', 'a long name 2', 'a long name 3', 'a long name 4' ],
xField: 'month',
yField: [ 'data1', 'data2', 'data3', 'data4' ],
stacked: true
}]
});


var chart = Ext.create('CustomChart', {
renderTo: Ext.getBody()
});


Ext.create('Ext.form.Label', {
html: '<br/><br/>As you can see, the last item in the legend ("a long name 4"), is not visible due to the chart width.<br/>' +
'Is it possible to:<br/><br/>' +
'1 - Display a horizontal scrollbar in the legend so the user can scroll to see every items.<br/>'+
' OR<br/>'+
'2 - Make the items to stack on a new line when there isn\'t enough space.<br/>',
width: 300,
height: 300,
renderTo: Ext.getBody()
});


Thanks a lot in advance :) !

slemmon
16 Mar 2015, 2:12 PM
Hi,

When I test I'm seeing a scrollbar on OSX + Chrome (though the scrollbar is hidden until you scroll since it's Chrome's default scroll behavior).

What OS / browser are you testing with where you're not seeing the scrollbar?

jlockhart
24 Apr 2015, 11:54 AM
Through the author's fiddle I am unable to get a horizontal scroll bar using Windows 7 + Chrome (up to date). Is there any way to force the legend to render a scroll bar?