Customize layout - row and column span or width

[renutz]

Hi,

I'm new to Highcharts Dashboards.

I'm trying to a simple layout where I have one row with a nested layout: two columns, where the first one will have 5 rows and second one, just one row.
This can be accomplished with:

Code: Select all

			    gui: {
			        layouts: [{
			            id: 'layout-1',
			            rows: [{
			                cells: [{
			                	id: 'dashboard-col-0',
			                	layout: {
					                rows: [{
					                	cells: [{
						                    id: 'kpi-col-0-row-1'
						                }]
						            },{
                                		cells: [{
						                    id: 'kpi-col-0-row-2'
						                }]
						            },{
                                		cells: [{
						                    id: 'kpi-col-0-row-3'
						                }]
						            },{
				            	cells: [{
						                    id: 'kpi-col-0-row-4'
						                }]
					                },{
				                cells: [{
						                    id: 'kpi-col-0-row-5'
						                }]
					                }]
					            }
			                },{
			                    id: 'dash-chart-col-1',
			                }]
			            }]
			        }

The first column are all 'KPI's and the second column will be a chart ('column' for instance)

The issue now is that this layout gives 50% width for each column. The KPIs are stretched and the chart is shortened.

I want to control the column width, by setting 25% for the 5 KPIs rows and 75% for the chart.

I could not accomplish it with 'width', 'flex' or something similar. I understand that the dashboard is responsive, but it makes sense in this scenario to control the proportion of the column's width.

Thanks!

[dawid.d]

Hello,

Welcome to our forum and thanks for reaching out!

You can achieve this for example with the CSS parameter `flex-basis`, because the current layout has flex-box positioning. We are currently redesigning it to make it more convenient to manage in the future.

Demo: https://jsfiddle.net/BlackLabel/3y1Lowet/

I hope I helped and don't hesitate to ask if you have any other questions!
Best regards,

[renutz]

Thanks! I confirm it works.

Suggestion (rather immediate): use a configuration in javascript (I like 'flex') so we do not need to do it through CSS.

[andrzej.b]

Hi,

Thanks for the suggestion, as my colleague Dawid mentioned, we are currently working on the layout customisation options in this direction, and we are aware that it's very useful to return it also to JS-based config. It will have more benefits, as it would also allow to edit layout options asynchronously and enable full layout setting export (CSS is omitted).

Do not hesitate to contact us in the future.

Kind regards,