Working with colors

BinderScriptNotebook

Table of contents

The Color type

There are many ways how plotly.js handles colors. In general, individual colors can be set the same way as in general html/css - so for example string representations of (a)rgb, hsl, or keywords such as "red" Additionally to that, there are several ways of controlling color attributes of plotly objects:

  • Setting a single color which will be used for all elements in a collection, for example all markers: "rgb(r,g,b)" or "red"
  • Setting an array of colors to assign single colors for each individual item in a collection, for example each individual marker: ["red","blue"]
  • Mapping values to a color scale, for example coloring markers by intensity of the datum: [6.9, 4.2]
  • These can also be mixed in collections.

To do this justice in Plotly.NET in a type-safe way, we provide the dedicated Color type that has methods to create all of these variants.

The Color type provides methods to initialize all of the above mentioned ways to control color attributes of plotly charts. Color Keywords and ARGB are also wrapped in a typesafe way:

open Plotly.NET

// single colors
let singleColor1 = Color.fromKeyword Red // using html color keywords
let singleColor2 = Color.fromARGB 255 42 13 1 // using type-safe argb
let singleColor3 = Color.fromHex "#FFFFFF" // parsing hex strings
let singleColor4 = Color.fromString "red" // you can also set any string value if you really need to

The Color type is basically a container for boxed values that gets converted to correct plotly attributes internally:

singleColor1.Value
{ A = 255uy
  R = 255uy
  G = 0uy
  B = 0uy }
open Newtonsoft.Json
singleColor3 |> JsonConvert.SerializeObject
""rgba(255, 255, 255, 1.0)""

Setting single colors

Here is an example on how to set a single color for a plotly color attribute:

let colorChart1 =
    Chart.Bubble(
        [1,2,15; 3,4,15; 5,6,15],
        MarkerColor = Color.fromKeyword Red // will make ALL markers red.
    )

The Color type is basically a container for boxed values that gets converted to correct plotly attributes internally:

singleColor1.Value
{ A = 255uy
  R = 255uy
  G = 0uy
  B = 0uy }
open Newtonsoft.Json
singleColor3 |> JsonConvert.SerializeObject
""rgba(255, 255, 255, 1.0)""

Setting individual colors

Color.fromColors takes a collection of colors and wraps them as a new Color object. Here is an example on how to set individual colors in a collection for a plotly color attribute.

let colorChart2 =
    Chart.Bubble(
        [1,2,15; 3,4,15; 5,6,15],
        MarkerColor = Color.fromColors [
            Color.fromKeyword Red
            Color.fromKeyword Green
            Color.fromKeyword Blue
        ]
    )

Mapping values to a color scale

Color.fromColorScaleValues takes a collection of values that will be mapped onto a color scale (normalized between min and max value) Here is an example on how to set up color scale mapping:

let x = [1; 2; 3]
let y = [2; 3; 4] // we want to color the markers depending on their y value.
let sizes = [15; 15; 15]

let colorChart3 =
    Chart.Bubble(
        x,y,sizes,
        MarkerColor = Color.fromColorScaleValues y
    )
    |> Chart.withMarkerStyle(ShowScale = true) // we want to see the color scale we are mapping to
