Skip to content

Commit ad6d150

Browse files
andrei-ngandrei-ng
committed
add example based on issue #171
refactor customization examples Signed-off-by: Andrei Gherghescu <[email protected]>
1 parent 33bb522 commit ad6d150

File tree

11 files changed

+533
-152
lines changed

11 files changed

+533
-152
lines changed

‎examples/customization/Cargo.toml

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎examples/customization/README.md

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,34 @@
22

33
We often get issues/questions regarding customization of the HTML output. In most situations, these are not related to Plotly functionality but rather custom behavior related to HTML rendering.
44

5-
This example pacakge contains examples of the most frequent raised questions by users of `plotly-rs`, such as
5+
This directory contains examples of the most frequent raised questions by users of `plotly-rs`, such as:
66
- making the resulting HTML plot responsive on browser window size change
77
- making the resulting HTML fill the entire browser page
88
- placing multiple plots in the same HTML page, e.g., by using the [`build_html`](https://crates.io/crates/build_html) crate
9+
- exporting plots to different formats with consistent font rendering
10+
11+
## Examples
12+
13+
### Density Mapbox Example
14+
Demonstrates creating a responsive density mapbox plot with OpenStreetMap styling and zoom controls.
15+
16+
```bash
17+
cd density_mapbox_example
18+
cargo run
19+
```
20+
21+
### Multiple Plots Example
22+
Shows how to embed multiple plotly plots on a single HTML page using inline HTML generation.
23+
24+
```bash
25+
cd multiple_plots_example
26+
cargo run
27+
```
28+
29+
### Consistent Format Export Example
30+
Demonstrates exporting plots to SVG, PNG, and PDF formats with consistent font rendering across browsers.
31+
32+
```bash
33+
cd consistent_format_export
34+
cargo run
35+
```

‎examples/customization/consistent_format_export/Cargo.toml

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
[package]
2+
name = "svg_export_example"
3+
version = "0.1.0"
4+
edition = "2021"
5+
authors = ["Yuriy D. Sibirmovsky"]
6+
description = "This example demonstrates exporting a plot to SVG, PNG, and PDF and keeping the font size consistent across all formats."
7+
8+
[workspace]
9+
10+
[dependencies]
11+
plotly = { path = "../../../plotly", features = ["kaleido", "kaleido_download"] }

‎examples/customization/consistent_format_export/README.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# SVG Export Example
2+
3+
This example demonstrates exporting a plot to SVG, PNG, and PDF using plotly.rs and keeping font size and style consistent accross SVG and other formats.
4+
5+
This example is based on [GitHub Issue #171](https://github.com/plotly/plotly.rs/issues/171).
6+
7+
8+
**Summary:**
9+
10+
For consistent font rendering across browsers and export formats, always set the `font.family` property explicitly in your plot configuration. Relying on default or generic font settings can lead to differences in appearance, especially for font size and legend layout, depending on the browser or export backend.
11+
12+
**Recommendation:**
13+
14+
Always set the `font.family` property (e.g., to `"Times New Roman, serif"`) for all text elements (titles, axes, legends) to ensure consistent results in all output formats.
15+
16+
## Overview
17+
18+
This example creates a line and scatter plot with custom styling, including:
19+
- Large font sizes for titles, legends, and axes
20+
- Custom legend positioning and styling
21+
- Border shapes around the plot
22+
- Export to multiple formats (PDF, SVG, PNG)
23+
24+
## Running the Example
25+
26+
```bash
27+
cd examples/customization/svg_export_example
28+
cargo run
29+
```
30+
31+
This will generate three output files:
32+
- `Data_plot.pdf` - PDF format (typically renders correctly)
33+
- `Data_plot.svg` - SVG format (may have font/legend issues)
34+
- `Data_plot.png` - PNG format (typically renders correctly)

‎examples/customization/consistent_format_export/assets/data_file.dat

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
-6 0.34813262986687 0.157822391633258 -6 0
2+
-5.9 0.46875653919673 0.328028117967049 -5.8 5
3+
-5.8 0.628027231301822 0.52369472427333 -5.6 0
4+
-5.7 0.837217193670763 0.75930808002296 -5.4 0
5+
-5.6 1.11051986051416 1.05151591736406 -5.2 0
6+
-5.5 1.46569311773448 1.41993951938828 -5 0
7+
-5.4 1.92481189963786 1.88806100382544 -4.8 5
8+
-5.3 2.51513944788948 2.48420179043188 -4.6 20
9+
-5.2 3.2701251243082 3.24260528612921 -4.4 5
10+
-5.1 4.23053409419851 4.20463343680189 -4.2 25
11+
-5 5.44571057588177 5.42008243904707 -4 50
12+
-4.9 6.97497154752718 6.94861744626477 -3.8 75
13+
-4.8 8.88912170219436 8.861319429385 -3.6 105
14+
-4.7 11.2720729739824 11.2423293883596 -3.4 135
15+
-4.6 14.2225431063134 14.1905658358818 -3.2 195
16+
-4.5 17.855797555045 17.8214809418407 -3 250
17+
-4.4 22.3053876622905 22.2688090784502 -2.8 380
18+
-4.3 27.7248257559954 27.6862489913022 -2.6 560
19+
-4.2 34.2891249995171 34.2490078103487 -2.4 710
20+
-4.1 42.1961189368502 42.1551221052607 -2.2 765
21+
-4 51.6674633852301 51.6264588107484 -2 1080
22+
-3.9 62.9492123746017 62.909287852889 -1.8 1230
23+
-3.8 76.3118510886195 76.2743095595762 -1.6 1650
24+
-3.7 92.0496631724023 92.0160143808758 -1.4 1765
25+
-3.6 110.479308330028 110.451251065321 -1.2 1895
26+
-3.5 131.937489825376 131.916883215734 -1 2225
27+
-3.4 156.777601242171 156.766423994451 -0.8 2360
28+
-3.3 185.36525843517 185.365555436519 -0.6 2635
29+
-3.2 218.072646584863 218.086462920878 -0.4 2875
30+
-3.1 255.271643934383 255.300947114738 -0.2 2710
31+
-3 297.325723059073 297.372315053109 0 2715
32+
-2.9 344.580676889233 344.646098425783 0.2 2870
33+
-2.8 397.354269193195 397.439699625933 0.4 2765
34+
-2.7 455.924966347558 456.031123176121 0.6 2750
35+
-2.6 520.519966990174 520.647009799593 0.8 2250
36+
-2.5 591.302806118227 591.450250194341 1 2255
37+
-2.4 668.360867508848 668.527512647483 1.2 2075
38+
-2.3 751.693189860458 751.877069862752 1.4 1605
39+
-2.2 841.19899448311 841.397352480169 1.6 1440
40+
-2.1 936.667392426119 936.876686481779 1.8 1165
41+
-2 1037.76874355149 1037.98468595164 2 1000
42+
-1.9 1144.04813658796 1144.2657688615 2.2 850
43+
-1.8 1254.92143560091 1255.13523967822 2.4 695
44+
-1.7 1369.67429337025 1369.87833744239 2.6 530
45+
-1.6 1487.46446564367 1487.65258133184 2.8 420
46+
-1.5 1607.32767298802 1607.49365847972 3 295
47+
-1.4 1728.18715102635 1728.32499300291 3.2 205
48+
-1.3 1848.86690841628 1848.97101401134 3.4 185
49+
-1.2 1968.10857928572 1968.17400809455 3.6 70
50+
-1.1 2084.59161822864 2084.61430363873 3.8 55
51+
-1 2196.95644733861 2196.93339625419 4 25
52+
-0.9 2303.83003253055 2303.75949296752 4.2 25
53+
-0.8 2403.85324709827 2403.7348341459 4.4 10
54+
-0.7 2495.70928036152 2495.5440526166 4.6 0
55+
-0.6 2578.15227404741 2577.94275475925 4.8 5
56+
-0.5 2650.03532344029 2649.78546315613 5 15
57+
-0.4 2710.33696776216 2710.05204809582 5.2 10
58+
-0.3 2758.18531662706 2757.87179772837 5.4 0
59+
-0.2 2792.87901697234 2792.5443341764 5.6 0
60+
-0.1 2813.90435606505 2813.5566738726 5.8 0
61+
0 2820.94791773878 2820.59585155634 6 5
62+
0.1 2813.90435606505 2813.5566738726
63+
0.2 2792.87901697234 2792.5443341764
64+
0.3 2758.18531662706 2757.87179772837
65+
0.4 2710.33696776216 2710.05204809582
66+
0.5 2650.03532344029 2649.78546315613
67+
0.6 2578.15227404741 2577.94275475925
68+
0.7 2495.70928036152 2495.5440526166
69+
0.8 2403.85324709827 2403.7348341459
70+
0.9 2303.83003253055 2303.75949296752
71+
1 2196.95644733861 2196.93339625419
72+
1.1 2084.59161822864 2084.61430363873
73+
1.2 1968.10857928572 1968.17400809455
74+
1.3 1848.86690841628 1848.97101401134
75+
1.4 1728.18715102635 1728.32499300291
76+
1.5 1607.32767298802 1607.49365847972
77+
1.6 1487.46446564367 1487.65258133184
78+
1.7 1369.67429337025 1369.87833744239
79+
1.8 1254.92143560091 1255.13523967822
80+
1.9 1144.04813658796 1144.2657688615
81+
2 1037.76874355149 1037.98468595164
82+
2.1 936.667392426119 936.876686481779
83+
2.2 841.19899448311 841.397352480169
84+
2.3 751.693189860458 751.877069862752
85+
2.4 668.360867508848 668.527512647482
86+
2.5 591.302806118227 591.45025019434
87+
2.6 520.519966990174 520.647009799593
88+
2.7 455.924966347558 456.03112317612
89+
2.8 397.354269193195 397.439699625933
90+
2.9 344.580676889233 344.646098425782
91+
3 297.325723059073 297.372315053109
92+
3.1 255.271643934383 255.300947114738
93+
3.2 218.072646584863 218.086462920877
94+
3.3 185.36525843517 185.365555436519
95+
3.4 156.777601242171 156.766423994451
96+
3.5 131.937489825376 131.916883215733
97+
3.6 110.479308330028 110.451251065321
98+
3.7 92.0496631724023 92.0160143808757
99+
3.8 76.3118510886195 76.2743095595761
100+
3.9 62.9492123746017 62.9092878528889
101+
4 51.6674633852301 51.6264588107483
102+
4.1 42.1961189368502 42.1551221052606
103+
4.2 34.2891249995171 34.2490078103487
104+
4.3 27.7248257559954 27.6862489913022
105+
4.4 22.3053876622905 22.2688090784502
106+
4.5 17.855797555045 17.8214809418407
107+
4.6 14.2225431063134 14.1905658358818
108+
4.7 11.2720729739824 11.2423293883595
109+
4.8 8.88912170219436 8.86131942938499
110+
4.9 6.97497154752718 6.94861744626476
111+
5 5.44571057588177 5.42008243904706
112+
5.1 4.23053409419851 4.20463343680188
113+
5.2 3.2701251243082 3.2426052861292
114+
5.3 2.51513944788948 2.48420179043187
115+
5.4 1.92481189963786 1.88806100382543
116+
5.5 1.46569311773448 1.41993951938828
117+
5.6 1.11051986051416 1.05151591736406
118+
5.7 0.837217193670763 0.759308080022959
119+
5.8 0.628027231301822 0.523694724273329
120+
5.9 0.46875653919673 0.328028117967048
121+
6 0.34813262986687 0.157822391633258
122+

0 commit comments

Comments
 (0)