Highcharts Dashboards

Build interactive data dashboards with synchronized components, real-time updates, and flexible layouts

Highcharts Dashboards is a comprehensive framework for building interactive data dashboards that combine multiple visualization components. It enables seamless integration of charts, data grids, KPIs, and custom HTML elements with synchronized data updates and flexible layouts.

Overview

Highcharts Dashboards provides a complete solution for dashboard development:

• Multiple Components: Charts, grids, KPIs, HTML, and custom components
• Data Synchronization: Share data between components with automatic updates
• Flexible Layouts: Responsive grid system with rows and cells
• Data Connectors: Load data from JSON, CSV, Google Sheets, and more
• Edit Mode: Built-in UI for customizing dashboards at runtime
• Modular Architecture: Load only the components you need

Installation

npm

npm install @highcharts/dashboards

ES6 Module Import

import Dashboards from '@highcharts/dashboards';
import DataGrid from '@highcharts/dashboards/datagrid';
import '@highcharts/dashboards/css/dashboards.css';

Getting Started

1. Create a container element

   <div id="container"></div>
   
2. Include required CSS

   @import url("https://code.highcharts.com/dashboards/css/dashboards.css");
   
3. Create your first dashboard

   Dashboards.board('container', {
     gui: {
       layouts: [{
         id: 'layout-1',
         rows: [{
           cells: [{
             id: 'dashboard-col-0'
           }, {
             id: 'dashboard-col-1'
           }]
         }]
       }]
     },
     components: [{
       type: 'HTML',
       renderTo: 'dashboard-col-0',
       elements: [{
         tagName: 'h1',
         textContent: 'Your First Dashboard'
       }]
     }, {
       type: 'Highcharts',
       renderTo: 'dashboard-col-1',
       chartOptions: {
         series: [{
           data: [1, 2, 3, 4, 5]
         }]
       }
     }]
   });
   

Dashboard Components

Dashboards support multiple component types that can be combined in flexible layouts.

Highcharts Component

Embed any Highcharts chart or map

Grid Component

Display and edit tabular data

KPI Component

Show key performance indicators with thresholds

HTML Component

Add custom HTML content

Highcharts Component

Embed charts and maps in your dashboard:

components: [{
  type: 'Highcharts',
  renderTo: 'dashboard-col-0',
  chartOptions: {
    chart: {
      type: 'line'
    },
    title: {
      text: 'Monthly Sales'
    },
    series: [{
      name: 'Revenue',
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0]
    }]
  }
}]

Grid Component

Display tabular data with editing capabilities:

<script src="https://cdn.jsdelivr.net/npm/@highcharts/grid-pro/grid-pro.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@highcharts/grid-pro/css/grid-pro.css">

components: [{
  type: 'Grid',
  renderTo: 'dashboard-col-0',
  dataTable: {
    columns: {
      product: ['Apples', 'Pears', 'Plums', 'Bananas'],
      weight: [100, 40, 0.5, 200],
      price: [1.5, 2.53, 5, 4.5],
      metaData: ['a', 'b', 'c', 'd']
    }
  }
}]

KPI Component

Display key metrics with threshold-based styling:

components: [{
  type: 'KPI',
  renderTo: 'dashboard-col-0',
  title: 'Revenue',
  value: 12500,
  valueFormat: '${value}',
  threshold: [10000, 15000],
  thresholdColors: ['#f45b5b', '#f7a35c', '#90ed7d'],
  chartOptions: {
    chart: {
      type: 'spline'
    },
    series: [{
      data: [8000, 9000, 10500, 11200, 12500]
    }]
  }
}]

HTML Component

Add custom HTML content:

components: [{
  type: 'HTML',
  renderTo: 'dashboard-col-0',
  elements: [{
    tagName: 'div',
    attributes: {
      className: 'custom-header'
    },
    children: [{
      tagName: 'h2',
      textContent: 'Dashboard Title'
    }, {
      tagName: 'p',
      textContent: 'Welcome to your dashboard'
    }]
  }]
}]

// Or use HTML string
components: [{
  type: 'HTML',
  renderTo: 'dashboard-col-0',
  html: '<div class="custom-header"><h2>Dashboard Title</h2></div>'
}]

