Minimal

author(s): Pawel Lysy, Karol Kolodziej

by oysteinmoseng

HTML

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

<div id="container"></div>

CSS

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

#csv {
    display: none;
}

JavaScript

Dashboards.board('container', {
  editMode: {
    enabled: true,
    contextMenu: {
      enabled: true,

      items: ['editMode']
    },
  },
  gui: {
    layouts: [{
      rows: [{
        cells: [{
          id: 'dashboard-cell-1',
        }]
      }]
    }]
  },
  components: [{
    cell: 'dashboard-cell-1',
    type: 'Highcharts',
    editableOptions: [{
        name: 'connectorName',
        propertyPath: ['connector', 'id'],
        type: 'select'
      },
      {
        name: 'title',
        propertyPath: ['title'],
        type: 'input'
      }, 
            {
              name: 'chartOptions',
              type: 'nested',
              nestedOptions: [{
                name: 'chart',
                options: [{
                  name: 'title',
                  propertyPath: ['chartOptions', 'title', 'text'],
                  type: 'input'
                }, {
                  name: 'subtitle',
                  propertyPath: ['chartOptions', 'subtitle', 'text'],
                  type: 'input'
                }, {
                  name: 'type',
                  propertyPath: ['chartOptions', 'chart', 'type'],
                  type: 'select',
                  selectOptions: [{
                    name: 'column',
                    iconURL: 'series-types/icon-column.svg'
                  }, {
                    name: 'line',
                    iconURL: 'series-types/icon-line.svg'
                  }, {
                    name: 'scatter',
                    iconURL: 'series-types/icon-scatter.svg'
                  }, {
                    name: 'pie',
                    iconURL: 'series-types/icon-pie.svg'
                  }]
                }]
              }, {
                name: 'xAxis',
                options: [{
                  name: 'title',
                  propertyPath: ['chartOptions', 'xAxis', 'title', 'text'],
                  type: 'input'
                }, {
                  name: 'type',
                 ...