LineChart

A simple line chart to illustrate your data wrapped with the options to customize the color, y-axis and x-axis, title, grids, and more.

Based off of React Highcharts and A10Charts, so all React Highcharts customizations/attributes are usable here.

Basic Line Chart

Props

Name	Type	Default Value	Required	Description
data	Highcharts Data	{}	no	Data for the line chart. Refer to data structure below for formatting the data.
color	string	'green'	no	Set the color of the chart.
xAxis	string	""	no	Units to add to xAxis ticks. Empty strings will result in no units, just values on tick marks.
yAxis	string	""	no	Units to add to yAxis ticks. Empty strings will result in no units, just values on tick marks.

Usage Example

Viz Props

import React from 'react'

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

const { Line } = Viz
export const MyDashboard = () => {
  return (
    <Line
      name="Response Time"
      colors="red_to_blue"
      data={...}
      vizName="LineChart"
      vizType="line"
      xAxis=""
      yAxis="kb"
    />
  )
}

Props Interface

interface ILineChartProps extends IBasicVizChartProps {
  color: string
  xAxis: string
  yAxis: string
}

UI JSON

{
  vizName: 'LineChart',
  name: 'Response Time',
  data: dataMap['LINE CHART'](),
  colors: 'red_to_blue',
  yAxis: 'kb',
  chartConfig: {
    // any configurations for your chart
    title: { text: 'Response Time Line Chart' },
    yAxis: {
      gridLineWidth: 0,
    },
    plotOptions: {
      area: {
        marker: {
          enabled: false,
        }
      }
    }
  }
}

Notes Regarding UI JSON

In UI JSON, the attribute chartConfig can have all of the attributes listed on highcharts documentation.

The axis unit's are also separately configured outside of chartConfig, under this.props.yAxis and this.props.xAxis, instead of this.props.chartConfig.yAxis.

Data Structure

{
  series: [
    { data: 
      [
        [
          yAxisValue: number, 
          xAxisValue: number
        ], 
        ... // more plot points
      ]
      name: string
    }
  ]
}
            

Data Structure Example

{
  series: [
    { data: 
      [
        [1543437297968, 35],
        [1543537297968, 82],
        ... // more plot points
      ]
      name: "Response Time" 
    }
  ]
}
   

Default Chart Configurations

The default chart configurations are as follows:

// configurations for empty area chart
const CONFIG_AREA: IObject = {
  chart: {
    type: 'area',
    backgroundColor: null,
    borderWidth: 0,
    height: 240,
    spacingTop: 0,
    spacingBottom: 0,
  },
  title: {
    text: undefined,
  },
  xAxis: {
    visible: true,
    title: { text: undefined },
    endOnTick: false,
  },
  yAxis: {
    visible: true,
    title: { text: undefined },
    endOnTick: false,
  },
  plotOptions: {
    area: {
      marker: {
        enabled: false,
      },
    },
  },
  legend: {
    enabled: false,
  },
  credits: {
    enabled: false,
  },
}

Thus, a chart with no given configurations will default to a chart with the configurations above. You will need to add your own configurations in the UI JSON in order to overwrite or add any chart configurations.