Highcharts Demo

by Black Label

HTML

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

<div id="container">
  <div id="kpi-revenue"></div>
  <div id="kpi-users"></div>
</div>

CSS

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

JavaScript

// Workaround fix for all affected Highcharts Dashboards versions: 1.0.0-4.2.1
!function(t){if(t&&t.DataCursor&&t.DataTable){var e=t.DataCursor.prototype,r=t.DataTable.prototype;e.tableIdPollutionPatched||(e.tableIdPollutionPatched=!0,null!==Object.getPrototypeOf((new t.DataCursor).listenerMap)&&['addListener','emitCursor','remitCursor','removeListener'].forEach(function(t){var r=e[t];r&&(e[t]=function(){var t;return t=this,['listenerMap','stateMap'].forEach(function(e){var r,a=t[e];a&&null!==Object.getPrototypeOf(a)&&(r=Object.create(null),Object.keys(a).forEach(function(t){r[t]=a[t]}),t[e]=r)}),r.apply(this,arguments)})}),'__proto__'!==new t.DataTable({id:'__proto__'}).id||Object.getOwnPropertyDescriptor(r,'id')||Object.defineProperty(r,'id',{configurable:!0,enumerable:!0,get:function(){return this.safeTableId},set:function(e){'__proto__'!==e&&'constructor'!==e||(e=t.uniqueKey(),this.autoId=!0),this.safeTableId=e}}))}}(Dashboards);
// End of the workaround fix

const board = Dashboards.board('container', {
    gui: {
        layouts: [{
            rows: [{
                cells: [
                    { id: 'kpi-revenue' },
                    { id: 'kpi-users' }
                ]
            }]
        }]
    },
    components: [
        {
            renderTo: 'kpi-revenue',
            type: 'KPI',
            title: 'Revenue',
            value: 42
        },
        {
            renderTo: 'kpi-users',
            type: 'KPI',
            title: 'Active Users',
            value: 1284
        }
    ]
});

const table = new Dashboards.DataTable({ id: '__proto__' });

board.dataCursor.addListener(table.id, 'hover', () => {});

console.info('tableId:', table.id);
console.info('protoPollution:', ({}).hover);