# Charts [DashboardContent](/dashboards/reference.md#dashboardcontent) has [sections and cards](/dashboards/sections-and-cards.md), which organize charts. Each chart has a title, colors (optional), a type, a dataset and options (optional). ![A Bars chart](/files/DGRwMT9XfOPqzZaJ4YAt) ![A Pie chart with legend](/files/REECrAVQOFsfKaqykOI0) Here is the JSON representation of a chart. ```json { "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](/files/jfBziEH2jiSMIn5N5qyk) The available `options` for the `bars` chart are ```json "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](https://api.highcharts.com/highcharts/plotOptions.line.dataLabels.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](/files/OXnaP1O5gjlZE2pGy5TT) The available `options` for the `area` chart are ```json "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](https://api.highcharts.com/highcharts/plotOptions.line.dataLabels.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 ![](/files/Gv35crLZaoOlaCJeY8Wz) The available options for the `pie` charts are ```json "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](https://api.highcharts.com/highcharts/plotOptions.line.dataLabels.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. ![](/files/M7ra4e1PgaCQW1NKbkiN) The available options for the `Radar` charts are ```json5 "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](https://api.highcharts.com/highcharts/plotOptions.line.dataLabels.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](/files/p8vY1UmJQLL2SD21UfdC) ![With count format](/files/qbtjZBzgY8hPvcr4ALXe) 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 % } ``` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://developer.mediarithmics.io/dashboards/charts.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.