You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<metaname="description" content="Plotly.NET documentation for: {{fsdocs-page-title}}. Plotly.NET is an Interactive charting library for .NET programming languages.">
<metaproperty="og:description" content="Plotly.NET documentation for: {{fsdocs-page-title}}. Plotly.NET is an Interactive charting library for .NET programming languages.">
<metaname="twitter:description" content="Plotly.NET documentation for: {{fsdocs-page-title}}. Plotly.NET is an Interactive charting library for .NET programming languages.">
*Summary:* This example shows how to create Legends and add them to the Charts in F#.
34
+
35
+
Let's first create some data for the purpose of creating example charts:
36
+
37
+
*)
38
+
39
+
openPlotly.NET
40
+
41
+
letx=[1.;2.;3.;4.;5.;6.;7.;8.;9.;10.]
42
+
lety=[2.;1.5;5.;1.5;3.;2.5;2.5;1.5;3.5;1.]
43
+
44
+
// note that legends are not shown on charts with only one trace,
45
+
// which is why we need to set the trace to visible manually on this chart
46
+
letsimple_chart= Chart.Point(x, y, ShowLegend =true, Name ="test_chart")
47
+
48
+
(**
49
+
## Creating a legend
50
+
51
+
Legends are `LayoutObjects` that can be added to a chart's `Layout`. The `LayoutLegend.init` function is used to create a legend object, which can then be added to a chart using the `Chart.withLegend` function:
52
+
*)
53
+
openPlotly.NET.LayoutObjects
54
+
55
+
letmy_legend=
56
+
Legend.init (
57
+
Title = Title.init("my first legend!"),
58
+
BorderColor = Color.fromString "black",
59
+
BorderWidth =1
60
+
)
61
+
62
+
letfirst_legend_chart=
63
+
simple_chart
64
+
|> Chart.withLegend my_legend
65
+
66
+
(*** condition: ipynb ***)
67
+
#if IPYNB
68
+
first_legend_chart
69
+
#endif// IPYNB
70
+
71
+
(***hide***)
72
+
first_legend_chart |> GenericChart.toChartHTML
73
+
(***include-it-raw***)
74
+
75
+
(**
76
+
## Styling existing legends
77
+
78
+
The `Chart.withLegendStyle` function can be used to update the style of an existing legend.
79
+
The following code will move the existing legend to the center bottom of the chart:
80
+
*)
81
+
82
+
letstyled_legend_chart=
83
+
first_legend_chart
84
+
|> Chart.withLegendStyle(
85
+
Orientation = StyleParam.Orientation.Horizontal,
86
+
X =0.5,
87
+
XAnchor = StyleParam.XAnchorPosition.Center
88
+
)
89
+
90
+
(*** condition: ipynb ***)
91
+
#if IPYNB
92
+
styled_legend_chart
93
+
#endif// IPYNB
94
+
95
+
(***hide***)
96
+
styled_legend_chart |> GenericChart.toChartHTML
97
+
(***include-it-raw***)
98
+
99
+
(**
100
+
## Grouping legend items
101
+
102
+
You can group multiple traces as a single legend item by setting the `LegendGroup` property of the individual traces to the same value:
103
+
*)
104
+
105
+
letgrouped_legend_chart=
106
+
[
107
+
Chart.Point(x, y)
108
+
|> GenericChart.mapTrace (
109
+
Trace2DStyle.Scatter(
110
+
LegendGroup ="Group A",
111
+
LegendGroupTitle =(Title.init (Text ="Group A"))
112
+
)
113
+
)
114
+
Chart.Point(y, x)
115
+
|> GenericChart.mapTrace (
116
+
Trace2DStyle.Scatter(
117
+
LegendGroup ="Group A"
118
+
)
119
+
)
120
+
Chart.Point(y, y)
121
+
|> GenericChart.mapTrace (
122
+
Trace2DStyle.Scatter(
123
+
LegendGroup ="Group B",
124
+
LegendGroupTitle =(Title.init (Text ="Group B"))
125
+
)
126
+
)
127
+
]
128
+
|> Chart.combine
129
+
130
+
(*** condition: ipynb ***)
131
+
#if IPYNB
132
+
grouped_legend_chart
133
+
#endif// IPYNB
134
+
135
+
(***hide***)
136
+
grouped_legend_chart |> GenericChart.toChartHTML
137
+
(***include-it-raw***)
138
+
139
+
(**
140
+
## Multiple legends
141
+
142
+
Starting with Plotly.NET 5.0.0, the multiple legends feature from plotl.js v2.22+ is supported.
143
+
144
+
However, plotly.js has a [regression bug starting from 2.24.3](https://github.com/plotly/plotly.js/issues/7023), which causes multiple legends to not display correctly
145
+
146
+
This means that the referenced plotly.js version has to be changed to <2.24.3 to use this feature. Note that features introduced in plotly.js/.NET after this version will not work on a chart using that reference.
147
+
Future versions of plotly.js will hopefully fix this issue.
148
+
149
+
Similarily to how multiple axes are handled, multiple legends are added by providing an additional `Id` argument when using the `Chart.withLegend` function:
150
+
151
+
To select which legend a trace should belong to, use `Chart.withLegendAnchor` with the corresponding `id` argument.
152
+
*)
153
+
154
+
155
+
letmulti_legend_chart=
156
+
[
157
+
Chart.Point(x, y)
158
+
|> Chart.withLegendAnchor 1
159
+
Chart.Point(y, x)
160
+
|> Chart.withLegendAnchor 2
161
+
]
162
+
|> Chart.combine
163
+
|> Chart.withLegend(
164
+
Legend.init(
165
+
BorderColor = Color.fromKeyword Blue,
166
+
BorderWidth =2,
167
+
Title = Title.init(
168
+
Text ="Legend 1"
169
+
)
170
+
)
171
+
)
172
+
|> Chart.withLegend(
173
+
Legend.init(
174
+
X =0.75,
175
+
Y =0.75,
176
+
BorderColor = Color.fromKeyword Red,
177
+
BorderWidth =2,
178
+
Title = Title.init(
179
+
Text ="Legend 2"
180
+
)
181
+
),
182
+
Id =2
183
+
)
184
+
// set lower plotly.js version to avoid regression bug
0 commit comments