Using Highcharts

Use Highcharts visuals to create custom chart types and visuals that use the Highcharts Core library. To configure a Highcharts visual, you add a Highcharts JSON schema to the visual. The Chart code editor provides contextual assistance and real-time validation to ensure that the input JSON schemas are configured properly. For security reasons, the visual editor does not accept CSS, JavaScript, or HTML code input.
These limitations apply to Highcharts visuals:
  • These JSON values are not supported in the Chart code editor: functions, dates, and undefined values.
  • Links to GeoJSON files or other images are not supported.
  • You cannot set field colors in Highcharts visuals. The default theme colors are always applied.
To create a Highcharts visual:
  1. Click Dashboards tab, the Dashboards tab.
  2. Click Dashboard Designer, in the bottom-left corner.
  3. On the Analyses dialog, click New analysis or click Options button, the Options button, next to an existing analysis and select Edit.
  4. On the analysis page, click , the Add visual button, on the toolbar.
    Analysis page - Create a visual
  5. Click the Highcharts visual icon.
    Highcharts visual icon
  6. In the Properties panel on the right, configure the visual.
    1. Under Display Settings, format the title and subtitle.
      For more information, see Formatting Titles and Subtitles in Visuals.
    2. Under Data point limit, enter the maximum number of data points that you want the visual to display in the Number of data points to show field.
      Highcharts visuals can show up to 10,000 data points.
    3. Under Chart code, enter a JSON schema into the code editor and click Apply code.
      The editor provides contextual assistance and real-time validation to ensure that your input JSON is configured properly. You can see any identified errors or warnings in the Errors section.
      Note: For more information and code samples, see the resources available in the Reference section.
  7. Add data to the visual by dragging fields from the Data panel on the left to the appropriate field wells in the Visuals panel:
    1. Drag dimensions to the Group by field well.
    2. Drag measures to the Value field well.
    You can pull data from the fields added in the field wells by using the getColumn expression in the chart code. For more information, see JSON Expression Language for Highcharts.

In this section:

  1. JSON Expression Language for Highcharts
    Highcharts visuals accept most valid JSON values, standard arithmetic operators, string operators, and conditional operators. The JSON expression language connects JSON to APIs or datasets to allow dynamic population and modification of JSON structures.
Parent topic: Creating Visuals