Box Plot

BoxPlot component

Draws box plot to display the distribution of the data using their quartiles. Whiskers can be drawn to display additional information about the distribution and outliers can be represented by dots.

Properties

• config: Config – chart configuration object describing the signals
  • Config:
    • signalSets: SignalSet[] – an array of signal set specifications
  • SignalSet:
    • cid: string – the identifier of the signal set
    • sigCid: string – the identifier of the signal, only numerical signals are valid
    • tsSigCid: string – the identifier of the timestamp signal, defaults to "ts"
    • label: string – signal label
    • fillColor: d3-color.color – color of the box
    • enabled: boolean – the signal is shown if true or undefined
    • filter: object – the filter will be added to each data query (see Data access)
• height: number – the height of the chart in pixels
• margin: Margin
• topWhiskerPercentile: number or string – position of the top whisker, allowed values are: number from 0 to 100 (percentile), "max", undefined = Q3 + 1.5 IQR (default)
• bottomWhiskerPercentile: number or string – position of the top whisker, allowed values are: number from 0 to 100 (percentile), "min", undefined = Q1 - 1.5 IQR (default)
• topPercentile: number – percentile of the top of the box, allowed numbers are from 0 to 100, defaults to 75 (Q3)
• middlePercentile: number – percentile of the middle of the box, allowed numbers are from 0 to 100, defaults to 50 (median)
• bottomPercentile: number – percentile of the bottom of the box, allowed numbers are from 0 to 100, defaults to 25 (Q1)
• maxBoxWidth: number – width of the box, defaults to 100. The actual width of the box can be smaller if it is needed to fit all the boxes to the chart
• strokeWidth: number – box outer stroke width, defaults to 1
• medianLineWidth: number – defaults to 1
• whiskerLineWidth: number – width of the vertical line, defaults to 1
• whiskerTipLineWidth: number – width of the horizonal whisker line, defaults to 1
• whiskerTipLength: number – length of the whisker tip line (along the x-axis) relative to the width of the box (1 = same width as box, 0 = no tip), defaults to 0.7
• dotRadius: number – radius of the outlier dots, defaults to 5
• showMin: boolean – dot for the minimum (if bottomWhiskerPercentile is not "min"), defaults to true
• showMax: boolean – dot for the maximum (if topWhiskerPercentile is not "max"), defaults to true
• xAxisLabel: string
• yAxisLabel: number
• yAxisTicksCount: number – the number of ticks (marks) along the y-axis
• xAxisTicksFormat: function – format function for the ticks (see d3-axis.tickFormat)
• yAxisTicksFormat: function – format function for the ticks (see d3-axis.tickFormat)
• withCursor: boolean – adds extra visual clues to see where the cursor is, defaults to true
• withTooltip: boolean – enables a tooltip displaying signal values, defaults to true
• tooltipFormat: function – function to format the value in the tooltip
• className: string – CSS class
• style: object – CSS style
• filter: object – the filter will be added to each data query (see Data access)
• getData: fucntion – if specified, the returned value from this function is used instead of data query

How to...

...specify the box and whiskers

• top whisker – topWhiskerPercentile
• top of the box – topPercentile
• middle of the box – middlePercentile
• bottom of the box – bottomPercentile
• bottom whisker – bottomWhiskerPercentile