Home Components US Map

US Map

Loading... 
<USMap
    data={state_population}
    state=state_name
    value=population
/>

Examples

Color Scales

colorScale=blue

Loading...

colorScale=green

Loading...

colorScale=red

Loading...

colorScale=bluegreen

Loading...

Custom Color Scale

<USMap
    data={state_population}
    state=state_name
    value=population
    colorPalette={['maroon','white','#1c0d80']}
    legend=true
/>
Loading...

Legend

Default

<USMap
    data={state_population}
    state=state_name
    value=population
    legend=true
/>
Loading...

With Filter

<USMap
    data={state_population}
    state=state_name
    value=population
    colorPalette={['maroon','white','#1c0d80']}
    legend=true
    filter=true
/>
Loading... 
<USMap
	data={state_current}
	state=state
	value=value
	abbreviations=true
	link=state_link
	title="Sales by State"
	subtitle="{most_recent_month[0].month}"
/>

State Abbreviations

<USMap data={map_data} state=state_abbrev value=sales_usd abbreviations=true />
Loading...

Options

Data

data
Required

Query name, wrapped in curly braces

Options:
query name
state
Required

Column to be used as the name for each state

Options:
column name
abbreviations

If true, map will look for two letter abbreviations rather than full names

Options:
Default:
false
value
Required

Column to be used as the value determining the colour of each state

Options:
column name
colorScale

Colour scale to be used. To use a custom color palette, see the colorPalette prop

Options:
Default:
blue
colorPalette

Custom color palette to use for setting state colors. Overrides colorScale. E.g., {['#cf0d06','#eb5752','#e88a87']}

Options:
array of color codes (can be CSS, hex, RGB, HSL)
min

Minimum value for the colour scale. Anything below the minimum will be shown in the same colour as the min value

Options:
number
max

Maximum value for the colour scale. Anything above the maximum will be shown in the same colour as the max value

Options:
number
title

Title appearing above the map. Is included when you click to save the map image

Options:
string
subtitle

Subtitle appearing just above the map. Is included when you click to save the map image

Options:
string
link

Column containing links. When supplied, allows you to click each state on the map and navigate to the link

Options:
column name
fmt

Format to use for values (see available formats)

Options:
Excel-style format | built-in format | custom format
legend

Whether to show a legend at the top of the map

Options:
Default:
false
filter

Whether to include filter controls on the legend. Can only be used when legend = true

Options:
Default:
false
emptySet

Sets behaviour for empty datasets. Can throw an error, a warning, or allow empty. When set to error, empty datasets will block builds in build:strict. Note this only applies to initial page load - empty datasets caused by input component changes (dropdowns, etc.) are allowed.

Options:
Default:
error
emptyMessage

Text to display when an empty dataset is received - only applies when emptySet is warn or pass, or when the empty dataset is a result of an input component change (dropdowns, etc.).

Options:
string
Default:
No records
renderer
downloadableData
Whether to show the download button to allow users to download the data
Options:
Default:
true
downloadableImage
Whether to show the button to allow users to save the chart as an image
Options:
Default:
true

Which chart renderer type (canvas or SVG) to use. See ECharts' documentation on renderers.

Options:
Default:
canvas

Custom Echarts Options

echartsOptions

Custom Echarts options to override the default options. See reference page for available options.

Options:
{{exampleOption:'exampleValue'}}
seriesOptions

Custom Echarts options to override the default options for all series in the chart. This loops through the series to apply the settings rather than having to specify every series manually using echartsOptions See reference page for available options.

Options:
{{exampleSeriesOption:'exampleValue'}}
printEchartsConfig

Helper prop for custom chart development - inserts a code block with the current echarts config onto the page so you can see the options used and debug your custom options

Options:
Default:
false

Interactivity

connectGroup

Group name to connect this chart to other charts for synchronized tooltip hovering. Charts with the same connectGroup name will become connected