Logo Plotly.NET

Binder  Notebook

Styling Markers

Table of contents

Basics

You can control marker size, color, symbol, and other aesthetics by styling the Marker object associated with a chart.

This can be done by either setting the Marker argument of the chart constructor:

open Plotly.NET
open Plotly.NET.TraceObjects

let byConstructor = 
    Chart.Point(
        xy = [1,2], 
        Marker = Marker.init(
            Color=Color.fromKeyword Red, 
            Size=20
        )
    )

or after chart creation with withMarkerStyle:

let byStyle = 
    Chart.Point(xy=[1,2])
    |> Chart.withMarkerStyle(
        Color=Color.fromKeyword Blue, 
        Size=50
    )

Marker Symbols

Marker symbols control the appearance of points in a plot. There are some things to keep in mind when working with marker symbols:

2D Marker Symbols

2D Marker symbols are set using StyleParam.MarkerSymbol.

let cross2D = 
    Chart.Point(xy=[1,2])
    |> Chart.withMarkerStyle(
        Color=Color.fromKeyword Blue, 
        Size=50,
        Symbol=StyleParam.MarkerSymbol.Cross
    )

To modify a symbol, use StyleParam.MarkerSymbol.Modified, which takes a MarkerSymbol and a SymbolStyle.

The following code modifies StyleParam.MarkerSymbol.Circle with StyleParam.SymbolStyle.Open to create an open circle symbol:

let circle2DOpen = 
    Chart.Point(xy=[1,2])
    |> Chart.withMarkerStyle(
        Color=Color.fromKeyword Blue, 
        Size=50,
        Symbol=StyleParam.MarkerSymbol.Modified(
            StyleParam.MarkerSymbol.Circle,
            StyleParam.SymbolStyle.Open
        )
    )

3D Marker Symbols

2D Marker symbols are set using StyleParam.MarkerSymbol3D.

Keep in mind that these must also be set on the Symbol3D property of the Marker object, not the Symbol property.

let cross3D = 
    Chart.Point3D(xyz=[1,2,3])
    |> Chart.withMarkerStyle(
        Color=Color.fromKeyword Blue, 
        Size=50,
        Symbol3D=StyleParam.MarkerSymbol3D.Cross
    )
namespace Plotly
namespace Plotly.NET
module Defaults from Plotly.NET
<summary> Contains mutable global default values. Changing these values will apply the default values to all consecutive Chart generations. </summary>
val mutable DefaultDisplayOptions: Plotly.NET.DisplayOptions
Multiple items
type DisplayOptions = inherit DynamicObj new: unit -> DisplayOptions static member addAdditionalHeadTags: additionalHeadTags: XmlNode list -> (DisplayOptions -> DisplayOptions) static member addChartDescription: description: XmlNode list -> (DisplayOptions -> DisplayOptions) static member combine: first: DisplayOptions -> second: DisplayOptions -> DisplayOptions static member getAdditionalHeadTags: displayOpts: DisplayOptions -> XmlNode list static member getChartDescription: displayOpts: DisplayOptions -> XmlNode list static member getDocumentCharset: displayOpts: DisplayOptions -> string static member getDocumentDescription: displayOpts: DisplayOptions -> string static member getDocumentFavicon: displayOpts: DisplayOptions -> XmlNode ...

