--- title: "Maps - Markers and Points of Interest" enterprise: true framework: javascript version: "14.1.0" --- # Maps - Markers and Points of Interest The Map Marker Series visualises data for geographic points, with the ability to vary the size to represent data values. ## Simple Map Markers #### Markers ```ts import { AgChartOptions, AgCharts, AnimationModule, ContextMenuModule, CrosshairModule, LegendModule, MapMarkerSeriesModule, MapShapeBackgroundSeriesModule, ModuleRegistry, } from "ag-charts-enterprise"; import { backgroundTopology } from "./backgroundTopology"; import { data } from "./data"; import { topology } from "./topology"; ModuleRegistry.registerModules([ AnimationModule, CrosshairModule, LegendModule, MapMarkerSeriesModule, MapShapeBackgroundSeriesModule, ContextMenuModule, ]); const options: AgChartOptions = { title: { text: "UK Cities", }, data, topology, series: [ { type: "map-shape-background", topology: backgroundTopology, }, { type: "map-marker", idKey: "name", }, ], }; options.container = document.getElementById("myChart"); const chart = AgCharts.create(options); ``` [Live example: Markers](https://www.ag-grid.com/charts/typescript/map-markers/examples/markers) To create a Map Marker Series, use the `map-marker` series type and provide data and [topology](https://www.ag-grid.com/charts/javascript/map-topology/). These can be provided in either the chart or series objects. > **Note** > > A Map Marker Series should be combined with a [Map Shape Background Series](https://www.ag-grid.com/charts/javascript/map-shapes/#background-shapes). ```js data: data, topology: topology, series: [ // ... { type: 'map-marker', idKey: 'name', }, ] ``` In this configuration: - The `topology` and `data` are provided once on the chart level. - `idKey` defines the property key in the data that will be matched against the property value in the topology. See [Connecting Data to Topology](https://www.ag-grid.com/charts/javascript/map-topology/#connecting-data-to-topology) for more details. - The `map-shape-background` series has its topology defined on the series level. ## Map Marker Position from Data Instead of using a topology file, the Map Marker Series can use geographic data from within the data. This is best suited for data containing latitude and longitude coordinates such as crime data. #### Marker Series ```ts import { AgChartOptions, AgCharts, AnimationModule, ContextMenuModule, CrosshairModule, LegendModule, MapMarkerSeriesModule, MapShapeBackgroundSeriesModule, ModuleRegistry, } from "ag-charts-enterprise"; import { backgroundTopology } from "./backgroundTopology"; import { data } from "./data"; ModuleRegistry.registerModules([ AnimationModule, CrosshairModule, LegendModule, MapMarkerSeriesModule, MapShapeBackgroundSeriesModule, ContextMenuModule, ]); const options: AgChartOptions = { title: { text: "Crime in Surrey", }, data, series: [ { type: "map-shape-background", topology: backgroundTopology, }, { type: "map-marker", latitudeKey: "lat", longitudeKey: "lon", }, ], }; options.container = document.getElementById("myChart"); const chart = AgCharts.create(options); ``` [Live example: Marker Series](https://www.ag-grid.com/charts/typescript/map-markers/examples/marker-series) ```js data: data, series: [ // ... { type: 'map-marker', latitudeKey: 'lat', longitudeKey: 'lon', }, ] ``` In this configuration: - No `topology` is required for the `map-marker` series. - `latitudeKey` and `longitudeKey` refer to fields in the provided data, and are used to position the marker. ## Proportional Marker Size #### Marker Size ```ts import { AgChartOptions, AgCharts, AnimationModule, ContextMenuModule, CrosshairModule, LegendModule, MapMarkerSeriesModule, MapShapeBackgroundSeriesModule, ModuleRegistry, } from "ag-charts-enterprise"; import { backgroundTopology } from "./backgroundTopology"; import { data } from "./data"; ModuleRegistry.registerModules([ AnimationModule, CrosshairModule, LegendModule, MapMarkerSeriesModule, MapShapeBackgroundSeriesModule, ContextMenuModule, ]); const options: AgChartOptions = { title: { text: "Crime in Surrey", }, data, series: [ { type: "map-shape-background", topology: backgroundTopology, }, { type: "map-marker", latitudeKey: "lat", longitudeKey: "lon", sizeKey: "count", sizeName: "Count", minSize: 3, maxSize: 50, }, ], }; options.container = document.getElementById("myChart"); const chart = AgCharts.create(options); ``` [Live example: Marker Size](https://www.ag-grid.com/charts/typescript/map-markers/examples/marker-size) To vary the size of the marker to denote the magnitude of the data values use `sizeKey`, `minSize` and `maxSize`. ```js { series: [ // ... { type: 'map-marker', latitudeKey: 'lat', longitudeKey: 'lon', sizeKey: 'count', sizeName: 'Count', minSize: 3, maxSize: 50, }, ], } ``` In this configuration: - `sizeKey` provides the numerical values determining the size of each marker. - `sizeName` is optional and configures the display name reflected in [Tooltips](https://www.ag-grid.com/charts/javascript/tooltips/). - `minSize` provides the size of the marker for the smallest data point. It defaults to `size` when not set. - `maxSize` provides the size for the largest data point. When `sizeKey` is not set, `size` is used as the fixed size for every marker. ## Customisation It is possible to customise the `fill`, `stroke` and `shape` of the markers, as well as to add labels. See the [API Reference](#api-reference) for more details. ## API Reference #### Map Marker | Property | Type | Default | Description | | --- | --- | --- | --- | | type (required) | 'map-marker' | | Configuration for the Map Marker Series. | | topology | GeoJSON | | GeoJSON data. | | topologyIdKey | string | name | The property to reference in the topology to match up with data. | | title | string | | The title to use for the series. | | legendItemName | string | | The text to display in the legend for this series. If multiple series share this value, they will be merged for the legend toggle behaviour. | | id | string | auto-generated value | Primary identifier for the series. This is provided as `seriesId` in user callbacks to differentiate multiple series. Auto-generated ids are subject to future change without warning, if your callbacks need to vary behaviour by series please supply your own unique `id` value. | | context | ContextDefault | | Context object to use in callbacks. | | data | DatumDefault[] | | The data to use when rendering the series. If this is not supplied, data must be set on the chart instead. | | visible | boolean | | Whether to display the series. | | cursor | string | | The cursor to use for hovered markers. This config is identical to the CSS `cursor` property. | | selection | AgSelectionOptions | | Configuration for data selection. | | selection.enabled | boolean | | Set to `true` to enable the data-selection on this series. | | selection.containment | 'any' \| 'all' | chart.selection.containment | Override the drag-to-select containment rule for this series. | | selection.selectedItem | AgSelectionStyleOptions | | Styling options for selected items. | | selection.selectedItem.opacity | Opacity | | The opacity of the whole series (line, fill, labels and markers, if any) | | selection.selectedItem.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for the stroke. | | selection.selectedItem.strokeWidth | PixelSize | | The width of the stroke in pixels. | | selection.selectedItem.strokeOpacity | Opacity | | The opacity of the stroke colour. | | selection.selectedItem.lineDash | PixelSize[] | | An array specifying the length in pixels of alternating dashes and gaps. | | selection.selectedItem.lineDashOffset | PixelSize | | The initial offset of the dashed line in pixels. | | selection.selectedItem.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill | | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. | | selection.selectedItem.fillOpacity | Opacity | | The opacity of the fill colour. | | selection.unselectedItem | AgSelectionStyleOptions | | Styling options for unselected items. | | selection.unselectedItem.opacity | Opacity | | The opacity of the whole series (line, fill, labels and markers, if any) | | selection.unselectedItem.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for the stroke. | | selection.unselectedItem.strokeWidth | PixelSize | | The width of the stroke in pixels. | | selection.unselectedItem.strokeOpacity | Opacity | | The opacity of the stroke colour. | | selection.unselectedItem.lineDash | PixelSize[] | | An array specifying the length in pixels of alternating dashes and gaps. | | selection.unselectedItem.lineDashOffset | PixelSize | | The initial offset of the dashed line in pixels. | | selection.unselectedItem.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill | | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. | | selection.unselectedItem.fillOpacity | Opacity | | The opacity of the fill colour. | | selection.unselectedSeries | AgSelectionStyleOptions | | Styling options for series with no selections when there is at least one other selected series. | | selection.unselectedSeries.opacity | Opacity | | The opacity of the whole series (line, fill, labels and markers, if any) | | selection.unselectedSeries.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for the stroke. | | selection.unselectedSeries.strokeWidth | PixelSize | | The width of the stroke in pixels. | | selection.unselectedSeries.strokeOpacity | Opacity | | The opacity of the stroke colour. | | selection.unselectedSeries.lineDash | PixelSize[] | | An array specifying the length in pixels of alternating dashes and gaps. | | selection.unselectedSeries.lineDashOffset | PixelSize | | The initial offset of the dashed line in pixels. | | selection.unselectedSeries.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill | | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. | | selection.unselectedSeries.fillOpacity | Opacity | | The opacity of the fill colour. | | nodeClickRange | PixelSize \| 'exact' \| 'nearest' \| 'area' | | Range from a node that a click triggers the listener. | | showInLegend | boolean | | Whether to include the series in the legend. | | listeners | AgSeriesListeners | | A map of event names to event listeners. | | listeners.seriesNodeClick | Listener | | The listener to call when a node (marker, column, bar, tile or a pie sector) in the series is clicked. | | listeners.seriesNodeDoubleClick | Listener | | The listener to call when a node (marker, column, bar, tile or a pie sector) in the series is double-clicked. | | idKey | DatumKey | | The name of the node key containing the id value. | | latitudeKey | DatumKey | | The key to use to retrieve latitude values from the data, used to control the position of the markers. | | longitudeKey | DatumKey | | The key to use to retrieve longitude values from the data, used to control the position of the markers. | | sizeKey | DatumKey | | The key to use to retrieve size values from the data, used to control the size of the markers. | | colorKey | DatumKey | | The name of the node key containing the colour value. This value (along with `colorScale` config) will be used to determine the colour of the markers. | | labelKey | DatumKey | | The key to use to retrieve values from the data to use as labels for the markers. | | idName | string | | A human-readable description of the id-values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters. | | latitudeName | string | | A human-readable description of the latitude values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters. | | longitudeName | string | | A human-readable description of the longitude values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters. | | sizeName | string | | A human-readable description of the size values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters. | | colorName | string | | A human-readable description of the colour values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters. | | labelName | string | | A human-readable description of the label values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters. | | minSize | PixelSize | | Determines the smallest size a marker can be in pixels when `sizeKey` is present. Defaults to `size` when not set. | | maxSize | PixelSize | | Determines the largest size a marker can be in pixels when `sizeKey` is present. | | sizeDomain | [AgNumericValue, AgNumericValue] | | Explicitly specifies the extent of the domain of `sizeKey` values to map onto the `[minSize, maxSize]` range. Reverse the bounds (e.g. `[100, 0]`) to invert the mapping so that larger values produce smaller markers. | | colorScale | AgColorScale | | Configuration for colour scale with fills, domain, and mode. | | colorScale.fills | AgColorScaleColorStop[] | | Configuration for two or more colours, and the values they are rendered at. | | colorScale.fills.color (required) | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | Colour at this position. | | colorScale.fills.stop | number \| bigint | | Position of this colour in the data domain. In continuous mode, the colour appears exactly at this value. In discrete mode, this is the first value of the next bin. | | colorScale.fills.name | string | | Display name for this bin, used in legend and tooltip labels. | | colorScale.domain | [AgNumericValue, AgNumericValue] | | Fixed domain for the colour scale. If unset, the domain is derived from the data extent. | | colorScale.mode | 'continuous' \| 'discrete' | continuous | Whether the fills should be rendered as a continuous gradient or discrete bins. | | colorScale.missingDataFill | CssColor | | Fill colour for datums with no `colorKey` value. If unset, each series preserves its default behaviour for missing data. | | label | AgMapMarkerSeriesLabel | | Configuration for the labels shown on top of data points. | | label.placement | AgChartLabelCollisionPlacement \| AgChartLabelCollisionPlacement[] | bottom | Placement of the label in relation to the marker. Either a single placement or an ordered fallback list tried in turn until one fits. | | label.spacing | PixelSize | | Distance in pixels between the label and its anchor marker. | | label.formatter | RichFormatter | | A custom formatting function used to convert data values into text for display by labels. | | label.format | string | | Format string used when rendering labels. | | label.itemStyler | Styler | | Function used to style individual datum labels. | | label.enabled | boolean | | Whether the associated elements and properties should be used in the chart. | | label.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for text elements. A colour string, or a theme-colour reference object. | | label.fontSize | FontSize | | The size of the font in pixels for text elements. | | label.fontFamily | FontFamily | | The font family for text elements. | | label.fontStyle | FontStyle | | The style to use for text elements. | | label.fontWeight | FontWeight | | The font weight to use for text elements. | | label.border | BorderOptions | | Stroke options for the box border. | | label.border.enabled | boolean | | Whether the associated elements and properties should be used in the chart. | | label.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for the stroke. | | label.border.strokeWidth | PixelSize | | The width of the stroke in pixels. | | label.border.strokeOpacity | Opacity | | The opacity of the stroke colour. | | label.cornerRadius | PixelSize | | Apply rounded corners to the label box. | | label.padding | PixelSize \| PaddingOptions | | Distance between the label text and the border. A number applies uniform padding; an object sets each side. | | label.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill | | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. | | label.fillOpacity | Opacity | | The opacity of the fill colour. | | label.collision | AgChartLabelCollisionOptions | | Configuration controlling the spacing kept from obstacles and whether a label that cannot be placed clear of every obstacle is kept at its least-overflowing placement or hidden. | | label.collision.threshold | PixelSize | | Collision threshold in pixels. A positive value triggers avoidance strategies when labels are further away, a negative value allows labels to overlap without triggering avoidance. | | label.collision.alwaysShow | boolean | | Whether to keep a colliding label visible when a collision remains after every avoidance strategy has been applied. When `true` the label stays at the best available position; when `false` it is hidden instead. | | label.maxWidth | PixelSize | | Maximum width, in pixels, the label may occupy before it is wrapped or truncated to fit. | | label.maxHeight | PixelSize | | Maximum height, in pixels, the label may occupy before it is wrapped or truncated to fit. | | label.wrapping | 'never' \| 'always' \| 'hyphenate' \| 'on-space' | | Text wrapping strategy applied when the label is constrained by `maxWidth` or `maxHeight`. - `'always'` will always wrap text to fit within the bounds. - `'hyphenate'` is similar to `'always'`, but inserts a hyphen (`-`) if forced to wrap in the middle of a word. - `'on-space'` will only wrap on white space. If there is no possibility to wrap a line on space and satisfy the bounds, the text will be truncated. - `'never'` disables text wrapping. | | label.truncate | boolean | | Whether to truncate the label with an ellipsis when it does not fit within its bounds. | | tooltip | AgSeriesTooltip | | Series-specific tooltip configuration. | | tooltip.enabled | boolean | | Whether to show tooltips when the series are hovered over. | | tooltip.showArrow | boolean | | The tooltip arrow is displayed by default, unless the container restricts it or a position offset is provided. To always display the arrow, set `showArrow` to `true`. To remove the arrow, set `showArrow` to `false`. | | tooltip.range | PixelSize \| 'exact' \| 'nearest' \| 'area' | | Range from a point that triggers the tooltip to show. Each series type uses its own default; typically this is `'nearest'` for marker-based series and `'exact'` for shape-based series. | | tooltip.position | AgTooltipPositionOptions | | The position of the tooltip. Each series type uses its own default; typically this is `'node'` for marker-based series and `'pointer'` for shape-based series. | | tooltip.position.anchorTo | AgTooltipAnchorTo | | The element or point to position the tooltip relative to. | | tooltip.position.placement | AgTooltipPlacement \| AgTooltipPlacement[] | | The positioning of the tooltip in relation to the element it's anchored to. Multiple values can be provided as a fallback mechanism for the case the tooltip does not fit inside the chart. | | tooltip.position.xOffset | PixelSize | | The horizontal offset in pixels for the position of the tooltip. | | tooltip.position.yOffset | PixelSize | | The vertical offset in pixels for the position of the tooltip. | | tooltip.position.offset | PixelSize | | The distance in pixels between the tooltip and its anchor point, applied in the placement direction. Default: `12` (`0` when `anchorTo` is `'chart'`). | | tooltip.interaction | AgSeriesTooltipInteraction | | Configuration for tooltip interaction. | | tooltip.interaction.enabled (required) | boolean | | Set to `true` to keep the tooltip open when the mouse is hovering over it, and enable clicking tooltip text | | tooltip.renderer | Renderer | | Function used to create the content for tooltips. | | itemStyler | Styler | | A callback function for adjusting the styles of a particular Map marker based on the input parameters. | | highlight | AgMultiSeriesHighlightOptions | | Configuration for highlighting when a series or legend item is hovered over. | | highlight.highlightedSeries | AgHighlightStyleOptions | | Options for the highlighted series. | | highlight.highlightedSeries.opacity | Opacity | | The opacity of the whole series (line, fill, labels and markers, if any) | | highlight.highlightedSeries.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for the stroke. | | highlight.highlightedSeries.strokeWidth | PixelSize | | The width of the stroke in pixels. | | highlight.highlightedSeries.strokeOpacity | Opacity | | The opacity of the stroke colour. | | highlight.highlightedSeries.lineDash | PixelSize[] | | An array specifying the length in pixels of alternating dashes and gaps. | | highlight.highlightedSeries.lineDashOffset | PixelSize | | The initial offset of the dashed line in pixels. | | highlight.highlightedSeries.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill | | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. | | highlight.highlightedSeries.fillOpacity | Opacity | | The opacity of the fill colour. | | highlight.unhighlightedSeries | AgHighlightStyleOptions | | Options for the un-highlighted series when there is an active highlight. | | highlight.unhighlightedSeries.opacity | Opacity | | The opacity of the whole series (line, fill, labels and markers, if any) | | highlight.unhighlightedSeries.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for the stroke. | | highlight.unhighlightedSeries.strokeWidth | PixelSize | | The width of the stroke in pixels. | | highlight.unhighlightedSeries.strokeOpacity | Opacity | | The opacity of the stroke colour. | | highlight.unhighlightedSeries.lineDash | PixelSize[] | | An array specifying the length in pixels of alternating dashes and gaps. | | highlight.unhighlightedSeries.lineDashOffset | PixelSize | | The initial offset of the dashed line in pixels. | | highlight.unhighlightedSeries.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill | | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. | | highlight.unhighlightedSeries.fillOpacity | Opacity | | The opacity of the fill colour. | | highlight.bringToFront | boolean | true | Show this series in front when highlighted. | | highlight.enabled | boolean | | Set to `false` to disable highlighting. | | highlight.highlightedItem | AgHighlightStyleOptions | | Options for the highlighted item. | | highlight.highlightedItem.opacity | Opacity | | The opacity of the whole series (line, fill, labels and markers, if any) | | highlight.highlightedItem.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for the stroke. | | highlight.highlightedItem.strokeWidth | PixelSize | | The width of the stroke in pixels. | | highlight.highlightedItem.strokeOpacity | Opacity | | The opacity of the stroke colour. | | highlight.highlightedItem.lineDash | PixelSize[] | | An array specifying the length in pixels of alternating dashes and gaps. | | highlight.highlightedItem.lineDashOffset | PixelSize | | The initial offset of the dashed line in pixels. | | highlight.highlightedItem.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill | | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. | | highlight.highlightedItem.fillOpacity | Opacity | | The opacity of the fill colour. | | highlight.unhighlightedItem | AgHighlightStyleOptions | | Options for the un-highlighted items when there is an active highlight. | | highlight.unhighlightedItem.opacity | Opacity | | The opacity of the whole series (line, fill, labels and markers, if any) | | highlight.unhighlightedItem.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for the stroke. | | highlight.unhighlightedItem.strokeWidth | PixelSize | | The width of the stroke in pixels. | | highlight.unhighlightedItem.strokeOpacity | Opacity | | The opacity of the stroke colour. | | highlight.unhighlightedItem.lineDash | PixelSize[] | | An array specifying the length in pixels of alternating dashes and gaps. | | highlight.unhighlightedItem.lineDashOffset | PixelSize | | The initial offset of the dashed line in pixels. | | highlight.unhighlightedItem.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill | | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. | | highlight.unhighlightedItem.fillOpacity | Opacity | | The opacity of the fill colour. | | shape | 'circle' \| 'cross' \| 'diamond' \| 'heart' \| 'plus' \| 'pin' \| 'square' \| 'star' \| 'triangle' \| AgMarkerShapeFn | | The shape to use for the markers. You can also supply a custom marker by providing a `AgMarkerShapeFn` function. | | size | PixelSize | | The size in pixels of the markers. Used as the fixed marker size only when `sizeKey` is absent; when `sizeKey` is present the scale lower bound is controlled by `minSize` instead. | | fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill | | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. | | fillOpacity | Opacity | | The opacity of the fill colour. | | stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for the stroke. | | strokeWidth | PixelSize | | The width of the stroke in pixels. | | strokeOpacity | Opacity | | The opacity of the stroke colour. | | lineDash | PixelSize[] | | An array specifying the length in pixels of alternating dashes and gaps. | | lineDashOffset | PixelSize | | The initial offset of the dashed line in pixels. |