How To
Documentation
    Learn More

      chart:display

      Description

      The Chart Display Tag displays the facet provided in a chart. The body of the Chart Display tag can contain a Series Facet Tag for rendering multiple series using facets and also a Series Result List Tag for rendering multiple series using results. Along with this there are other tags to customise the chart, these include the Chart Tooltip Tag for modifying the tooltip, Chart Legend Tag for modifying the legend, Chart Credit Tag for adding a credit to the chart and the Chart Export Tag for exporting the chart.

      For detail on how to change the color and background color see the demo below, for more detail on what you can change and set using CSS see here.

      The following tags can be nested within the chart display tag.

      Usage

      as element:
      <chart:display
             response="{string}"
             facet-name="{string}"
             type="{string}"
             [title="{string}"]
             [subtitle="{string}"]
             [height="{string}"]
             [xtitle="{string}"]
             [ytitle="{string}"]
             [stacking="{string}"]
             [radar-or-polar="{string}"]
             [xlabel-rotation="{number}"]
             [max-characters="{number}"]
             [inner-size="{number}"]
             [invert-axes="{boolean}"]
             [show-tooltips="{boolean}"]
             [query="{object}"]
             [options="{object}"]
             [max-labels="{number}"]
             [show-labels="{boolean}"]
             [show-count="{boolean}"]
             [show-data-labels="{boolean}"]
             [three-d="{boolean}"]
             [websocket="{string}"]
             [show-value="{boolean}"]
             [select-series="{boolean}"]
             [select="{string}"]>
      </chart:display>

      Directive info

      • This directive creates new scope.

      Parameters

      ParamTypeDetails
      responsestring

      The name of the response.

      facet-namestring

      Name of facet.

      typestring

      Chart type (use type of 'time' when using the series time tag).

      title
      (optional)
      string

      Chart title

      subtitle
      (optional)
      string

      Chart sub title

      height
      (optional)
      string

      Chart height. Default:400 (400px but px is not required!)

      xtitle
      (optional)
      string

      x axis title

      ytitle
      (optional)
      string

      y axis title

      stacking
      (optional)
      string

      Whether to stack the values of each series on top of each other when using multiple series. 'normal' to stack by value or 'percent'.

      radar-or-polar
      (optional)
      string

      Set as 'radar' or 'polar' to turn your series into a radar/polar chart.

      xlabel-rotation
      (optional)
      number

      Rotation of the labels in degrees

      max-characters
      (optional)
      number

      Number of characters to show in labels. default:250. (Cannot be used with a time series)

      inner-size
      (optional)
      number

      The of size of the inner diameter of a pie chart. A size greater than 0 renders a donut chart.

      invert-axes
      (optional)
      boolean

      Whether to invert the axes so that the x axis is vertical and y axis is horizontal. When true, the x axis is reversed by default. If a bar series is present in the chart, it will be inverted automatically. Defaults to false.

      show-tooltips
      (optional)
      boolean

      Whether to display hover tooltips in the graph. Default:true

      query
      (optional)
      object

      The search query from which to build links.

      options
      (optional)
      object

      Extend the current options. Options can be found here.

      max-labels
      (optional)
      number

      Maximum number of labels to show

      show-labels
      (optional)
      boolean

      Whether to show labels in the graph, does not affect hover tooltips, default:true

      show-count
      (optional)
      boolean

      Whether to show the count in the label. default:false

      show-data-labels
      (optional)
      boolean

      Whether to show the count on the point of the series (Not applicable to pie charts) default:false

      three-d
      (optional)
      boolean

      Renders the chart in 3d. Only works with column and pie charts.

      websocket
      (optional)
      string

      URL to receive updates from

      show-value
      (optional)
      boolean

      Whether to show the value in the middle of the chart when hovered over. This will only work for pie charts with the inner-size attribute set greater then 0.

      select-series
      (optional)
      boolean

      When set to true you will be able to select the series to show on the chart.

      select
      (optional)
      string

      How the data should be filtered when clicking on a part of the chart, a valid query must be present.


      Valid values:-
      • false

        User selects a filter by clicking the value;

        (default)
      • multiselect

        Supports selecting multiple filters that get combined with an 'OR'.

      • multiselect-instant

        Supports selecting multiple filters that get combined with an 'OR', filters will be applied automatically.

      Example

      Source