i want to display text in wrap format in high chart nested group
If d.name is too long I'd like it to fill several lines instead of one.
[http://jsfiddle.net/vijay6512/5j9LLyxk/embedded/result/]
You can set useHTML flag as true and then set word-break:break-all in the css.
CSS
.highcharts-xaxis-labels {
word-break: break-all;
}
HC
labels:{
maxStaggerLines: 1,
useHTML:true,
},
Example: http://jsfiddle.net/5j9LLyxk/3/
Related
How do I set up AG Grid such that there is always a blank placeholder row at the bottom for new records? So that it behaves like Excel, or like Slickgrid when enableAddRow is true.
When passing the rowData array to the grid component, you can include an extra object with blank values.
For example, if you had a grid of Employee objects with attributes name and title, the following would work with ES6:
rowData=[ ...existingEmployees, { name: '', title: '' } ]
I am using groupIncludeTotalFooter to display footer. I was able to change footer text using footerValueGetter.
However i am trying to find a better way to apply some styles to the Total footer row.
Currently I am doing some CSS selection as follows. Wanted to know if this is the only way or there is better way.
.my-component .ag-row-footer {
background-color:#FFFFFF;
}
You can achieve this programatically by leveraging the Grid Callback method getRowStyle:
gridOptions = {
getRowStyle: (params) => {
if (params.node.footer) {
return { fontWeight: 'bold' };
}
},
}
This will make the footer bold, as shown in the following example
There are other ways of achieving this programatically, if you need more flexibility, in the documentation: https://www.ag-grid.com/javascript-grid-row-styles/
I'm working on using treeData, but was wondering if it is possible to hide the text next to the chevron.
For example, can I hide the letters from the column in this table, and just show the chevron? Maybe using cell renderer?
You can do that even without using cellRenderer.
Include below styles in your component declaration.
styles: [`
::ng-deep [class^='ag-row-group-indent-'] .ag-group-value {
display: none;
}
`]
Working plunk: Ag-Grid treeData: Possible to hide text next to chevron
Figured out an easy fix within the column def:
cellRendererParams: {
innerRenderer: () => ''
}
Is it possible to change the style of a column based on whether it's pinned or not?
I'm able to change the style based on the value while the table is rendered for the first time. What I'm trying to do is change the style when the column is pinned using the mouse (drag and pin).
I'm able to figure out which column has been pinned by firing the ColumnPinnedEvent in gridOptions. I tried modifying the cellClass of the column obtained from 'event.column' but it does not get reflected on the table.
onColumnPinned(event: ColumnPinnedEvent) {
const column = event.column;
if (column) {
const columnDef = column.getColDef();
const userProvidedColDef = columnDef;
userProvidedColDef.cellStyle = event.pinned ? { color: 'white', backgroundColor: 'black' } : {};
column.setColDef(columnDef, userProvidedColDef);
}
}
You can achieve the same by just with the CSS.
Have a look at the plunk I've created: Column Pinning and styling. Add or remove any column to see the styles updated for it.
.ag-body-viewport .ag-pinned-left-cols-container .ag-row {
background-color: yellow;
}
Here .ag-body-viewport .ag-pinned-left-cols-container hierarchy is important. Just using .ag-pinned-left-cols-container .ag-row will not work as some row levels' styling of ag-grid will overwrite it.
So far this information is enough to solve your challenge, let me know in addition to this, you have some more details to provide.
I would like to ask how can I position bottom labels using ChartJS library to display them like on the image below:
I tried to find it in official docs, but without the luck.
Many thanks for any advice.
In the xAxe ticks attribute, you can edit the userCallback property to change what is displayed on your labels. Furthermore, if you return an array of strings, every string will be displayed with line breaks.
So if you combine these two informations, you'll get the following :
options: {
scales: {
xAxes: [{
ticks: {
userCallback: function(tick, value, ticks) {
// `ticks` is the default display
// `.split("")` makes it an array of every character
return tick.split("");
}
}
}]
}
}
You can see a working example on this jsFiddle and here is its result :