# Highcharts

# type: highcharts

The Highcharts element is used to display any highcharts based visualization.
There is currently no additional processing done on the configuration.
You 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 you can paste 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 user 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 you can remove the data part, and instead use the source (configured outside the highcharts config).
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 you open the developer console and see a highcharts error 14, then this suggests that you have 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 you can paste 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 user 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 you can remove the data part, and instead use the source (configured outside the highcharts config).
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 you open the developer console and see a highcharts error 14, then this suggests that you have wrong column types in the configured datasource.

"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": {}
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

# 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