I just started using angular-nvd3 and can't seem to find out how to keep the legend text from being truncated. I'm using the bar+line graph and the legend text uses the "key" property of the data for the legend text, appended with (left axis) and (right axis). If the key property name is longer than 20 characters it's being truncated and appended with an ellipses. How do I keep the legend text from being truncated?
legend: {
align: false,
padding: 40,
width: 100
},
The align false will stop truncating, the padding and width are extra to help it look nice.
Related
Issue description
I have a paging-enabled grid with 100+ pages of data. Page size = 100 rows.
Even on page 1, if I drag the scroll box to the bottom of the grid, I see a large white space at the bottom of the grid.
Jump to page 30, and if I drag the scroll box to the bottom of the grid, I see a large white space at the bottom of the grid. If I drag the scroll box up and down the grid, I see flashes of large white spaces appearing in the middle of the grid as well (which are soon painted over with rows of data).
This does not provide a smooth scrolling experience to end users.
Picture showing large white space at the bottom
Picture showing large white space in the middle
ExtJS version tried: 7.4.0
Steps to reproduce the issue:
Here’s the fiddle to reproduce this issue:https://fiddle.sencha.com/#view/editor&fiddle/3e98
(1) On page 1, if you drag the scroll box to the bottom of the grid, you will see a large white space at the bottom of the grid.
(2) Jump to page 30, and if you drag the scroll box to the bottom of the grid, you will see a large white space at the bottom of the grid. If you drag the scroll box up and down the grid, you will see flashes of large white spaces appearing in the middle of the grid as well (which are soon painted over with rows of data).
Does anyone know why this issue occurs, and how to resolve this?
Thank you.
Try setting "variableRowHeight" to true for any column that could have cells with varying heights.
To fix your example you can set it on these columns:
{
text: 'CommandLineWithDisplayNames',
dataIndex: 'CommandLineWithDisplayNames',
flex: 3,
variableRowHeight: true
},
{
text: 'CommandLineWithNumbers',
dataIndex: 'CommandLineWithNumbers',
flex: 3,
variableRowHeight: true
},
Documentation: https://docs.sencha.com/extjs/7.4.0/classic/Ext.grid.column.Column.html#cfg-variableRowHeight
when all the values are 0 in the chart and I don't have a max axis value I am getting blank space in place of bars
You need to increase gridZIndex property for yAxis:
yAxis: {
gridZIndex: 4,
...
}
Live demo: https://jsfiddle.net/BlackLabel/0e89puxL/
API Reference: https://api.highcharts.com/highcharts/series.column.minPointLength
the grid line overlapps the bar when we add z-index
I'm working on an ExtJS chart. The axis labels of the chart is having lengthy texts. At the edges of the Chart the texts are cut off. How to word wrap style to Ext JS Chart axis labels?
adding newlines every n words with a renderer could also work
Heres the fiddle
renderer: function(v) {
//adds newline every 5th word
return v.replace(/((?:\w+ ){5})/gi, "$1\n");
}
try this
.x-form-label#myLabel {
width: 20px;
overflow: hidden;
}
In extjs, the is this component toolbar.separator( xtype: tbseparator) which allows you to put a vertical space between toolbar items.
It's just that it shows a pipe-like character or a line to denote that component. I want to remove it. I want there to be empty space. I've played around with the configs but can't figure out how. Can anyone help?
Alternatively, you don't really need to use a spacer. Just specify a component with a width of however wide you want the space to be:
{
xtype: 'component',
width: 30
}
Just put this in your custom css file:
.x-toolbar-separator-horizontal {
border-style: none;
}
I'm using ActionColumn to display an icon inside cells in columns in my Grid.
I'm trying to set the layout so that the text is always fixed about 5 px from the left edge of the column and the icon is always fixed about 5 px from the right edge regardless of the length of the text which is dynamic in each row.
I'm using "iconCls" with a background image to show the icon, I'm not using "icon"
I can display both the text and icon aligned on the left, or, both text and icon aligned on the right but have not found a way to align the text on left and the icon on the right.
var column = {
xtype:'actioncolumn',
text : grpName,
selItem:selGrps[i],
dataIndex : 'g_' + grpId,
groupId : selGrps[i].get("id"),
height : me.self.HEADER_HEIGHT,
sortable : false,
items: [{
iconCls:'dropArrowIconCSS',
handler: me.actionColumnHandler
}]
}