Multi-chart layout options
- Katya Raykova
Margins for charts
If you use two multi-chart (e.g. line charts) on your dashboard, one positioned below the other, you may want the axis of the two charts to be perfectly aligned to each other. You may run into some issues here, because on chart may have longer series names display in the legend to the side of the chart, or one chart may have longer y-axis labels which also moves the start point of your x-axis.
Both of these issues can be seen in the picture below, where the second chart has longer y-axis labels, thus moving the start point of the x-axis further to the right, and having a way longer series name, moving the end point of the x-axis further left.
To fix this issue, you can define the left and right margin of every chart in your dashboard. A margin on either side is basically the distance between the edge of your widget and where the x-axis starts/ends. The margin left would be the distance between the left edge of your widget and the start of the x-axis, the margin right the distance between the right edge of your widget and the end of the x-axis. This can also be seen, illustrated in the image below:
To align all charts equally, all you need to do now is set the same margin left and the same margin right to all your charts.
To do that, go to any dashboard, switch to edit mode, select any multi chart widget and switch to the Widget tab in the sidebar. In the Widget tab you will see a section called Chart margins, where after opening the section you are able to set the margin left and margin right values.
When leaving both values empty, you will get the default behavior. Entering a number here (pixels) will set the fixed margin value on your chart.
If you go ahead and try to set a margin value of 0, you will see that your y-axis labels and/or your legend will disappear from the chart. This is because with a margin of 0 they will basically get pushed out of your widget area and can't be seen.
So be sure to set margin values high enough, that your y-axis labels and legends still have enough space to be visible clearly!
As an example, after finding good margin values for the two charts in the first image of this section (in this case a margin left of 50px and a margin right of 250px), the two charts look like this:
Fixed chart to legend size ratio
If you use two e.g. line charts (or any other multi-chart type) on your dashboard, all of which show the legend on either the left or right side, and position one below the other, you may notice that both charts have a different width.
As you can probably guess from the image above, this issue comes up if you use different series names in your charts. In the example above, the second chart uses a series with a longer name, thus the legend size needs to be bigger and therefore decreases the space that is remaining for the chart itself.
If you want all charts to have the same width, you can do that by setting a fixed chart to legend size ratio for every widget.
To do that, go into edit mode of your dashboard and click on the widget you want to set a fixed size ratio for. Note that after clicking the widget you should see a blue border around it. In the dashboard sidebar, you should now see that a new tab Legend has appeared.
You can only see the legend tab if the following requirements are fulfilled:
The chart needs to be a multi-chart (line, bar, area or scatter)
The legend needs to be turned on
The legend needs to be positioned on either the left or right side of the chart
Navigate to this tab and you should see a toggle named Fixed size ratio. After toggling this option to on, you can set the ratio between the chart and the legend by entering values in the corresponding input fields.
So for example, if you enter a ratio of 1:1, the chart and the legend will both have the same width, a ratio of 2:1 will mean that the chart has double the width of the legend and so on.
After configuring a fixed size ratio for all the chart widgets, all the charts should be properly aligned!