namespace Plotly
namespace Plotly.NET
val singleColor1: Color
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
val singleColor2: Color
static member Color.fromARGB: a: int -> r: int -> g: int -> b: int -> Color
val singleColor3: Color
static member Color.fromHex: s: string -> Color
val singleColor4: Color
static member Color.fromString: c: string -> Color
property Color.Value: obj with get
<summary> extractor </summary>
namespace Newtonsoft
namespace Newtonsoft.Json
type JsonConvert = static member DeserializeAnonymousType<'T> : value: string * anonymousTypeObject: 'T -> 'T + 1 overload static member DeserializeObject: value: string -> obj + 7 overloads static member DeserializeXNode: value: string -> XDocument + 3 overloads static member DeserializeXmlNode: value: string -> XmlDocument + 3 overloads static member PopulateObject: value: string * target: obj -> unit + 1 overload static member SerializeObject: value: obj -> string + 7 overloads static member SerializeXNode: node: XObject -> string + 2 overloads static member SerializeXmlNode: node: XmlNode -> string + 2 overloads static member ToString: value: DateTime -> string + 24 overloads static val False: string ...
<summary> Provides methods for converting between .NET types and JSON types. </summary>
<example><code lang="cs" source="..\Src\Newtonsoft.Json.Tests\Documentation\SerializationTests.cs" region="SerializeObject" title="Serializing and Deserializing JSON with JsonConvert" /></example>
JsonConvert.SerializeObject(value: obj) : string
JsonConvert.SerializeObject(value: obj, settings: JsonSerializerSettings) : string
JsonConvert.SerializeObject(value: obj, [<System.ParamArray>] converters: JsonConverter[]) : string
JsonConvert.SerializeObject(value: obj, formatting: Formatting) : string
JsonConvert.SerializeObject(value: obj, formatting: Formatting, settings: JsonSerializerSettings) : string
JsonConvert.SerializeObject(value: obj, ``type`` : System.Type, settings: JsonSerializerSettings) : string
JsonConvert.SerializeObject(value: obj, formatting: Formatting, [<System.ParamArray>] converters: JsonConverter[]) : string
JsonConvert.SerializeObject(value: obj, ``type`` : System.Type, formatting: Formatting, settings: JsonSerializerSettings) : string
val colorChart1: GenericChart.GenericChart
type Chart = static member AnnotatedHeatmap: zData: seq<#seq<'a1>> * annotationText: seq<#seq<string>> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?X: seq<#IConvertible> * ?XGap: int * ?Y: seq<#IConvertible> * ?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 '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 * ?StackGroup: string * ?Orientation: Orientation * ?GroupNorm: GroupNorm * ?FillColor: Color * ?UseWebGL: bool * ?UseDefaults: bool -> GenericChart (requires 'a2 :> IConvertible) + 1 overload static member Bar: values: seq<#IConvertible> * ?Keys: seq<#IConvertible> * ?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 'a2 :> IConvertible and 'a4 :> IConvertible) + 1 overload static member BoxPlot: ?X: seq<#IConvertible> * ?Y: seq<#IConvertible> * ?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 '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: 'c * ?MultiText: seq<'c> * ?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 * ?StackGroup: string * ?Orientation: Orientation * ?GroupNorm: GroupNorm * ?UseWebGL: bool * ?UseDefaults: bool -> GenericChart (requires 'c :> IConvertible) + 1 overload static member Candlestick: ``open`` : seq<#IConvertible> * high: seq<#IConvertible> * low: seq<#IConvertible> * close: seq<#IConvertible> * x: seq<#IConvertible> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?Text: 'a5 * ?MultiText: seq<'a5> * ?Line: Line * ?IncreasingColor: Color * ?Increasing: FinanceMarker * ?DecreasingColor: Color * ?Decreasing: FinanceMarker * ?WhiskerWidth: float * ?UseDefaults: bool -> GenericChart (requires 'a5 :> IConvertible) + 1 overload static member Column: values: seq<#IConvertible> * ?Keys: seq<#IConvertible> * ?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 'a2 :> IConvertible and 'a4 :> IConvertible) + 1 overload static member Contour: zData: seq<#seq<'a1>> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?X: seq<#IConvertible> * ?Y: seq<#IConvertible> * ?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 '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>> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?X: seq<#IConvertible> * ?XGap: int * ?Y: seq<#IConvertible> * ?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 'a4 :> IConvertible) + 1 overload ...
static member Chart.Bubble: xysizes: seq<#System.IConvertible * #System.IConvertible * int> * ?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: TraceObjects.Marker * ?LineColor: Color * ?LineColorScale: StyleParam.Colorscale * ?LineWidth: float * ?LineDash: StyleParam.DrawingStyle * ?Line: Line * ?StackGroup: string * ?Orientation: StyleParam.Orientation * ?GroupNorm: StyleParam.GroupNorm * ?UseWebGL: bool * ?UseDefaults: bool -> GenericChart.GenericChart (requires 'c :> System.IConvertible)
static member Chart.Bubble: x: seq<#System.IConvertible> * y: seq<#System.IConvertible> * sizes: seq<int> * ?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: TraceObjects.Marker * ?LineColor: Color * ?LineColorScale: StyleParam.Colorscale * ?LineWidth: float * ?LineDash: StyleParam.DrawingStyle * ?Line: Line * ?StackGroup: string * ?Orientation: StyleParam.Orientation * ?GroupNorm: StyleParam.GroupNorm * ?UseWebGL: bool * ?UseDefaults: bool -> GenericChart.GenericChart (requires 'c :> System.IConvertible)
module GenericChart from Plotly.NET
<summary> Module to represent a GenericChart </summary>
val toChartHTML: gChart: GenericChart.GenericChart -> string
<summary> Converts a GenericChart to it HTML representation. The div layer has a default size of 600 if not specified otherwise. </summary>
val colorChart2: GenericChart.GenericChart
static member Color.fromColors: c: seq<Color> -> Color
union case ColorKeyword.Green: ColorKeyword
union case ColorKeyword.Blue: ColorKeyword
val x: int list
val y: int list
val sizes: int list
val colorChart3: GenericChart.GenericChart
static member Color.fromColorScaleValues: c: seq<#System.IConvertible> -> Color
static member Chart.withMarkerStyle: ?AutoColorScale: bool * ?CAuto: bool * ?CMax: float * ?CMid: float * ?CMin: float * ?Color: Color * ?Colors: seq<Color> * ?ColorAxis: StyleParam.SubPlotId * ?ColorBar: ColorBar * ?Colorscale: StyleParam.Colorscale * ?Gradient: TraceObjects.Gradient * ?Outline: Line * ?MaxDisplayed: int * ?Opacity: float * ?MultiOpacity: seq<float> * ?Pattern: TraceObjects.Pattern * ?ReverseScale: bool * ?ShowScale: bool * ?Size: int * ?MultiSize: seq<int> * ?SizeMin: int * ?SizeMode: StyleParam.MarkerSizeMode * ?SizeRef: int * ?Symbol: StyleParam.MarkerSymbol * ?MultiSymbol: seq<StyleParam.MarkerSymbol> * ?Symbol3D: StyleParam.MarkerSymbol3D * ?MultiSymbol3D: seq<StyleParam.MarkerSymbol3D> * ?OutlierColor: Color * ?OutlierWidth: int -> (GenericChart.GenericChart -> GenericChart.GenericChart)