Senseforce 2.0 Manual
  • Welcome to Senseforce 2.0
  • SF MQTT API
  • SF Edge
    • Edge Package Overview
    • Edge Installation
      • Using the SF Edge Service installer in command shell
      • Headless SF Edge Servie execution
    • Edge Configuration
      • Which Plugins to load (appsettings.xml)
      • Edge Data Routing (EventDefinition.xml)
      • OTA configuration (otasettings.xml)
      • Edge Logging
      • Input plugins
        • SQL Plugin
        • SQLite Plugin
        • OPC UA Plugin
          • OPC UA server browser
        • SIEMENS S7/SINUMERIK Plugin
          • Creating connection definition file
        • S7 Plugin
        • REST Plugin
        • TCP Listener Plugin
        • XML File Parsing Plugin
        • Heidenhain Plugin
      • Output Plugins
        • MQTT Plugin
        • SQLite Plugin
    • Edge Compute plugins
      • Creating compute plugins
      • Using compute plugins
  • SF Edge Asset Management
    • Edge version repository
  • SF Platform
    • Navigation
      • Overview Screen
    • Dataset Builder
      • Filters, Aggregations and Groupings
      • Functions of the Formula Editor
      • Additional Settings
      • Special Events
      • FAQ and Troubleshooting
    • Script Editor
      • Details of the Script Editor
      • Installed Packages
      • Working with Timestamps
        • Working with Timestamps in Python
        • Working with Timestamps in R
      • FAQ and Troubleshooting
    • Widgets
      • Text
      • Headline
      • Image
      • Progress Bar & Gauge Chart
      • Table
      • Map
      • Line, Bar, Scatter and Area Chart
      • Pie Chart
      • Gantt Chart
      • Histogram
      • Overview
      • Log
      • Default colors and color conditions
      • FAQ and Troubleshooting
    • Dashboards
      • Dashboard Filters
      • Favorites
      • Data Drilldown & Widget Interaction
      • Editing multiple dashboard widgets
      • Time Zones
      • Synchronized Zooming
      • Sharable Dashboard URL
      • Multi-chart layout options
      • Default sort for table widgets
      • Releases
      • Reporting
      • FAQ and Troubleshooting
      • Applying zoom to global timestamp filter
      • Optimise the layout for different devices
    • Machine Master Data
      • Dimensions
      • Instances
      • Things
      • Use Case
      • FAQ and Troubleshooting
    • Automation
      • Trigger
      • Scheduling overview
      • Actions
      • Test your Automation
      • Zapier integration (necessary internal steps)
      • Zapier integration
      • Subscriptions
      • FAQ and Troubleshooting
    • Event Schema Management
      • Importing a Event Schema
      • FAQ and Troubleshooting
    • Virtual Events
      • Creating a Virtual Event
      • Scheduling Overview
      • Permissions and Data Access
      • FAQ and Troubleshooting
    • Details modal for elements
    • Copy / Duplicate elements
    • Whitelabeling
    • Edge Device Management
    • Element History
    • Public API
      • Get your access token
      • Endpoints
      • Debugging scripts
      • FAQ and Troubleshooting
    • User & Group Management
      • FAQ and Troubleshooting
    • Active Directory & SSO Setup
Powered by GitBook
On this page
  • Margins for charts
  • Fixed chart to legend size ratio

Was this helpful?

  1. SF Platform
  2. Dashboards

Multi-chart layout options

PreviousSharable Dashboard URLNextDefault sort for table widgets

Last updated 2 years ago

Was this helpful?

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!

Example of two charts with different x-axis starting points and lengths
Definition of the left and right margin of a chart
Chart margin settings
Two aligned line charts
Legend size issue with multiple charts
Fixed size ratio setting in the dashboard sidebar
Charts with the same fixed size ratio