-
Notifications
You must be signed in to change notification settings - Fork 81
/
00_3_chart-config.fsx
149 lines (108 loc) · 3.48 KB
/
00_3_chart-config.fsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
(**
---
title: Chart config
category: General
categoryindex: 1
index: 4
---
*)
(*** hide ***)
(*** condition: prepare ***)
#r "nuget: Newtonsoft.JSON, 12.0.3"
#r "nuget: DynamicObj"
#r "../bin/Plotly.NET/netstandard2.0/Plotly.NET.dll"
(*** condition: ipynb ***)
#if IPYNB
#r "nuget: Plotly.NET, {{fsdocs-package-version}}"
#r "nuget: Plotly.NET.Interactive, {{fsdocs-package-version}}"
#endif // IPYNB
(**
# Chart config
[![Binder]({{root}}img/badge-binder.svg)](https://mybinder.org/v2/gh/plotly/Plotly.NET/gh-pages?filepath={{fsdocs-source-basename}}.ipynb) 
[![Script]({{root}}img/badge-script.svg)]({{root}}{{fsdocs-source-basename}}.fsx) 
[![Notebook]({{root}}img/badge-notebook.svg)]({{root}}{{fsdocs-source-basename}}.ipynb)
`Config` is an object that configures high level properties of the chart like making all chart elements editable or the tool bar on top
## Image button options
Options for chart export can be set in the config at `ToImageButtonOptions`:
- Three file formats for chart exports are supported (SVG, PNG, JPEG) and can be set as `Format`.
- A predefined name for the downloaded chart can be set at `Filename`.
- The dimensions of the downloaded chart are set at `Width` and `Height`.
- The `Scale` defines the size of the exported svg.
The settings do not apply for the html document containing the chart but for charts that are exported by clicking the camera icon in the menu bar.
*)
open Plotly.NET
open Plotly.NET.ConfigObjects
let svgConfig =
Config.init (
ToImageButtonOptions = ToImageButtonOptions.init(
Format = StyleParam.ImageFormat.JPEG,
Filename = "mySvgChart",
Width = 900.,
Height = 600.,
Scale = 10.
)
)
let svgButtonChart =
Chart.Point([(1.,2.)])
|> Chart.withConfig svgConfig
(*** condition: ipynb ***)
#if IPYNB
svgButtonChart
#endif // IPYNB
(***hide***)
svgButtonChart |> GenericChart.toChartHTML
(***include-it-raw***)
(**
## Static plots
To create a static plot that has no hoverable elements, use `StaticPlot=true` on the Config:
*)
let staticConfig = Config.init(StaticPlot=true)
let staticPlot =
Chart.Point([(1.,2.)])
|> Chart.withConfig staticConfig
(*** condition: ipynb ***)
#if IPYNB
staticPlot
#endif // IPYNB
(***hide***)
staticPlot |> GenericChart.toChartHTML
(***include-it-raw***)
(**
## Editable charts
You can define fields that can be edited on the chart by setting `Editable = true` on the config, optionally explicitly setting the editable parts via `EditableAnnotations`
*)
let editableConfig =
Config.init(
Editable = true,
EditableAnnotations = [
StyleParam.AnnotationEditOptions.LegendPosition
StyleParam.AnnotationEditOptions.AxisTitleText
StyleParam.AnnotationEditOptions.LegendText
]
)
let editablePlot =
Chart.Point([(1.,2.)])
|> Chart.withConfig editableConfig
(*** condition: ipynb ***)
#if IPYNB
editablePlot
#endif // IPYNB
(***hide***)
editablePlot |> GenericChart.toChartHTML
(***include-it-raw***)
(**
## Responsive charts
To create a chart that is reponsive to its container size, use `Responsive=true` on the Config:
(try resizing the window)
*)
let responsiveConfig = Config.init(Responsive=true)
let responsivePlot =
Chart.Point([(1.,2.)])
|> Chart.withConfig responsiveConfig
(*** condition: ipynb ***)
#if IPYNB
responsivePlot
#endif // IPYNB
(***hide***)
responsivePlot |> GenericChart.toChartHTML
(***include-it-raw***)