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
*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
+
Similarily to how multiple axes are handled, multiple legends are added by providing an additional `Id` argument when using the `Chart.withLegend` function:
145
+
146
+
To select which legend a trace should belong to, use `Chart.withLegendAnchor` with the corresponding `id` argument.
0 commit comments