MapChart

A chart widget to display a chart with geolocations.

The map data (hc-keys) we choose World, Eckert III projection, high resolution.

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
color	string		no	The colors for the chart plots, it could be a COLORS or a hex code
subChartDataKey	string		no	The data key of sub chart, the sub chart type is pie
width	number | string	'auto'	no	The width of the chart, default unit is px
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 { MapChart } = Viz
export const MyDashboard = () => {
  return (
    <MapChart
      name="MY MAP"
      data={{ series: [...] }}
      color="green"
    />
  )
}

Props Interface

interface IMapProps extends IBasicVizChartProps {
  color?: string
  subChartDataKey?: string
}

UI JSON

{
  "vizName": "MapChart", // The name of the visualization
  "dataSourceID": "ROT.ADC.MAP_DATA", // The data source ID to provide data to the visualization
  "name": "MY MAP", // The title name of the chart
  "color": "green"
}

Data structure

Key	Type	Required	Description
series	HightCharts series data	yes	The chart series data
total	number | string	no	The total info

Example of data structure

// the country code use "World, Eckert III projection, high resolution"
// http://code.highcharts.com/mapdata
{
  series: [{
    name: 'Geo-Locations',
    data: [
      {code: 'us', name: 'USA', value: 100},
      {code: 'in', name: 'India', value: 200},
      {code: 'cn', name: 'China', value: 300},    
    ]
  }],
}