Charts

DashboardContent has sections and cards, which organize charts. Each chart has a title, colors (optional), a type, a dataset and options (optional).

A Bars chart

A Pie chart with legend

Here is the JSON representation of a chart.

 {
    "title": "Device form factors", // Could be an empty string
    "type": "Bars", // Bars || Pie || Metric || Radar
    "dataset": { // See Datasets and datasources page
        "type": "OTQL",
        "query_id": "50171"
    },
    "options": {} // Options depending on the type of chart
}

Bars charts

Here are the different states of a Bars chart depending on its options and the dataset

Columns and bars charts

The available options for the bars chart are

"options": {
    "legend": {
         enabled: boolean; # Show or hide the legend. Defaults to FALSE.
         position: ‘bottom’ | ‘right’; # Display legend on the bottom or on the right of the chart. Defaults to bottom
     },
     "colors": string[]; # Defaults to current theme colors
     "format": ‘count’ | ‘percentage’ | ‘index’; # Defaults to count. Pass percentage or index if dataset is compatible (comes from a percentage or index transformation) to automatically change labels, and tooltips and have more info.
     "drilldown": boolean; # Enables drill down if dataset is compatible. Defaults to FALSE
     "stacking": boolean; # Enables stacking if dataset is compatible. Prioritized over drilldown. Defaults to FALSE
     "type": ‘bar’ || ‘column’; # Set to ‘bar’ to display horizontal bars instead of columns. Defaults to ‘column’
     "plot_line_value": int; # Set to draw a line at the specified value
     "hide_x_axis": boolean; # TRUE to hide X axis. Defaults to FALSE
     "hide_y_axis": boolean; # TRUE to hide Y axis. Defaults to FALSE
     "tooltip": {format: string} # Highcharts tooltip pointFormat. Defaults to “{point.y}” if dataset don’t have a -count field, “{point.y}% ({point.count})” otherwise.
     "big_bars": boolean; # TRUE displays large bars close to each other, FALSE smaller bars with more space between them. Defaults to TRUE
}

See Hicharts.filter for the data_labels.filter format.

Area charts

Here are the different states of an Area chart depending on its options and the dataset

Area and line charts

The available options for the area chart are

"options": {
    "legend": {
         enabled: boolean; # Show or hide the legend. Defaults to FALSE.
         position: ‘bottom’ | ‘right’; # Display legend on the bottom or on the right of the chart. Defaults to bottom
     },
     "colors": string[]; # Defaults to current theme colors
     "format": ‘count’ | ‘percentage’; # Defaults to count. Pass percentage if dataset is compatible (comes from a percentage transformation) to automatically change labels, and tooltips and have more info.
     "type": ‘area’ || ‘line’; # Set to ‘line’ to only display lines and no area. Defaults to ‘area’
     "plot_line_value": int; # Set to draw a line at the specified value
     "hide_x_axis": boolean; # TRUE to hide X axis. Defaults to FALSE
     "hide_y_axis": boolean; # TRUE to hide Y axis. Defaults to FALSE
     "double_y_axis": boolean; # TRUE for each serie to have its own scale (and shows 2 vertical axis). Defaults to FALSE
     "tooltip": {format: string} # Highcharts tooltip pointFormat. Defaults to “{point.y}” if dataset don’t have a -count field, “{point.y}% ({point.count})” otherwise.
}

See Hicharts.filter for the data_labels.filter format.

Pie charts

Here are the different states of the Pie charts depending on its options and the dataset

The available options for the pie charts are

"options": {
    "legend": {
        "enabled": boolean; # Show or hide the legend. Defaults to FALSE.
        "position": ‘bottom’ | ‘right’; # Display legend on the bottom or on the right of the chart. Defaults to bottom
    },
    "colors": string[]; # Defaults to current theme colors
    "drilldown": boolean; # Enables drill down if dataset is compatible. Defaults to FALSE
    "inner_radius": boolean; # True displays the chart as a Donut, false as a Pie. Defaults to TRUE
    "is_half": boolean; # True to only display half of a donut or half of a pie. Defaults to FALSE.
    "size": number | string | undefined; # The diameter of the pie relative to the plot area. Can be a percentage (75%) or a value.
    "data_labels": {
        "enabled": boolean; # If labels are displayed or not, default to TRUE
        "distance": int; # Distance between labels and the figure. Defaults to 10 if isHalf:true, else 0
        "format": string; # Labels text. See Labels and string format. Defaults to “{point.percentage:.2f}%” if legend.enable:false, “{point.name} {point.percentage:.2f}%” otherwise.
        "filter": Highcharts.filter; # To hide labels under certain values. Defaults to undefined. 
    };
    "tooltip": {"format": string} # Highcharts tooltip pointFormat. Defaults to “{point.percentage:.2f}%” if legend.enable:false, “{point.name} {point.percentage:.2f}%” otherwise.
}

See Hicharts.filter for the data_labels.filter format.

Radar charts

Here are the different states of the Radar charts depending on its options and the dataset.

The available options for the Radar charts are

"options": {
    "legend": {
        "enabled": boolean; # Show or hide the legend. Defaults to FALSE.
        "position": ‘bottom’ | ‘right’; # Display legend on the bottom or on the right of the chart. Defaults to bottom
    },
    "colors": string[]; # Defaults to current theme colors
    "format": ‘count’ | ‘percentage’; # Defaults to count. Pass percentage if dataset is compatible to automatically change labels, and tooltips.
    "data_labels": {
        "enabled": boolean; # If labels are displayed or not, default to TRUE
        "format": string; # Labels text. See Labels and string format.  Defaults to “{point.y}” if dataset don’t have a -count field, “{point.y}%” otherwise
        "filter": Highcharts.filter; # To hide labels under certain values. Defaults to undefined. 
    };
    "tooltip": {"format": string} # Highcharts tooltip pointFormat. Defaults to “{point.y}” if dataset don’t have a -count field, “{point.y}% ({point.count})” otherwise.
}

See Hicharts.filter for the data_labels.filter format.

Metric charts

Metric charts are either displayed as percentages or as count, depending on its options.

With percentage format

With count format

Here are the available options for the e charts

"options": {
    "format": ‘count’ | ‘percentage’ | 'float'; # Defaults to count. If count, simply displays the number, else displays the number with %
}