--------------------
new: unit -> Plotly.NET.DisplayOptions
static member Plotly.NET.DisplayOptions.init: ?DocumentTitle: string * ?DocumentCharset: string * ?DocumentDescription: string * ?DocumentFavicon: Giraffe.ViewEngine.HtmlElements.XmlNode * ?AdditionalHeadTags: Giraffe.ViewEngine.HtmlElements.XmlNode list * ?ChartDescription: Giraffe.ViewEngine.HtmlElements.XmlNode list * ?PlotlyJSReference: Plotly.NET.PlotlyJSReference -> Plotly.NET.DisplayOptions
type PlotlyJSReference = | CDN of string | Full | Require of string | NoReference
<summary> Sets how plotly is referenced in the head of html docs. </summary>
union case Plotly.NET.PlotlyJSReference.NoReference: Plotly.NET.PlotlyJSReference
namespace Plotly.NET.TraceObjects
val byConstructor: GenericChart
type Chart = static member Bubble: x: #IConvertible seq * y: #IConvertible seq * sizes: int seq * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: float seq * ?Text: 'c * ?MultiText: 'c seq * ?TextPosition: TextPosition * ?MultiTextPosition: TextPosition seq * ?MarkerColor: Color * ?MarkerColorScale: Colorscale * ?MarkerOutline: Line * ?MarkerSymbol: MarkerSymbol * ?MultiMarkerSymbol: MarkerSymbol seq * ?Marker: Marker * ?LineColor: Color * ?LineColorScale: Colorscale * ?LineWidth: float * ?LineDash: DrawingStyle * ?Line: Line * ?AlignmentGroup: string * ?OffsetGroup: string * ?StackGroup: string * ?Orientation: Orientation * ?GroupNorm: GroupNorm * ?UseWebGL: bool * ?UseDefaults: bool -> GenericChart (requires 'c :> IConvertible) + 2 overloads static member Line: x: #IConvertible seq * y: #IConvertible seq * ?ShowMarkers: bool * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: float seq * ?Text: 'c * ?MultiText: 'c seq * ?TextPosition: TextPosition * ?MultiTextPosition: TextPosition seq * ?MarkerColor: Color * ?MarkerColorScale: Colorscale * ?MarkerOutline: Line * ?MarkerSymbol: MarkerSymbol * ?MultiMarkerSymbol: MarkerSymbol seq * ?Marker: Marker * ?LineColor: Color * ?LineColorScale: Colorscale * ?LineWidth: float * ?LineDash: DrawingStyle * ?Line: Line * ?AlignmentGroup: string * ?OffsetGroup: string * ?StackGroup: string * ?Orientation: Orientation * ?GroupNorm: GroupNorm * ?Fill: Fill * ?FillColor: Color * ?FillPattern: Pattern * ?UseWebGL: bool * ?UseDefaults: bool -> GenericChart (requires 'c :> IConvertible) + 2 overloads static member Point: x: #IConvertible seq * y: #IConvertible seq * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: float seq * ?Text: 'c * ?MultiText: 'c seq * ?TextPosition: TextPosition * ?MultiTextPosition: TextPosition seq * ?MarkerColor: Color * ?MarkerColorScale: Colorscale * ?MarkerOutline: Line * ?MarkerSymbol: MarkerSymbol * ?MultiMarkerSymbol: MarkerSymbol seq * ?Marker: Marker * ?AlignmentGroup: string * ?OffsetGroup: string * ?StackGroup: string * ?Orientation: Orientation * ?GroupNorm: GroupNorm * ?UseWebGL: bool * ?UseDefaults: bool -> GenericChart (requires 'c :> IConvertible) + 2 overloads static member Range: x: #IConvertible seq * y: #IConvertible seq * upper: #IConvertible seq * lower: #IConvertible seq * mode: Mode * ?Name: string * ?GroupName: string * ?ShowMarkers: bool * ?ShowLegend: bool * ?Text: 'e * ?MultiText: 'e seq * ?TextPosition: TextPosition * ?MultiTextPosition: TextPosition seq * ?MarkerColor: Color * ?MarkerColorScale: Colorscale * ?MarkerOutline: Line * ?MarkerSymbol: MarkerSymbol * ?MultiMarkerSymbol: MarkerSymbol seq * ?Marker: Marker * ?UpperMarker: Marker * ?LowerMarker: Marker * ?LineColor: Color * ?LineColorScale: Colorscale * ?LineWidth: float * ?LineDash: DrawingStyle * ?Line: Line * ?UpperLine: Line * ?LowerLine: Line * ?RangeColor: Color * ?RangePattern: Pattern * ?UpperText: 'f * ?MultiUpperText: 'f seq * ?LowerText: 'g * ?MultiLowerText: 'g seq * ?TextFont: Font * ?LowerName: string * ?UpperName: string * ?UseDefaults: bool -> GenericChart (requires 'e :> IConvertible and 'f :> IConvertible and 'g :> IConvertible) + 2 overloads static member Scatter: ?X: 'a seq * ?XEncoded: EncodedTypedArray * ?MultiX: 'a seq seq * ?Y: 'b seq * ?YEncoded: EncodedTypedArray * ?MultiY: 'b seq seq * ?Mode: Mode * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: float seq * ?Text: 'c * ?MultiText: 'c seq * ?TextPosition: TextPosition * ?MultiTextPosition: TextPosition seq * ?MarkerColor: Color * ?MarkerColorScale: Colorscale * ?MarkerOutline: Line * ?MarkerSymbol: MarkerSymbol * ?MultiMarkerSymbol: MarkerSymbol seq * ?Marker: Marker * ?LineColor: Color * ?LineColorScale: Colorscale * ?LineWidth: float * ?LineDash: DrawingStyle * ?Line: Line * ?AlignmentGroup: string * ?OffsetGroup: string * ?StackGroup: string * ?Orientation: Orientation * ?GroupNorm: GroupNorm * ?Fill: Fill * ?FillColor: Color * ?FillPattern: Pattern * ?UseWebGL: bool * ?UseDefaults: bool -> GenericChart (requires 'a :> IConvertible and 'b :> IConvertible and 'c :> IConvertible) + 3 overloads static member Spline: x: #IConvertible seq * y: #IConvertible seq * ?ShowMarkers: bool * ?Smoothing: float * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: float seq * ?Text: 'c * ?MultiText: 'c seq * ?TextPosition: TextPosition * ?MultiTextPosition: TextPosition seq * ?MarkerColor: Color * ?MarkerColorScale: Colorscale * ?MarkerOutline: Line * ?MarkerSymbol: MarkerSymbol * ?MultiMarkerSymbol: MarkerSymbol seq * ?Marker: Marker * ?LineColor: Color * ?LineColorScale: Colorscale * ?LineWidth: float * ?LineDash: DrawingStyle * ?Line: Line * ?AlignmentGroup: string * ?OffsetGroup: string * ?StackGroup: string * ?Orientation: Orientation * ?GroupNorm: GroupNorm * ?Fill: Fill * ?FillColor: Color * ?FillPattern: Pattern * ?UseWebGL: bool * ?UseDefaults: bool -> GenericChart (requires 'c :> IConvertible) + 2 overloads
static member Chart.Point: xy: (#System.IConvertible * #System.IConvertible) seq * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: float seq * ?Text: 'c * ?MultiText: 'c seq * ?TextPosition: StyleParam.TextPosition * ?MultiTextPosition: StyleParam.TextPosition seq * ?MarkerColor: Color * ?MarkerColorScale: StyleParam.Colorscale * ?MarkerOutline: Line * ?MarkerSymbol: StyleParam.MarkerSymbol * ?MultiMarkerSymbol: StyleParam.MarkerSymbol seq * ?Marker: Marker * ?AlignmentGroup: string * ?OffsetGroup: string * ?StackGroup: string * ?Orientation: StyleParam.Orientation * ?GroupNorm: StyleParam.GroupNorm * ?UseWebGL: bool * ?UseDefaults: bool -> GenericChart (requires 'c :> System.IConvertible)
static member Chart.Point: xEncoded: EncodedTypedArray * yEncoded: EncodedTypedArray * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: float seq * ?Text: 'a * ?MultiText: 'a seq * ?TextPosition: StyleParam.TextPosition * ?MultiTextPosition: StyleParam.TextPosition seq * ?MarkerColor: Color * ?MarkerColorScale: StyleParam.Colorscale * ?MarkerOutline: Line * ?MarkerSymbol: StyleParam.MarkerSymbol * ?MultiMarkerSymbol: StyleParam.MarkerSymbol seq * ?Marker: Marker * ?AlignmentGroup: string * ?OffsetGroup: string * ?StackGroup: string * ?Orientation: StyleParam.Orientation * ?GroupNorm: StyleParam.GroupNorm * ?UseWebGL: bool * ?UseDefaults: bool -> GenericChart (requires 'a :> System.IConvertible)
static member Chart.Point: x: #System.IConvertible seq * y: #System.IConvertible seq * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: float seq * ?Text: 'c * ?MultiText: 'c seq * ?TextPosition: StyleParam.TextPosition * ?MultiTextPosition: StyleParam.TextPosition seq * ?MarkerColor: Color * ?MarkerColorScale: StyleParam.Colorscale * ?MarkerOutline: Line * ?MarkerSymbol: StyleParam.MarkerSymbol * ?MultiMarkerSymbol: StyleParam.MarkerSymbol seq * ?Marker: Marker * ?AlignmentGroup: string * ?OffsetGroup: string * ?StackGroup: string * ?Orientation: StyleParam.Orientation * ?GroupNorm: StyleParam.GroupNorm * ?UseWebGL: bool * ?UseDefaults: bool -> GenericChart (requires 'c :> System.IConvertible)
Multiple items
type Marker = inherit DynamicObj new: unit -> Marker static member init: ?Angle: float * ?AngleRef: AngleRef * ?AutoColorScale: bool * ?CAuto: bool * ?CMax: float * ?CMid: float * ?CMin: float * ?Color: Color * ?Colors: Color seq * ?ColorAxis: SubPlotId * ?ColorBar: ColorBar * ?Colorscale: Colorscale * ?CornerRadius: int * ?Gradient: Gradient * ?Outline: Line * ?MaxDisplayed: int * ?Opacity: float * ?MultiOpacity: float seq * ?Pattern: Pattern * ?ReverseScale: bool * ?ShowScale: bool * ?Size: int * ?MultiSize: int seq * ?SizeMin: int * ?SizeMode: MarkerSizeMode * ?SizeRef: int * ?StandOff: float * ?MultiStandOff: float seq * ?Symbol: MarkerSymbol * ?MultiSymbol: MarkerSymbol seq * ?Symbol3D: MarkerSymbol3D * ?MultiSymbol3D: MarkerSymbol3D seq * ?OutlierColor: Color * ?OutlierWidth: int -> Marker static member style: ?Angle: float * ?AngleRef: AngleRef * ?AutoColorScale: bool * ?CAuto: bool * ?CMax: float * ?CMid: float * ?CMin: float * ?Color: Color * ?Colors: Color seq * ?ColorAxis: SubPlotId * ?ColorBar: ColorBar * ?Colorscale: Colorscale * ?CornerRadius: int * ?Gradient: Gradient * ?Outline: Line * ?MaxDisplayed: int * ?Opacity: float * ?MultiOpacity: float seq * ?Pattern: Pattern * ?ReverseScale: bool * ?ShowScale: bool * ?Size: int * ?MultiSize: int seq * ?SizeMin: int * ?SizeMode: MarkerSizeMode * ?SizeRef: int * ?StandOff: float * ?MultiStandOff: float seq * ?Symbol: MarkerSymbol * ?MultiSymbol: MarkerSymbol seq * ?Symbol3D: MarkerSymbol3D * ?MultiSymbol3D: MarkerSymbol3D seq * ?OutlierColor: Color * ?OutlierWidth: int -> (Marker -> Marker)
<summary> The marker object determines the style of the markers representing datums in various types of plots. </summary>

--------------------
new: unit -> Marker
static member Marker.init: ?Angle: float * ?AngleRef: StyleParam.AngleRef * ?AutoColorScale: bool * ?CAuto: bool * ?CMax: float * ?CMid: float * ?CMin: float * ?Color: Color * ?Colors: Color seq * ?ColorAxis: StyleParam.SubPlotId * ?ColorBar: ColorBar * ?Colorscale: StyleParam.Colorscale * ?CornerRadius: int * ?Gradient: Gradient * ?Outline: Line * ?MaxDisplayed: int * ?Opacity: float * ?MultiOpacity: float seq * ?Pattern: Pattern * ?ReverseScale: bool * ?ShowScale: bool * ?Size: int * ?MultiSize: int seq * ?SizeMin: int * ?SizeMode: StyleParam.MarkerSizeMode * ?SizeRef: int * ?StandOff: float * ?MultiStandOff: float seq * ?Symbol: StyleParam.MarkerSymbol * ?MultiSymbol: StyleParam.MarkerSymbol seq * ?Symbol3D: StyleParam.MarkerSymbol3D * ?MultiSymbol3D: StyleParam.MarkerSymbol3D seq * ?OutlierColor: Color * ?OutlierWidth: int -> Marker
type Color = override Equals: other: obj -> bool override GetHashCode: unit -> int static member fromARGB: a: int -> r: int -> g: int -> b: int -> Color static member fromColorScaleValues: c: #IConvertible seq -> Color static member fromColors: c: Color seq -> Color static member fromHex: s: string -> Color static member fromKeyword: c: ColorKeyword -> Color static member fromRGB: r: int -> g: int -> b: int -> Color static member fromString: c: string -> Color member Value: obj
<summary> Plotly color can be a single color, a sequence of colors, or a sequence of numeric values referencing the color of the colorscale obj </summary>
static member Color.fromKeyword: c: ColorKeyword -> Color
union case ColorKeyword.Red: ColorKeyword
type GenericChart = | Chart of data: Trace * layout: Layout * config: Config * displayOpts: DisplayOptions | MultiChart of data: Trace list * layout: Layout * config: Config * displayOpts: DisplayOptions static member addConfig: config: Config -> gChart: GenericChart -> GenericChart static member addDisplayOptions: displayOpts: DisplayOptions -> gChart: GenericChart -> GenericChart static member addLayout: layout: Layout -> gChart: GenericChart -> GenericChart static member combine: gCharts: GenericChart seq -> GenericChart static member countTrace: gChart: GenericChart -> int static member existsTrace: predicate: (Trace -> bool) -> gChart: GenericChart -> bool static member fromChartDTO: dto: ChartDTO -> GenericChart static member fromFigure: fig: Figure -> GenericChart static member getConfig: gChart: GenericChart -> Config static member getDisplayOptions: gChart: GenericChart -> DisplayOptions ...
<summary> The central type that gets created by all Chart constructors is GenericChart, which itself represents either a single chart or a multi chart (as a Discriminate Union type). A GenericChart consists of four top level objects: Trace (multiple of those in the case of a MultiChart), Layout, Config, and DisplayOptions. - `Trace` is in principle the representation of a dataset on a chart, including for example the data itself, color and shape of the visualization, etc. - `Layout` is everything of the chart that is not dataset specific - e.g. the shape and style of axes, the chart title, etc. - `Config` is an object that configures high level properties of the chart like making all chart elements editable or the tool bar on top - `DisplayOptions` is an object that contains meta information about how the html document that contains the chart. </summary>
static member GenericChart.toChartHTML: gChart: GenericChart -> string
val byStyle: GenericChart
static member Chart.withMarkerStyle: ?Angle: float * ?AngleRef: StyleParam.AngleRef * ?AutoColorScale: bool * ?CAuto: bool * ?CMax: float * ?CMid: float * ?CMin: float * ?Color: Color * ?Colors: Color seq * ?ColorAxis: StyleParam.SubPlotId * ?ColorBar: ColorBar * ?Colorscale: StyleParam.Colorscale * ?CornerRadius: int * ?Gradient: Gradient * ?Outline: Line * ?MaxDisplayed: int * ?Opacity: float * ?MultiOpacity: float seq * ?Pattern: Pattern * ?ReverseScale: bool * ?ShowScale: bool * ?Size: int * ?MultiSize: int seq * ?SizeMin: int * ?SizeMode: StyleParam.MarkerSizeMode * ?SizeRef: int * ?StandOff: float * ?MultiStandOff: float seq * ?Symbol: StyleParam.MarkerSymbol * ?MultiSymbol: StyleParam.MarkerSymbol seq * ?Symbol3D: StyleParam.MarkerSymbol3D * ?MultiSymbol3D: StyleParam.MarkerSymbol3D seq * ?OutlierColor: Color * ?OutlierWidth: int -> (GenericChart -> GenericChart)
union case ColorKeyword.Blue: ColorKeyword
val cross2D: GenericChart
module StyleParam from Plotly.NET
type MarkerSymbol = | Modified of MarkerSymbol * SymbolStyle | Circle | Square | Diamond | Cross | X | TriangleUp | TriangleDown | TriangleLeft | TriangleRight ... member Convert: unit -> objnull override ToString: unit -> string static member convert: (MarkerSymbol -> objnull) static member toInteger: (MarkerSymbol -> int)
union case StyleParam.MarkerSymbol.Cross: StyleParam.MarkerSymbol
val circle2DOpen: GenericChart
union case StyleParam.MarkerSymbol.Modified: StyleParam.MarkerSymbol * StyleParam.SymbolStyle -> StyleParam.MarkerSymbol
union case StyleParam.MarkerSymbol.Circle: StyleParam.MarkerSymbol
type SymbolStyle = | Open | Dot | OpenDot member Convert: unit -> objnull override ToString: unit -> string static member convert: (SymbolStyle -> objnull) static member toModifier: (SymbolStyle -> int) static member toString: (SymbolStyle -> string)
union case StyleParam.SymbolStyle.Open: StyleParam.SymbolStyle
val cross3D: GenericChart
static member Chart.Point3D: xyz: (#System.IConvertible * #System.IConvertible * #System.IConvertible) seq * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: float seq * ?Text: 'd * ?MultiText: 'd seq * ?TextPosition: StyleParam.TextPosition * ?MultiTextPosition: StyleParam.TextPosition seq * ?MarkerColor: Color * ?MarkerColorScale: StyleParam.Colorscale * ?MarkerOutline: Line * ?MarkerSymbol: StyleParam.MarkerSymbol3D * ?MultiMarkerSymbol: StyleParam.MarkerSymbol3D seq * ?Marker: Marker * ?CameraProjectionType: StyleParam.CameraProjectionType * ?Camera: LayoutObjects.Camera * ?Projection: Projection * ?UseDefaults: bool -> GenericChart (requires 'd :> System.IConvertible)
static member Chart.Point3D: xEncoded: EncodedTypedArray * yEncoded: EncodedTypedArray * zEncoded: EncodedTypedArray * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: float seq * ?Text: 'a * ?MultiText: 'a seq * ?TextPosition: StyleParam.TextPosition * ?MultiTextPosition: StyleParam.TextPosition seq * ?MarkerColor: Color * ?MarkerColorScale: StyleParam.Colorscale * ?MarkerOutline: Line * ?MarkerSymbol: StyleParam.MarkerSymbol3D * ?MultiMarkerSymbol: StyleParam.MarkerSymbol3D seq * ?Marker: Marker * ?CameraProjectionType: StyleParam.CameraProjectionType * ?Camera: LayoutObjects.Camera * ?Projection: Projection * ?UseDefaults: bool -> GenericChart (requires 'a :> System.IConvertible)
static member Chart.Point3D: x: #System.IConvertible seq * y: #System.IConvertible seq * z: #System.IConvertible seq * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: float seq * ?Text: 'd * ?MultiText: 'd seq * ?TextPosition: StyleParam.TextPosition * ?MultiTextPosition: StyleParam.TextPosition seq * ?MarkerColor: Color * ?MarkerColorScale: StyleParam.Colorscale * ?MarkerOutline: Line * ?MarkerSymbol: StyleParam.MarkerSymbol3D * ?MultiMarkerSymbol: StyleParam.MarkerSymbol3D seq * ?Marker: Marker * ?CameraProjectionType: StyleParam.CameraProjectionType * ?Camera: LayoutObjects.Camera * ?Projection: Projection * ?UseDefaults: bool -> GenericChart (requires 'd :> System.IConvertible)
type MarkerSymbol3D = | Circle | CircleOpen | Cross | Diamond | DiamondOpen | Square | SquareOpen | X member Convert: unit -> objnull override ToString: unit -> string static member convert: (MarkerSymbol3D -> objnull) static member toString: (MarkerSymbol3D -> string)
union case StyleParam.MarkerSymbol3D.Cross: StyleParam.MarkerSymbol3D

Type something to start searching.