Plotly.NET
Static image export
Table of contents
As Plotly.NET generates static html pages that contain charts rendered by plotly.js, static image export needs a lot more overhead under the hood than you might expect. The underlying renderer needs to execute javascript, leading to the usage of headless browsers.
The package Plotly.NET.ImageExport contains extensions for Plotly.NET to render static images. It is designed with extensibility in mind and
it is very easy to add a new rendering engine. The current engines are provided:
Rendering engine |
Type |
Prerequisites |
|---|---|---|
headless browser |
Saving static images
By referencing the Plotly.NET.ImageExport package, you get access to:
- jpg via
Chart.SaveJPG - png via
Chart.SavePNG - svg via
Chart.SaveSVG
(and Extensions for C# style fluent interfaces by opening the GenericChartExtensions namespace)
The parameters for all three functions are exactly the same.
open Plotly.NET
open Plotly.NET.ImageExport
let exampleChart =
Chart.Histogram2DContour([ 1.; 2.; 2.; 4.; 5. ], [ 1.; 2.; 2.; 4.; 5. ])
exampleChart
|> Chart.saveJPG ("/your/path/without/extension/here", Width = 300, Height = 300)
Generating URIs for static chart images
By referencing the Plotly.NET.ImageExport package, you get access to:
- jpg via
Chart.toBase64JPGString - png via
Chart.toBase64PNGString - svg via
Chart.toSVGString
(and Extensions for C# style fluent interfaces by opening the GenericChartExtensions namespace)
let base64JPG = exampleChart |> Chart.toBase64JPGString (Width = 300, Height = 300)
It is very easy to construct a html tag that includes this image via a base64 uri. For SVGs, not even that is necessary and just the SVG string can be used.
$"""<img
src= "{base64JPG}"
/>"""
namespace Plotly
namespace Plotly.NET
namespace Plotly.NET.ImageExport
val exampleChart: 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.Histogram2DContour: x: #System.IConvertible seq * y: #System.IConvertible seq * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?Z: #seq<'d> seq * ?HistFunc: StyleParam.HistFunc * ?HistNorm: StyleParam.HistNorm * ?NBinsX: int * ?NBinsY: int * ?BinGroup: string * ?XBinGroup: string * ?XBins: TraceObjects.Bins * ?YBinGroup: string * ?YBins: TraceObjects.Bins * ?Marker: TraceObjects.Marker * ?ContourLinesColor: Color * ?ContourLinesDash: StyleParam.DrawingStyle * ?ContourLinesSmoothing: float * ?ContourLinesWidth: float * ?ContourLines: Line * ?ShowContourLines: bool * ?ContoursColoring: StyleParam.ContourColoring * ?ContoursOperation: StyleParam.ConstraintOperation * ?ContoursType: StyleParam.ContourType * ?ShowContoursLabels: bool * ?ContoursLabelFont: Font * ?ContoursStart: float * ?ContoursEnd: float * ?Contours: TraceObjects.Contours * ?ColorBar: ColorBar * ?ColorScale: StyleParam.Colorscale * ?ShowScale: bool * ?ReverseScale: bool * ?NContours: int * ?UseDefaults: bool -> GenericChart (requires 'd :> System.IConvertible)
static member Chart.Histogram2DContour: xEncoded: EncodedTypedArray * yEncoded: EncodedTypedArray * ?zEncoded: EncodedTypedArray * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?HistFunc: StyleParam.HistFunc * ?HistNorm: StyleParam.HistNorm * ?NBinsX: int * ?NBinsY: int * ?BinGroup: string * ?XBinGroup: string * ?XBins: TraceObjects.Bins * ?YBinGroup: string * ?YBins: TraceObjects.Bins * ?Marker: TraceObjects.Marker * ?ContourLinesColor: Color * ?ContourLinesDash: StyleParam.DrawingStyle * ?ContourLinesSmoothing: float * ?ContourLinesWidth: float * ?ContourLines: Line * ?ShowContourLines: bool * ?ContoursColoring: StyleParam.ContourColoring * ?ContoursOperation: StyleParam.ConstraintOperation * ?ContoursType: StyleParam.ContourType * ?ShowContoursLabels: bool * ?ContoursLabelFont: Font * ?ContoursStart: float * ?ContoursEnd: float * ?Contours: TraceObjects.Contours * ?ColorBar: ColorBar * ?ColorScale: StyleParam.Colorscale * ?ShowScale: bool * ?ReverseScale: bool * ?NContours: int * ?UseDefaults: bool -> GenericChart
static member Chart.Histogram2DContour: ?X: 'a seq * ?MultiX: 'a seq seq * ?Y: 'b seq * ?MultiY: 'b seq seq * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?Z: #seq<'d> seq * ?HistFunc: StyleParam.HistFunc * ?HistNorm: StyleParam.HistNorm * ?NBinsX: int * ?NBinsY: int * ?BinGroup: string * ?XBinGroup: string * ?XBins: TraceObjects.Bins * ?YBinGroup: string * ?YBins: TraceObjects.Bins * ?Marker: TraceObjects.Marker * ?ContourLinesColor: Color * ?ContourLinesDash: StyleParam.DrawingStyle * ?ContourLinesSmoothing: float * ?ContourLinesWidth: float * ?ContourLines: Line * ?ShowContourLines: bool * ?ContoursColoring: StyleParam.ContourColoring * ?ContoursOperation: StyleParam.ConstraintOperation * ?ContoursType: StyleParam.ContourType * ?ShowContoursLabels: bool * ?ContoursLabelFont: Font * ?ContoursStart: float * ?ContoursEnd: float * ?Contours: TraceObjects.Contours * ?ColorBar: ColorBar * ?ColorScale: StyleParam.Colorscale * ?ShowScale: bool * ?ReverseScale: bool * ?NContours: int * ?UseDefaults: bool -> GenericChart (requires 'a :> System.IConvertible and 'b :> System.IConvertible and 'd :> System.IConvertible)
static member Chart.Histogram2DContour: xEncoded: EncodedTypedArray * yEncoded: EncodedTypedArray * ?zEncoded: EncodedTypedArray * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?HistFunc: StyleParam.HistFunc * ?HistNorm: StyleParam.HistNorm * ?NBinsX: int * ?NBinsY: int * ?BinGroup: string * ?XBinGroup: string * ?XBins: TraceObjects.Bins * ?YBinGroup: string * ?YBins: TraceObjects.Bins * ?Marker: TraceObjects.Marker * ?ContourLinesColor: Color * ?ContourLinesDash: StyleParam.DrawingStyle * ?ContourLinesSmoothing: float * ?ContourLinesWidth: float * ?ContourLines: Line * ?ShowContourLines: bool * ?ContoursColoring: StyleParam.ContourColoring * ?ContoursOperation: StyleParam.ConstraintOperation * ?ContoursType: StyleParam.ContourType * ?ShowContoursLabels: bool * ?ContoursLabelFont: Font * ?ContoursStart: float * ?ContoursEnd: float * ?Contours: TraceObjects.Contours * ?ColorBar: ColorBar * ?ColorScale: StyleParam.Colorscale * ?ShowScale: bool * ?ReverseScale: bool * ?NContours: int * ?UseDefaults: bool -> GenericChart
static member Chart.Histogram2DContour: ?X: 'a seq * ?MultiX: 'a seq seq * ?Y: 'b seq * ?MultiY: 'b seq seq * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?Z: #seq<'d> seq * ?HistFunc: StyleParam.HistFunc * ?HistNorm: StyleParam.HistNorm * ?NBinsX: int * ?NBinsY: int * ?BinGroup: string * ?XBinGroup: string * ?XBins: TraceObjects.Bins * ?YBinGroup: string * ?YBins: TraceObjects.Bins * ?Marker: TraceObjects.Marker * ?ContourLinesColor: Color * ?ContourLinesDash: StyleParam.DrawingStyle * ?ContourLinesSmoothing: float * ?ContourLinesWidth: float * ?ContourLines: Line * ?ShowContourLines: bool * ?ContoursColoring: StyleParam.ContourColoring * ?ContoursOperation: StyleParam.ConstraintOperation * ?ContoursType: StyleParam.ContourType * ?ShowContoursLabels: bool * ?ContoursLabelFont: Font * ?ContoursStart: float * ?ContoursEnd: float * ?Contours: TraceObjects.Contours * ?ColorBar: ColorBar * ?ColorScale: StyleParam.Colorscale * ?ShowScale: bool * ?ReverseScale: bool * ?NContours: int * ?UseDefaults: bool -> GenericChart (requires 'a :> System.IConvertible and 'b :> System.IConvertible and 'd :> System.IConvertible)
static member Chart.saveJPG: path: string * [<System.Runtime.InteropServices.Optional; System.Runtime.InteropServices.DefaultParameterValue ((null :> obj))>] ?EngineType: ExportEngine * [<System.Runtime.InteropServices.Optional; System.Runtime.InteropServices.DefaultParameterValue ((null :> obj))>] ?Width: int * [<System.Runtime.InteropServices.Optional; System.Runtime.InteropServices.DefaultParameterValue ((null :> obj))>] ?Height: int * [<System.Runtime.InteropServices.Optional; System.Runtime.InteropServices.DefaultParameterValue ((null :> obj))>] ?Scale: float -> (GenericChart -> unit)
val base64JPG: string
static member Chart.toBase64JPGString: [<System.Runtime.InteropServices.Optional; System.Runtime.InteropServices.DefaultParameterValue ((null :> obj))>] ?EngineType: ExportEngine * [<System.Runtime.InteropServices.Optional; System.Runtime.InteropServices.DefaultParameterValue ((null :> obj))>] ?Width: int * [<System.Runtime.InteropServices.Optional; System.Runtime.InteropServices.DefaultParameterValue ((null :> obj))>] ?Height: int * [<System.Runtime.InteropServices.Optional; System.Runtime.InteropServices.DefaultParameterValue ((null :> obj))>] ?Scale: float -> (GenericChart -> string)
