# Highcharts

# type: highcharts

The Highcharts Element is used to display any Highcharts based visualization.
There is currently no additional processing done on the configuration.
It is possible to directly pass in the Highcharts configuration object which is passed as is to the Highcharts module.
Any configuration that is possible in the official Highcharts editor can be found in the official Highcharts documentation (opens new window).
To get the configuration object, go to "Customize" and "Preview Options".
This is the config object that can pasted to the config of the Element.
To find out more about Highcharts visit Highcharts API (opens new window).

Highcharts-Element

# Configuration Overview

{
  "id": "myHighchartsElement",
  "type": "highcharts",
  "config": {
    "chart": {
      "type": "bar",
      "polar": false,
      "width": null,
      "height": null
    },
    "plotOptions": {
      "series": {
        "dataLabels": {
          "enabled": true
        },
        "animation": false
      }
    },
    "title": {
      "text": "Fruit Consumption"
    },
    "xAxis": {
      "categories": ["Apples", "Bananas", "Oranges"]
    },
    "yAxis": {
      "title": {
        "text": "Fruit eaten"
      }
    },
    "series": [
      {
        "name": "Jane",
        "columnName": "table_column1",
        "data": [1, 0, 4]
      },
      {
        "name": "John",
        "columnName": "table_column2",
        "data": [5, 7, 3],
        "states": {
          "select": {
            "color": "#cc2222" // defaults to "#444444"
          }
        }
      }
    ]
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

# Properties

# id

Property: id

Type: string

Description: The unique ID assigned to the Element. This is defined by the Builder and can be used to refer to the Element in Layouts.

"id": "myHighchartsElement",
1

# Source

Property: source

Type: string

Description: The ID of the Datasource from which the data should be retrieved.

"source": "frtDataSource1"
1

# Config

Property: config

Type: string

Description: The actual Highcharts config.
It can either be completely copy-pasted (including mock data), or the data part can be removed, and the source (configured outside the Highcharts config) can be used instead.

TIP

Make sure that the column names inside the series object are matching the column names in the configured Datasource.
Also make sure that the configured columns have the correct type (for instance, series can usually only be numeric columns).
If the developer console displays a Highcharts error 14, then this suggests that there are wrong column types in the configured Datasource.

{
  "title": {
    "text": "My Chart"
  },
  "subtitle": {
    "text": "My Untitled Chart"
  },
  "exporting": {},
  "chart": {
    "type": "area",
    "polar": false
  },
  "plotOptions": {
    "series": {
      "dataLabels": {
        "enabled": true
      },
      "animation": false
    }
  },
  "series": [
    {
      "name": "My Value",
      "columnName": "table_column",
      "turboThreshold": 0
    }
  ],
  "data": {
    "csv": '"row";"val"\n0;24\n1;76\n2;23',
    "googleSpreadsheetKey": false,
    "googleSpreadsheetWorksheet": false
  },
  "yAxis": {
    "title": {}
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

# Highcharts Heatmap

This is the config object that can be pasted into the config of the Element in order to generate a Heatmap.

# Highcharts Heatmap ID

Property: id

Type: string

Description: The unique ID assigned to the Element. This is defined by the Builder and used to refer to the Element in Layouts.

"id": "myElementId"
1

# Highcharts Heatmap Source

Property: source

Type: string

Description: The ID of the Datasource which should be used for retrieving the data.

"source": "rawDataSource"
1

# Highcharts Heatmap Config

Property: config

Type: string

Description: The actual Highcharts Heatmap config.
It can either be completely copy-pasted (including mock data), or the data part can be removed, and the source (configured outside the Highcharts config) can be used instead.

TIP

Make sure that the column names inside the series object are matching the column names in the configured Datasource.
Also make sure that the configured columns have the correct type (for instance, series can usually only be numeric columns).
If the developer console displays a Highcharts error 14, then this suggests that there are wrong column types in the configured Datasource.

# Highcharts Heatmap Example



 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
























{
  "elements": [
    {
      "id": "chart-middle",
      "type": "highcharts",
      "source": "raw_testSource",
      "config": {
        "chart": {
          "type": "heatmap",
          "marginTop": 40,
          "marginBottom": 80,
          "plotBorderWidth": 1
        },
        "title": {
          "text": "Discounts used by customers",
          "style": {}
        },
        "xAxis": {
          "categories": ["Alexander", "Marie", "Maximilian", "Sophia", "Lukas"]
        },
        "yAxis": {
          "categories": [
            "Monday",
            "Tuesday",
            "Wednesday",
            "Thursday",
            "Friday"
          ],
          "title": null
        },
        "colorAxis": {
          "min": 0,
          "minColor": "#96ccc9",
          "maxColor": "#376276"
        },
        "legend": {
          "align": "right",
          "layout": "vertical",
          "margin": 0,
          "verticalAlign": "top",
          "y": 25,
          "symbolHeight": 280
        },
        "tooltip": {}
      }
    }
  ],
  "datasources": [
    {
      "id": "raw_testSource",
      "origin": "raw",
      "config": {
        "schema": "table",
        "data": [
          {
            "x": 0,
            "y": 0,
            "value": 10
          },
          {
            "x": 1,
            "y": 0,
            "value": 92
          }
        ]
      }
    }
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69