ColumnChart

A chart widget to display one or more column charts.

Props

Name	Type	Default Value	Required	Description
data	Highcharts Data		yes	The data to feed the visualization
name	string		yes	The title name of the chart
xAxis	string		no	The value unit of the x axis of the chart
yAxis	string		no	The value unit of the y axis of the chart
colors	string | string[]		no	The colors for the chart plots, it could be a COLORS or an array of hex codes
height	number | string	300	no	The height of the chart, default unit is px
chartConfig	object		no	Additional Highcharts config to customize

Usage Example

Viz Props

import React from 'react'

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

const { ColumnChart } = Viz
export const MyDashboard = () => {
  return (
    <ColumnChart
      name="MY CHART"
      data={{ categories: [], series: [] }}
      colors="skin_to_blue"
    />
  )
}

UI JSON

{
  "vizName": "ColumnChart", // The name of the visualization
  "dataSourceID": "ROT.ADC.L4SLB.THROUGHPUT", // The data source ID to provide data to the visualization
  "name": "THROUGHPUT", // The title name of the chart
  "description": "", // This text will show up on hover  
  "colors": "skin_to_blue", // The colors for the chart plots, it could be a COLOR_SET or an array of hex codes
}

Data structure

Key	Type	Required	Description
series	HightCharts series data	yes	The chart series data
categories	string[]	yes	The category of each value of each series
total	number | string	no	The total info

Example of data structure

{
  categories: ['0-10 Mbps', '10-20 Mbps', '>20 Mbps'],
  series: [
    {
      name: 'Upstream',
      data: [10, 20, 30],
    },
    {
      name: 'Downstream',
      data: [100, 200, 300],
    },
  ],
  total: 600,
}