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 alter the display options that control the html document that contains plotly charts
34
+
*Summary:* This example shows how to alter the display options that control the html output that contains plotly charts
35
35
36
-
You can control the html document that gets created via `Chart.Show` with various functions that change a chart's `DisplayOptions`.
37
-
38
-
Naturally, these full html documents can not be embedded in this documentation page, so sometimes images have to suffice for demonstrations here.
36
+
You can control the html output that gets created (e.g. documents created with `Chart.Show` or the output of `GenericChart.toChartHTML`) with various functions that change a chart's `DisplayOptions`.
39
37
40
38
let's first create some data for the purpose of creating example charts:
41
39
@@ -49,16 +47,34 @@ let y = [ 2.; 1.5; 5.; 1.5; 3.; 2.5; 2.5; 1.5; 3.5; 1. ]
49
47
(**
50
48
## Referencing PlotlyJS
51
49
52
-
For rendering plotly.js charts in a html document, you need to reference plotly.js in some form (duh!)
50
+
For rendering plotly.js charts in a html document, the document needs to reference plotly.js in some form.
51
+
52
+
Plotly.NET has two fundamentally different html outputs:
2. html fragments, containing only some html tags (e.g. a `<div>` containing a chart generation script). This is usually meant to included into another document that contains a reference to plotly.js.
Plotly.NET provides multiple ways to do that in the generated html:
68
+
Plotly.NET provides multiple ways to reference plotly.js in generated html via the `PlotlyJSReference` type. These differ in their effect depending on if the output is a full html document or a fragment:
55
69
56
-
- `Full`: Include the full plotly.js source in a script tag. HTML files using this option are self-contained and can be used offline.
57
-
- `CDN`: The default. uses a script tag in the head of the generated HTML to load plotly.js from a CDN.
58
-
- `Require`: Use requirejs to load plotly. This option is for example used in Plotly.NET.Interactive inside notebooks.
59
-
- `NoReference`: Don't include any plotly.js reference. Useful if you want to embed the output into another page that already references plotly - the documentation pages you are reading now are generated with this option.
70
+
| PlotlyJSReference Option | Description | Document | Fragment |
71
+
| --- | --- | --- | --- |
72
+
| `Full` | Include the full plotly.js source. | HTML documents created using this option are self-contained and can be used offline. | No effect |
73
+
| `CDN` | (default) Include a reference to plotly.js from a CDN. | HTML documents created using this option will contain a reference in their `<head>` tag | No effect |
74
+
| `Require` | Use requirejs to load plotly. | HTML documents created using this option will programmatically add a reference to require.js their `<head>` tag, which will then be used to load plotly.js | Fragments created using this option will programmatically add a reference to require.js when embedded into a html document, which will then be used to load plotly.js. |
75
+
| `NoReference` | Don't include any plotly.js reference. Useful if you want to embed the output into another page that already references plotly - the documentation pages you are reading now are generated with this option. | No effect | No effect |
60
76
61
-
You can control this on a per-chart basis via `Chart.withDisplayOptionsStyle`, for example if you want to include a script tag with the full plotly.js source:
77
+
You can control this on a per-chart basis via [Chart.withDisplayOptionsStyle](http://localhost:8901/reference/plotly-net-chart.html#withDisplayOptionsStyle), for example if you want to include a script tag with the full plotly.js source:
62
78
63
79
*)
64
80
@@ -72,7 +88,7 @@ Chart.Point(x = x, y = y)
72
88
73
89
Plotly.NET uses [Giraffe.ViewEngine](https://github.com/giraffe-fsharp/Giraffe.ViewEngine) internally to generate HTML documents, which means you can also use that DSL to add additional content to the output.
74
90
75
-
For example, use `Chart.withDescription` to append a list of html tags below the rendered chart:
91
+
For example, use [Chart.withDescription](/reference/plotly-net-chart.html#withDescription) to append a list of html tags below the rendered chart:
_Note: the example here is shown via an image, as the docs themselves are html pages that cannot load additional head tags._
101
117
102
-
You can add any number of additional html tags to the documents `<head>` tag using `Chart.WithAdditionalHeadTags`.
118
+
You can add any number of additional html tags to document `<head>` tag using [Chart.WithAdditionalHeadTags](/reference/plotly-net-chart.html#withAdditionalHeadTags).
103
119
104
120
For example, you can load external css libraries to style the chart description:
105
121
*)
@@ -128,7 +144,7 @@ let desc3 =
128
144
129
145
## Using MathTeX
130
146
131
-
`Chart.WithMathTex` is a prebuilt function to enable MathTeX for your generated plotly chart documents.
147
+
[Chart.WithMathTex](/reference/plotly-net-chart.html#withMathTex) is a prebuilt function to enable MathTeX for your generated plotly chart documents.
132
148
133
149
It will add a MathJax script reference to your document based on which version (either 2 or 3) you want to use:
0 commit comments