IndicatorsChart

A flexible indicator chart. (Note, there is another viz that is similarly called Indicator (singular). This viz is plural, Indicators.)

Allows for dividers, four types of value/unit alignment (bottom, top, left, right), and custom colors.

Props

Name	Type	Default Value	Required	Description
data	number[] | string[]	[]	no	Set the values of your indicators here.
units	number[] | string[]	[]	no	Set the units/accompanying phrases with each value here.
divider	boolean	false	no	True to have a divider in your indicator chart, false to have no divider in your chart.
unitPosition	'bottom' | 'right' | 'top' | 'left'	'bottom'	no	Set the alignment of the units to the values.
unitColor	string	'#00aa6c'	no	Set the color of the unit(s).
valueColor	string	'grey'	no	Set the color of the value(s).

Usage Example

Viz Props

import React from 'react'

import { Viz } from 'a10-gui-dgp-viz'

const { IndicatorsChart } = Viz
export const MyDashboard = () => {
  return (
    <IndicatorsChart
      divider={true}
      name="Client SSL Conn. Bottom"
      unitColor="grey"
      unitPosition="top"
      units=['Max', 'Average', 'Rate']
      valueColor="green"
      vizName="IndicatorChart"
    />
  )
}

Props Interface

UI JSON

Data Structure

data: number[] or string[]

Data Structure Example

data: [4234, 1.2, 1.2]