Layout System

Create flexible, responsive layouts with rows and cells:

gui: {
  layouts: [{
    id: 'layout-1',
    rows: [{
      // First row with 3 equal columns
      cells: [{
        id: 'cell-1',
        width: '33.33%'
      }, {
        id: 'cell-2',
        width: '33.33%'
      }, {
        id: 'cell-3',
        width: '33.33%'
      }]
    }, {
      // Second row with 2 columns
      cells: [{
        id: 'cell-4',
        width: '66.66%'
      }, {
        id: 'cell-5',
        width: '33.33%'
      }]
    }]
  }]
}

Responsive Layouts

gui: {
  layouts: [{
    id: 'layout-1',
    rows: [{
      cells: [{
        id: 'cell-1',
        // Responsive width based on viewport
        responsive: {
          small: { width: '100%' },
          medium: { width: '50%' },
          large: { width: '33.33%' }
        }
      }]
    }]
  }]
}

Data Management

Dashboards provides powerful data management with connectors and synchronization.

Data Connectors

Load data from various sources:

JSON

Load data from JSON objects or files

CSV

Import CSV data with auto-parsing

Google Sheets

Connect to Google Sheets

HTML Table

Extract data from HTML tables

JSON Connector

dataPool: {
  connectors: [{
    id: 'sales-data',
    type: 'JSON',
    options: {
      data: [
        ['Month', 'Sales', 'Expenses'],
        ['January', 10000, 8000],
        ['February', 12000, 9000],
        ['March', 15000, 10000]
      ]
    }
  }]
}

CSV Connector

dataPool: {
  connectors: [{
    id: 'csv-data',
    type: 'CSV',
    options: {
      csv: `Month,Sales,Expenses
January,10000,8000
February,12000,9000
March,15000,10000`,
      firstRowAsNames: true
    }
  }]
}

Google Sheets Connector

dataPool: {
  connectors: [{
    id: 'google-data',
    type: 'GoogleSheets',
    options: {
      googleSpreadsheetKey: 'YOUR_SPREADSHEET_KEY',
      worksheet: 1
    }
  }]
}

Using Data Connectors

Connect components to shared data:

dataPool: {
  connectors: [{
    id: 'company-data',
    type: 'JSON',
    options: {
      data: [
        ['Product', 'Q1', 'Q2', 'Q3', 'Q4'],
        ['Product A', 100, 120, 140, 160],
        ['Product B', 80, 90, 95, 100]
      ]
    }
  }]
},
components: [{
  type: 'Highcharts',
  renderTo: 'chart-cell',
  connector: {
    id: 'company-data',
    columnAssignment: [{
      seriesId: 'Q1 Sales',
      data: ['Product', 'Q1']
    }]
  }
}, {
  type: 'Grid',
  renderTo: 'grid-cell',
  connector: {
    id: 'company-data'
  }
}]

Component Synchronization

Synchronize interactions between components:

components: [{
  type: 'Highcharts',
  renderTo: 'chart-1',
  connector: {
    id: 'shared-data'
  },
  sync: {
    visibility: true,
    highlight: true,
    extremes: true
  }
}, {
  type: 'Highcharts',
  renderTo: 'chart-2',
  connector: {
    id: 'shared-data'
  },
  sync: {
    visibility: true,
    highlight: true,
    extremes: true
  }
}]

Sync Options

• visibility: Sync series show/hide
• highlight: Sync point hover states
• extremes: Sync axis ranges
• crossfilter: Filter data across components

Edit Mode

Enable runtime dashboard customization:

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

Dashboards.board('container', {
  editMode: {
    enabled: true,
    contextMenu: {
      enabled: true
    },
    tools: {
      addComponentBtn: { enabled: true },
      removeComponentBtn: { enabled: true }
    }
  },
  // ... rest of configuration
});

Edit Mode features:

• Add/remove components
• Resize cells
• Reorder components
• Edit component settings
• Export/import dashboard configuration

Data Modifiers

Transform data before visualization:

