I need the legends of Google chart to get wrapped (comes in new line) automatically if it exceeds container area.
I don't want scroll button as it is not enough convenient.
With available customization options, seems it cannot be done.
Any other way?
Use the maxLines property for the legend.
i.e.:
options.legend = {position: 'top', maxLines: 5};
Note that this undocumented property only works if the legend is positioned at the top and there is enough vertical space to render both the chart and multi-line legend.
with the maxLines property for the legends, chartArea with specific set of values can help in rendering the display.
legend: { position: "top", alignment: "start", maxLines: 2 },
chartArea: {top:50,bottom:30,right:0,left:50, 'width': '100%' }
I did a lot of testing of this and it seems that you need to have chartArea width and height set to 'auto'. Still not perfect but sort of OK.
Related
How do I obtain colour imagery, or more generally, styling information for each legend entry to construct a custom legend in a chart in Swift Charts?
I have a chart here, with a legend positioned on the right, but using the content: argument of chartLegend does not pass any info into the closure to use. I would like to wrap the legend into a scroll view, so when there are too many entries, the chart will appear correctly on the screen, and the user can scroll through the legend below the chart.
Chart(points, id: \.self) { point in
LineMark(
x: .value("time/s", point.timestamp),
y: .value("potential/mV", point.potential)
)
.foregroundStyle(by: .value("Electrode", point.electrode.symbol))
}
.chartLegend(position: .bottom)
// ...
Here is the chart with too many legend entries interfering with the chart sizing, resulting in cropping:
And here is the chart with only a few entries so that the chart is sized correctly, with no cropping, and the legend has text to discern between the electrodes they represent:
Any help is much appreciated.
Not scrolling but the chart legend can be placed on the side with code like this:
.chartLegend(position: .trailing, alignment: .top)
This gives more room for a legend. The legend won't scroll but all the items will be listed even if going past the end of the chart. The frame height can be increased. The example shows a before(default) and after(using the code above).
The colors can be assigned manually using the chartForegroundStyleScale like this after the end of the chart:
.chartForegroundStyleScale([
"Hong Kong": Color.green,
"London": Color.red,
"Taipei": Color.purple,
"New York": Color.teal,
"Paris": Color.pink,
"Sydney": Color.orange
])
Symbols can be created based on the series:
.symbol(by: .value("City", series.city))
I want to make an app and I need to use fl_chart.
The question is: What do I do to make a space for each element evenly.
How can I do it like this screenshot?
Remove the property alignment from the BarChartData (Most probably it's set to center). It's going to use the spaceBetween instead as default.
It's going to be like the following:
BarChart(
BarChartData(
// Remove the `alignment` or change it to `spaceBetween`
alignment: BarChartAlignment.spaceBetween,
...
),
...
),
Also, if not already wrap BarChart with a Expanded widget.
Actually, you could set up "barsSpace" in the parameter of "BarChartGroupData".
Example from fl_chart
BarChartGroupData
PropName
Description
default value
x
x position of the group on horizontal axis
null
barRods
list of BarChartRodData that are a bar line
[]
barsSpace
the space between barRods of the group
2
showingTooltipIndicators
indexes of barRods to show the tooltip on top of them
[]
I show a legend on top of a flutter chart with these options:
behaviors: [new charts.SeriesLegend(
desiredMaxRows: 2,
position: charts.BehaviorPosition.top,
outsideJustification: charts.OutsideJustification.middle,
horizontalFirst: true
),
The problem is that the legend does not wrap to a new row when it does not fit on the screen width. How can I make the legend to wrap into a new row?
Regards,
Use desiredMaxColumns instead of desiredMaxRows, or set horizontalFirst: false
[desiredMaxColumns] the max columns to use before laying out items in a new row. By default there is no limit. The max columns created is the smaller of desiredMaxColumns and number of legend entries.
All my searches turned up for sizeColumnsToFit and autoSizeColumns which is not what I want.
My grids have many columns, so it scroll horizontal which is fine
But I cannot know in advance what would be the most space needed for the widest text in a column, so want the grid to auto size all columns to accommodate for whatever is the longest line of text in the cell.
Can one do that? (pretty much like have nowrap on a html table column, not that ag-grid wrap text, it just hide what is too long)
Grid Resizing:
https://www.ag-grid.com/javascript-grid-resizing/
sizeColumnsToFit - this tries to squeeze all the columns in the view - no horizontal scrolling
autoSizeAllColumns - this tries to size all columns to to fit the data - horizontal scrolling
// If you need to resize specific columns
var allColIds = params.columnApi.getAllColumns()
.map(column => column.colId);
params.columnApi.autoSizeColumns(allColIds);
// If you want to resize all columns
params.columnApi.autoSizeAllColumns();
I passed through this and it took me some time to make it work the way I wanted to, by that I mean :
Use all the available space
Make each column take the width required to display its content correctly
Solution :
Add the width parameter for each column (requires some manual tuning to set the right values)
Call gridApi.sizeColumnsToFit() in the onGridReady which will resize to take the available space while making sure that columns having bigger width will take more space
const gridOptions = {
...
columnDefs: [
{
...,
width: 100
},
{
...,
width: 50
},
...
],
...
onGridReady: (event) => event.api.sizeColumnsToFit();
};
Simply use flex instead of width in the column definitions. The grid will adjust automatically.
You can find a complete example for auto resizing all column.
column-sizing
Simply call autoSizeColumns() function, all columns will be resized according to content.
gridColumnApi.autoSizeColumns(allColumnIds, skipHeader);
My question is about a specific Graphs and Charts Building Tool call AMCHARTS. I am using their live editor to build a Graph, and I need to remove the vertical lines (leave the horizontal lines only) from the chart grid.
Is it possible to do so?
thanks,
Just in case someone is still looking for the answer:
//disable horizontal lines
valueAxis.renderer.grid.template.strokeWidth = 0;
//disable vertical lines
categoryAxis.renderer.grid.template.strokeWidth = 0;
just change "categoryAxis"
"categoryAxis": {
"gridThickness": 0
},
Thanks.
If you're looking for a solution on amCharts 4 use the following:
categoryAxis.renderer.grid.template.disabled = true;
See official docs for disabling certain elements
For removing the horizontal lines in the grid ...
"valueAxes":{
"gridThickness":0
},
Just did some research, I'm posting the answer so that other can benefit. This option is in the "Category Axis -> Grid and Fills" Section.
this is a good anseer by adding one more category or value axis to our charts:
https://github.com/amcharts/amcharts4/issues/2866
If you are looking for am5charts, then add
yAxis.get("renderer").grid.template.setAll({
strokeWidth: 0,
visible:false
});
xAxis.get("renderer").grid.template.setAll({
location: 0,
strokeWidth: 0,
visible:false
});