Frequently asked questions

How do you connect DataPool to the other components?

First, you must create the DataPool object, define a connector and pass the data reference. More about this topic in the DataPool section

After that, you need to pass the connector to the component config, and that’s it. Here is the demo.

How do you connect a component to a cell?

1. Enabled layout creator (GUI)

To use Dashboards with a layout system and edit mode, you first have to load the layout module. The order of the imports is essential, so make sure that the layout module is imported after the Dashboards module.

<script src="https://code.highcharts.com/dashboards/dashboards.js"></script>
<script src="https://code.highcharts.com/dashboards/modules/layout.js"></script>

Each cell must have an id field. The same id must be passed to the renderTo field in the component config. Example configuration of component and cell:

gui: {
    enabled: true,
    layouts: [{
        id: 'layout-1',
        rows: [{
            cells: [{
                id: 'dashboard-col-0'
            }]
        }]
    }]
},
components: [{
    renderTo: 'dashboard-col-0',
    type: 'Highcharts',
    chartOptions: {
        chart: {
            type: 'pie'
        },
        series: [{data: [1,2,3]}]
    },
}]

Here is the demo.

2. Disabled default layout creator

You can create your HTML structure for a layout styled by CSS or another CSS framework (e.g., Tailwind, Bootstrap). Please remember that each container should have a unique id for the rendered component.

<div id="container">
    <div>
        <div id="dashboard-col-0"></div>
    </div>
</div>
gui: {
    enabled: false
}
components: [{
    renderTo: 'dashboard-col-0',
    type: 'Highcharts',
    chartOptions: {
        chart: {
            type: 'pie'
        },
        series: [{data: [1,2,3]}]
    },
}]

Here is the standalone demo and the tailwind demo.

NB! The disabled GUI does not allow you to use the Edit Mode module.

How do we synchronize the components?

To synchronize components, you have to specify which event you want to synchronize between each component, and they must use the same connector.

Example of synchronized components

components: [{
    connector: {
        id: 'Vitamin'
    },
    sync: {
        visibility: true,
        highlight: true,
        extremes: true
    },
    renderTo: 'dashboard-col-0',
    type: 'Highcharts',
    chartOptions: {
        chart: {
            type: 'pie'
        }
    },
}, {
    renderTo: 'dashboard-col-1',
    connector: {
        id: 'Vitamin'
    },
    sync: {
        visibility: true,
        highlight: true,
        extremes: true
    },
    type: 'Highcharts',
    chartOptions: {
        xAxis: {
            type: 'category'
        },
        chart: {
            animation: false,
            type: 'column'
        }
    }
}]

Check how this synchronization works in our minimal dashboard demo. See the next question for possible synchronization events.

What are the synchronization events available in Highcharts Dashboards?

Check how this synchronization works in our minimal dashboard demo.

The events that can be synchronized between components are:

  • 'visibility’
  • 'extremes'
  • 'highlight'

What browsers are supported?

Highcharts Dashboards supports the following browsers:

BrowserVersion
Firefox52.0+ (2017+)
Chrome55.0+ (2016+)
Safari11.0+ (2017+)
Opera42.0+ (2016+)
Edge16.0+ (2017+)

What versions of Highcharts are supported?

The Highcharts Dashboards is compatible with all Highcharts modules in v10 or higher.

I modified series names in a chart, and now the sync is not working. What can I do?

Sync to other components may not work if you modify specific series properties. For instance, modifying series names in the chart afterRender event callback:

afterRender(e) {
    // Potential problem: setting custom name for series
    e.target.chart.series[0].name = 'customName'
    e.target.chart.series[1].name = 'otherCustomName'
}

How to style the Dashboard?

1. Enabled layout creator (GUI)

Dashboards has a default theme applied to all its components. You need to import the default CSS stylesheet to your project so that the dashboard displays correctly. You can do it by importing the following CSS files:

@import url("https://code.highcharts.com/dashboards/css/dashboards.css");
@import url("https://code.highcharts.com/dashboards/css/datagrid.css");

However, you can customize the dashboard style by adding your custom CSS stylesheet. More about this topic in the Styling section.

Use regular CSS media queries to adjust your layout to different screens.

Example:

/* LARGE */
@media (max-width: 1200px) {
    #dashboard-cell-1 {
        flex: 1 1 33.333%;
    }
}
/* MEDIUM */
@media (max-width: 992px) {
    #dashboard-cell-1 {
        flex: 1 1 50%;
    }
}
/* SMALL */
@media (max-width: 576px) {
    #dashboard-cell-1 {
        flex: 1 1 100%;
    }
}

Note that each component that includes a chart (Highcharts, KPI) uses styledMode by default to style the chart. The CSS stylesheet needs to be imported so that the Highcharts display correctly. To customize your chart styles, you can create your own themes or add your own individual CSS variables or rules found in our docs.

2. Disabled default layout creator (GUI)

You can create your own HTML structure of a layout styled by CSS or Tailwind. Please remember that each container should have a unique id for the rendered component.

Here is the standalone demo and the tailwind demo.

NB! The disabled GUI does not allow you to use the Edit Mode module.

Edit this page