dataPool: {
  connectors: [{
    id: 'sales-data',
    type: 'JSON',
    options: {
      data: salesData
    }
  }]
},
components: [{
  type: 'Highcharts',
  renderTo: 'chart-cell',
  connector: {
    id: 'sales-data',
    modifiers: [{
      type: 'Math',
      columnFormulas: [{
        column: 'total',
        formula: 'B1+C1' // Sum columns
      }]
    }, {
      type: 'Range',
      ranges: [{
        column: 'month',
        minValue: 3,
        maxValue: 6
      }]
    }]
  }
}]

Advanced Example

Comprehensive dashboard with multiple components:

Dashboards.board('container', {
  dataPool: {
    connectors: [{
      id: 'revenue-data',
      type: 'JSON',
      options: {
        data: [
          ['Month', 'Revenue', 'Expenses', 'Profit'],
          ['Jan', 50000, 35000, 15000],
          ['Feb', 55000, 38000, 17000],
          ['Mar', 60000, 40000, 20000],
          ['Apr', 58000, 39000, 19000],
          ['May', 65000, 42000, 23000],
          ['Jun', 70000, 45000, 25000]
        ]
      }
    }]
  },
  
  gui: {
    layouts: [{
      id: 'main-layout',
      rows: [{
        cells: [{
          id: 'kpi-1',
          width: '25%'
        }, {
          id: 'kpi-2',
          width: '25%'
        }, {
          id: 'kpi-3',
          width: '25%'
        }, {
          id: 'kpi-4',
          width: '25%'
        }]
      }, {
        cells: [{
          id: 'chart-cell',
          width: '66%'
        }, {
          id: 'grid-cell',
          width: '34%'
        }]
      }]
    }]
  },
  
  components: [{
    type: 'KPI',
    renderTo: 'kpi-1',
    title: 'Total Revenue',
    value: 358000,
    valueFormat: '${value}'
  }, {
    type: 'KPI',
    renderTo: 'kpi-2',
    title: 'Total Expenses',
    value: 239000,
    valueFormat: '${value}'
  }, {
    type: 'KPI',
    renderTo: 'kpi-3',
    title: 'Net Profit',
    value: 119000,
    valueFormat: '${value}',
    threshold: [100000, 150000],
    thresholdColors: ['#f45b5b', '#f7a35c', '#90ed7d']
  }, {
    type: 'KPI',
    renderTo: 'kpi-4',
    title: 'Profit Margin',
    value: 33.2,
    valueFormat: '{value}%'
  }, {
    type: 'Highcharts',
    renderTo: 'chart-cell',
    connector: {
      id: 'revenue-data',
      columnAssignment: [{
        seriesId: 'Revenue',
        data: ['Month', 'Revenue']
      }, {
        seriesId: 'Expenses',
        data: ['Month', 'Expenses']
      }, {
        seriesId: 'Profit',
        data: ['Month', 'Profit']
      }]
    },
    sync: {
      highlight: true
    },
    chartOptions: {
      chart: {
        type: 'column'
      },
      title: {
        text: 'Monthly Financial Overview'
      },
      yAxis: {
        title: {
          text: 'Amount ($)'
        }
      }
    }
  }, {
    type: 'Grid',
    renderTo: 'grid-cell',
    connector: {
      id: 'revenue-data'
    },
    sync: {
      highlight: true
    }
  }]
});

Theming

Customize dashboard appearance:

/* Custom dashboard styles */
.highcharts-dashboards-wrapper {
  background: #f5f5f5;
}

.highcharts-dashboards-component {
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.highcharts-dashboards-component-kpi-value {
  font-size: 2em;
  color: #2c3e50;
}

Performance Tips

Optimize Dashboard Performance

• Use data connectors for shared data instead of duplicating
• Enable only necessary sync options
• Lazy load components when possible
• Use data modifiers efficiently
• Limit the number of visible components

Related Resources

API Reference

Complete Dashboards API documentation

Live Demos

Interactive examples and demos

Data Connectors

Learn about loading data from various sources

Component Sync

Synchronize interactions between components

Next Steps

• Explore Component Types for different visualizations
• Learn about Data Connectors for loading external data
• Try Component Synchronization for interactive dashboards
• Enable Edit Mode for runtime customization