BinderNotebook

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 and 3D Markers are different types
  • 2D Markers can be modified using modification syntax
  • 3D Markers cannot be modified

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: DisplayOptions
Multiple items
type DisplayOptions = inherit DynamicObj new: unit -> DisplayOptions static member addAdditionalHeadTags: additionalHeadTags: XmlNode list -> (DisplayOptions -> DisplayOptions) static member addDescription: description: XmlNode list -> (DisplayOptions -> DisplayOptions) static member combine: first: DisplayOptions -> second: DisplayOptions -> DisplayOptions static member getAdditionalHeadTags: displayOpts: DisplayOptions -> XmlNode list static member getDescription: displayOpts: DisplayOptions -> XmlNode list static member getPlotlyReference: displayOpts: DisplayOptions -> PlotlyJSReference static member init: ?AdditionalHeadTags: XmlNode list * ?Description: XmlNode list * ?PlotlyJSReference: PlotlyJSReference -> DisplayOptions static member initCDNOnly: unit -> DisplayOptions ...

--------------------
new: unit -> DisplayOptions
static member DisplayOptions.init: ?AdditionalHeadTags: Giraffe.ViewEngine.HtmlElements.XmlNode list * ?Description: Giraffe.ViewEngine.HtmlElements.XmlNode list * ?PlotlyJSReference: PlotlyJSReference -> 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 PlotlyJSReference.NoReference: PlotlyJSReference
namespace Plotly.NET.TraceObjects
val byConstructor: GenericChart.GenericChart
type Chart = static member AnnotatedHeatmap: zData: seq<#seq<'a1>> * annotationText: seq<#seq<string>> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?X: seq<'a3> * ?MultiX: seq<seq<'a3>> * ?XGap: int * ?Y: seq<'a4> * ?MultiY: seq<seq<'a4>> * ?YGap: int * ?Text: 'a5 * ?MultiText: seq<'a5> * ?ColorBar: ColorBar * ?ColorScale: Colorscale * ?ShowScale: bool * ?ReverseScale: bool * ?ZSmooth: SmoothAlg * ?Transpose: bool * ?UseWebGL: bool * ?ReverseYAxis: bool * ?UseDefaults: bool -> GenericChart (requires 'a1 :> IConvertible and 'a3 :> IConvertible and 'a4 :> IConvertible and 'a5 :> IConvertible) + 1 overload static member Area: x: seq<#IConvertible> * y: seq<#IConvertible> * ?ShowMarkers: bool * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: seq<float> * ?Text: 'a2 * ?MultiText: seq<'a2> * ?TextPosition: TextPosition * ?MultiTextPosition: seq<TextPosition> * ?MarkerColor: Color * ?MarkerColorScale: Colorscale * ?MarkerOutline: Line * ?MarkerSymbol: MarkerSymbol * ?MultiMarkerSymbol: seq<MarkerSymbol> * ?Marker: Marker * ?LineColor: Color * ?LineColorScale: Colorscale * ?LineWidth: float * ?LineDash: DrawingStyle * ?Line: Line * ?AlignmentGroup: string * ?OffsetGroup: string * ?StackGroup: string * ?Orientation: Orientation * ?GroupNorm: GroupNorm * ?FillColor: Color * ?FillPatternShape: PatternShape * ?FillPattern: Pattern * ?UseWebGL: bool * ?UseDefaults: bool -> GenericChart (requires 'a2 :> IConvertible) + 1 overload static member Bar: values: seq<#IConvertible> * ?Keys: seq<'a1> * ?MultiKeys: seq<seq<'a1>> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: seq<float> * ?Text: 'a2 * ?MultiText: seq<'a2> * ?MarkerColor: Color * ?MarkerColorScale: Colorscale * ?MarkerOutline: Line * ?MarkerPatternShape: PatternShape * ?MultiMarkerPatternShape: seq<PatternShape> * ?MarkerPattern: Pattern * ?Marker: Marker * ?Base: #IConvertible * ?Width: 'a4 * ?MultiWidth: seq<'a4> * ?TextPosition: TextPosition * ?MultiTextPosition: seq<TextPosition> * ?UseDefaults: bool -> GenericChart (requires 'a1 :> IConvertible and 'a2 :> IConvertible and 'a4 :> IConvertible) + 1 overload static member BoxPlot: ?X: seq<'a0> * ?MultiX: seq<seq<'a0>> * ?Y: seq<'a1> * ?MultiY: seq<seq<'a1>> * ?Name: string * ?ShowLegend: bool * ?Text: 'a2 * ?MultiText: seq<'a2> * ?FillColor: Color * ?MarkerColor: Color * ?Marker: Marker * ?Opacity: float * ?WhiskerWidth: float * ?BoxPoints: BoxPoints * ?BoxMean: BoxMean * ?Jitter: float * ?PointPos: float * ?Orientation: Orientation * ?OutlineColor: Color * ?OutlineWidth: float * ?Outline: Line * ?AlignmentGroup: string * ?OffsetGroup: string * ?Notched: bool * ?NotchWidth: float * ?QuartileMethod: QuartileMethod * ?UseDefaults: bool -> GenericChart (requires 'a0 :> IConvertible and 'a1 :> IConvertible and 'a2 :> IConvertible) + 2 overloads static member Bubble: x: seq<#IConvertible> * y: seq<#IConvertible> * sizes: seq<int> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: seq<float> * ?Text: 'a2 * ?MultiText: seq<'a2> * ?TextPosition: TextPosition * ?MultiTextPosition: seq<TextPosition> * ?MarkerColor: Color * ?MarkerColorScale: Colorscale * ?MarkerOutline: Line * ?MarkerSymbol: MarkerSymbol * ?MultiMarkerSymbol: seq<MarkerSymbol> * ?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 'a2 :> IConvertible) + 1 overload static member Candlestick: ``open`` : seq<#IConvertible> * high: seq<#IConvertible> * low: seq<#IConvertible> * close: seq<#IConvertible> * ?X: seq<'a4> * ?MultiX: seq<seq<'a4>> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?Text: 'a5 * ?MultiText: seq<'a5> * ?Line: Line * ?IncreasingColor: Color * ?Increasing: FinanceMarker * ?DecreasingColor: Color * ?Decreasing: FinanceMarker * ?WhiskerWidth: float * ?ShowXAxisRangeSlider: bool * ?UseDefaults: bool -> GenericChart (requires 'a4 :> IConvertible and 'a5 :> IConvertible) + 2 overloads static member Column: values: seq<#IConvertible> * ?Keys: seq<'a1> * ?MultiKeys: seq<seq<'a1>> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: seq<float> * ?Text: 'a2 * ?MultiText: seq<'a2> * ?MarkerColor: Color * ?MarkerColorScale: Colorscale * ?MarkerOutline: Line * ?MarkerPatternShape: PatternShape * ?MultiMarkerPatternShape: seq<PatternShape> * ?MarkerPattern: Pattern * ?Marker: Marker * ?Base: #IConvertible * ?Width: 'a4 * ?MultiWidth: seq<'a4> * ?TextPosition: TextPosition * ?MultiTextPosition: seq<TextPosition> * ?UseDefaults: bool -> GenericChart (requires 'a1 :> IConvertible and 'a2 :> IConvertible and 'a4 :> IConvertible) + 1 overload static member Contour: zData: seq<#seq<'a1>> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?X: seq<'a2> * ?MultiX: seq<seq<'a2>> * ?Y: seq<'a3> * ?MultiY: seq<seq<'a3>> * ?Text: 'a4 * ?MultiText: seq<'a4> * ?ColorBar: ColorBar * ?ColorScale: Colorscale * ?ShowScale: bool * ?ReverseScale: bool * ?Transpose: bool * ?ContourLineColor: Color * ?ContourLineDash: DrawingStyle * ?ContourLineSmoothing: float * ?ContourLine: Line * ?ContoursColoring: ContourColoring * ?ContoursOperation: ConstraintOperation * ?ContoursType: ContourType * ?ShowContourLabels: bool * ?ContourLabelFont: Font * ?Contours: Contours * ?FillColor: Color * ?NContours: int * ?UseDefaults: bool -> GenericChart (requires 'a1 :> IConvertible and 'a2 :> IConvertible and 'a3 :> IConvertible and 'a4 :> IConvertible) static member Funnel: x: seq<#IConvertible> * y: seq<#IConvertible> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?Width: float * ?Offset: float * ?Text: 'a2 * ?MultiText: seq<'a2> * ?TextPosition: TextPosition * ?MultiTextPosition: seq<TextPosition> * ?Orientation: Orientation * ?AlignmentGroup: string * ?OffsetGroup: string * ?MarkerColor: Color * ?MarkerOutline: Line * ?Marker: Marker * ?TextInfo: TextInfo * ?ConnectorLineColor: Color * ?ConnectorLineStyle: DrawingStyle * ?ConnectorFillColor: Color * ?ConnectorLine: Line * ?Connector: FunnelConnector * ?InsideTextFont: Font * ?OutsideTextFont: Font * ?UseDefaults: bool -> GenericChart (requires 'a2 :> IConvertible) static member Heatmap: zData: seq<#seq<'a1>> * ?X: seq<'a2> * ?MultiX: seq<seq<'a2>> * ?Y: seq<'a3> * ?MultiY: seq<seq<'a3>> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?XGap: int * ?YGap: int * ?Text: 'a4 * ?MultiText: seq<'a4> * ?ColorBar: ColorBar * ?ColorScale: Colorscale * ?ShowScale: bool * ?ReverseScale: bool * ?ZSmooth: SmoothAlg * ?Transpose: bool * ?UseWebGL: bool * ?ReverseYAxis: bool * ?UseDefaults: bool -> GenericChart (requires 'a1 :> IConvertible and 'a2 :> IConvertible and 'a3 :> IConvertible and 'a4 :> IConvertible) + 1 overload ...
static member Chart.Point: xy: seq<#System.IConvertible * #System.IConvertible> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: seq<float> * ?Text: 'c * ?MultiText: seq<'c> * ?TextPosition: StyleParam.TextPosition * ?MultiTextPosition: seq<StyleParam.TextPosition> * ?MarkerColor: Color * ?MarkerColorScale: StyleParam.Colorscale * ?MarkerOutline: Line * ?MarkerSymbol: StyleParam.MarkerSymbol * ?MultiMarkerSymbol: seq<StyleParam.MarkerSymbol> * ?Marker: Marker * ?AlignmentGroup: string * ?OffsetGroup: string * ?StackGroup: string * ?Orientation: StyleParam.Orientation * ?GroupNorm: StyleParam.GroupNorm * ?UseWebGL: bool * ?UseDefaults: bool -> GenericChart.GenericChart (requires 'c :> System.IConvertible)
static member Chart.Point: x: seq<#System.IConvertible> * y: seq<#System.IConvertible> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: seq<float> * ?Text: 'a2 * ?MultiText: seq<'a2> * ?TextPosition: StyleParam.TextPosition * ?MultiTextPosition: seq<StyleParam.TextPosition> * ?MarkerColor: Color * ?MarkerColorScale: StyleParam.Colorscale * ?MarkerOutline: Line * ?MarkerSymbol: StyleParam.MarkerSymbol * ?MultiMarkerSymbol: seq<StyleParam.MarkerSymbol> * ?Marker: Marker * ?AlignmentGroup: string * ?OffsetGroup: string * ?StackGroup: string * ?Orientation: StyleParam.Orientation * ?GroupNorm: StyleParam.GroupNorm * ?UseWebGL: bool * ?UseDefaults: bool -> GenericChart.GenericChart (requires 'a2 :> 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: seq<Color> * ?ColorAxis: SubPlotId * ?ColorBar: ColorBar * ?Colorscale: Colorscale * ?CornerRadius: int * ?Gradient: Gradient * ?Outline: Line * ?MaxDisplayed: int * ?Opacity: float * ?MultiOpacity: seq<float> * ?Pattern: Pattern * ?ReverseScale: bool * ?ShowScale: bool * ?Size: int * ?MultiSize: seq<int> * ?SizeMin: int * ?SizeMode: MarkerSizeMode * ?SizeRef: int * ?StandOff: float * ?MultiStandOff: seq<float> * ?Symbol: MarkerSymbol * ?MultiSymbol: seq<MarkerSymbol> * ?Symbol3D: MarkerSymbol3D * ?MultiSymbol3D: seq<MarkerSymbol3D> * ?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: seq<Color> * ?ColorAxis: SubPlotId * ?ColorBar: ColorBar * ?Colorscale: Colorscale * ?CornerRadius: int * ?Gradient: Gradient * ?Outline: Line * ?MaxDisplayed: int * ?Opacity: float * ?MultiOpacity: seq<float> * ?Pattern: Pattern * ?ReverseScale: bool * ?ShowScale: bool * ?Size: int * ?MultiSize: seq<int> * ?SizeMin: int * ?SizeMode: MarkerSizeMode * ?SizeRef: int * ?StandOff: float * ?MultiStandOff: seq<float> * ?Symbol: MarkerSymbol * ?MultiSymbol: seq<MarkerSymbol> * ?Symbol3D: MarkerSymbol3D * ?MultiSymbol3D: seq<MarkerSymbol3D> * ?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: seq<Color> * ?ColorAxis: StyleParam.SubPlotId * ?ColorBar: ColorBar * ?Colorscale: StyleParam.Colorscale * ?CornerRadius: int * ?Gradient: Gradient * ?Outline: Line * ?MaxDisplayed: int * ?Opacity: float * ?MultiOpacity: seq<float> * ?Pattern: Pattern * ?ReverseScale: bool * ?ShowScale: bool * ?Size: int * ?MultiSize: seq<int> * ?SizeMin: int * ?SizeMode: StyleParam.MarkerSizeMode * ?SizeRef: int * ?StandOff: float * ?MultiStandOff: seq<float> * ?Symbol: StyleParam.MarkerSymbol * ?MultiSymbol: seq<StyleParam.MarkerSymbol> * ?Symbol3D: StyleParam.MarkerSymbol3D * ?MultiSymbol3D: seq<StyleParam.MarkerSymbol3D> * ?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: seq<#IConvertible> -> Color static member fromColors: c: seq<Color> -> 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
module GenericChart from Plotly.NET
<summary> Module to represent a GenericChart </summary>
val toChartHTML: gChart: GenericChart.GenericChart -> string
val byStyle: GenericChart.GenericChart
static member Chart.withMarkerStyle: ?Angle: float * ?AngleRef: StyleParam.AngleRef * ?AutoColorScale: bool * ?CAuto: bool * ?CMax: float * ?CMid: float * ?CMin: float * ?Color: Color * ?Colors: seq<Color> * ?ColorAxis: StyleParam.SubPlotId * ?ColorBar: ColorBar * ?Colorscale: StyleParam.Colorscale * ?CornerRadius: int * ?Gradient: Gradient * ?Outline: Line * ?MaxDisplayed: int * ?Opacity: float * ?MultiOpacity: seq<float> * ?Pattern: Pattern * ?ReverseScale: bool * ?ShowScale: bool * ?Size: int * ?MultiSize: seq<int> * ?SizeMin: int * ?SizeMode: StyleParam.MarkerSizeMode * ?SizeRef: int * ?StandOff: float * ?MultiStandOff: seq<float> * ?Symbol: StyleParam.MarkerSymbol * ?MultiSymbol: seq<StyleParam.MarkerSymbol> * ?Symbol3D: StyleParam.MarkerSymbol3D * ?MultiSymbol3D: seq<StyleParam.MarkerSymbol3D> * ?OutlierColor: Color * ?OutlierWidth: int -> (GenericChart.GenericChart -> GenericChart.GenericChart)
union case ColorKeyword.Blue: ColorKeyword
val cross2D: GenericChart.GenericChart
module StyleParam from Plotly.NET
type MarkerSymbol = | Modified of MarkerSymbol * SymbolStyle | Circle | Square | Diamond | Cross | X | TriangleUp | TriangleDown | TriangleLeft | TriangleRight ... member Convert: unit -> obj override ToString: unit -> string static member convert: (MarkerSymbol -> obj) static member toInteger: (MarkerSymbol -> int)
union case StyleParam.MarkerSymbol.Cross: StyleParam.MarkerSymbol
val circle2DOpen: GenericChart.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 -> obj override ToString: unit -> string static member convert: (SymbolStyle -> obj) static member toModifier: (SymbolStyle -> int) static member toString: (SymbolStyle -> string)
union case StyleParam.SymbolStyle.Open: StyleParam.SymbolStyle
val cross3D: GenericChart.GenericChart
static member Chart.Point3D: xyz: seq<#System.IConvertible * #System.IConvertible * #System.IConvertible> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: seq<float> * ?Text: 'd * ?MultiText: seq<'d> * ?TextPosition: StyleParam.TextPosition * ?MultiTextPosition: seq<StyleParam.TextPosition> * ?MarkerColor: Color * ?MarkerColorScale: StyleParam.Colorscale * ?MarkerOutline: Line * ?MarkerSymbol: StyleParam.MarkerSymbol3D * ?MultiMarkerSymbol: seq<StyleParam.MarkerSymbol3D> * ?Marker: Marker * ?CameraProjectionType: StyleParam.CameraProjectionType * ?Camera: LayoutObjects.Camera * ?Projection: Projection * ?UseDefaults: bool -> GenericChart.GenericChart (requires 'd :> System.IConvertible)
static member Chart.Point3D: x: seq<#System.IConvertible> * y: seq<#System.IConvertible> * z: seq<#System.IConvertible> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: seq<float> * ?Text: 'a3 * ?MultiText: seq<'a3> * ?TextPosition: StyleParam.TextPosition * ?MultiTextPosition: seq<StyleParam.TextPosition> * ?MarkerColor: Color * ?MarkerColorScale: StyleParam.Colorscale * ?MarkerOutline: Line * ?MarkerSymbol: StyleParam.MarkerSymbol3D * ?MultiMarkerSymbol: seq<StyleParam.MarkerSymbol3D> * ?Marker: Marker * ?CameraProjectionType: StyleParam.CameraProjectionType * ?Camera: LayoutObjects.Camera * ?Projection: Projection * ?UseDefaults: bool -> GenericChart.GenericChart (requires 'a3 :> System.IConvertible)
type MarkerSymbol3D = | Circle | CircleOpen | Cross | Diamond | DiamondOpen | Square | SquareOpen | X member Convert: unit -> obj override ToString: unit -> string static member convert: (MarkerSymbol3D -> obj) static member toString: (MarkerSymbol3D -> string)
union case StyleParam.MarkerSymbol3D.Cross: StyleParam.MarkerSymbol3D