Skip to content

Commit bb9dec1

Browse files
njolipatricknjolipatrick
authored
Fixed chart example squished on mobile view Documentation (#2007)
* Fixed chart example squished on mobile view * removed code changes on demo.html
1 parent 175095d commit bb9dec1

File tree

2 files changed

+47
-47
lines changed

2 files changed

+47
-47
lines changed

‎site/content/docs/standard/data/charts-advanced/index.html‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050

5151
<!--Section: Demo-->
5252
{{< twsnippet/demo id="example1" >}}
53-
<div class="mx-auto w-3/5 overflow-hidden">
53+
<div class="mx-auto w-11/12 overflow-hidden">
5454
<canvas id="chart-options-example"></canvas>
5555
</div>
5656
{{< /twsnippet/demo >}}
@@ -483,7 +483,7 @@
483483

484484
<!--Section: Demo-->
485485
{{< twsnippet/demo id="example2" >}}
486-
<div class="mx-auto w-3/5 overflow-hidden">
486+
<div class="mx-auto w-11/12 overflow-hidden">
487487
<canvas id="chart-mixed-example"></canvas>
488488
</div>
489489
{{< /twsnippet/demo >}}
@@ -594,7 +594,7 @@
594594

595595
<!--Section: Demo-->
596596
{{< twsnippet/demo id="example3" >}}
597-
<div class="mx-auto w-3/5 overflow-hidden">
597+
<div class="mx-auto w-11/12 overflow-hidden">
598598
<canvas id="chart-data-mdb-labels-example"></canvas>
599599
</div>
600600
{{< /twsnippet/demo >}}
@@ -758,7 +758,7 @@
758758

759759
<!--Section: Demo-->
760760
{{< twsnippet/demo id="example4" >}}
761-
<div class="mx-auto w-3/5 overflow-hidden">
761+
<div class="mx-auto w-11/12 overflow-hidden">
762762
<canvas id="chart-double-y-axis-example"></canvas>
763763
</div>
764764
{{< /twsnippet/demo >}}
@@ -993,7 +993,7 @@
993993

994994
<!--Section: Demo-->
995995
{{< twsnippet/demo id="example5" >}}
996-
<div class="mx-auto w-3/5 overflow-hidden">
996+
<div class="mx-auto w-11/12 overflow-hidden">
997997
<canvas id="chart-funnel-example"></canvas>
998998
</div>
999999
{{< /twsnippet/demo >}}
@@ -1209,7 +1209,7 @@
12091209

12101210
<!--Section: Demo-->
12111211
{{< twsnippet/demo id="example6" >}}
1212-
<div class="mx-auto w-3/5 overflow-hidden">
1212+
<div class="mx-auto w-11/12 overflow-hidden">
12131213
<canvas id="chart-values-formatting-example"></canvas>
12141214
</div>
12151215
{{< /twsnippet/demo >}}
@@ -1331,7 +1331,7 @@
13311331

13321332
<!--Section: Demo-->
13331333
{{< twsnippet/demo id="example7" >}}
1334-
<div class="mx-auto w-3/5 overflow-hidden">
1334+
<div class="mx-auto w-11/12 overflow-hidden">
13351335
<canvas id="chart-tooltips-formatting-example"></canvas>
13361336
</div>
13371337
{{< /twsnippet/demo >}}
@@ -1447,7 +1447,7 @@
14471447

14481448
<!--Section: Demo-->
14491449
{{< twsnippet/demo id="example8" >}}
1450-
<div class="mx-auto w-3/5 overflow-hidden">
1450+
<div class="mx-auto w-11/12 overflow-hidden">
14511451
<canvas id="chart-bar-double-datasets-example"></canvas>
14521452
</div>
14531453
{{< /twsnippet/demo >}}

‎site/content/docs/standard/data/charts/index.html‎

Lines changed: 39 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,8 @@
3838
</div>
3939

4040
<!--Section: Demo-->
41-
<div class="mb-6 rounded-lg border p-6">
42-
<div class="mx-auto w-3/5 overflow-hidden">
41+
<div class="mb-6 rounded-lg border p-2">
42+
<div class="mx-auto w-11/12 overflow-hidden">
4343
<canvas
4444
data-te-chart="bar"
4545
data-te-dataset-label="Traffic"
@@ -58,7 +58,7 @@
5858
<div class="pt-4">
5959
{{< twsnippet/wrapper "HTML,javascript" >}}
6060
{{< twsnippet/code active=true lang="html" >}}
61-
<div class="mx-auto w-3/5 overflow-hidden">
61+
<div class="mx-auto w-11/12 overflow-hidden">
6262
<canvas
6363
data-te-chart="bar"
6464
data-te-dataset-label="Traffic"
@@ -92,7 +92,7 @@
9292
<div class="pt-4">
9393
{{< twsnippet/wrapper "HTML,javascript,umd" >}}
9494
{{< twsnippet/code active=true lang="html" >}}
95-
<div class="mx-auto w-3/5 overflow-hidden">
95+
<div class="mx-auto w-11/12 overflow-hidden">
9696
<canvas id="bar-chart"></canvas>
9797
</div>
9898
{{< /twsnippet/code >}}
@@ -432,8 +432,8 @@
432432
</p>
433433

434434
<!--Section: Demo-->
435-
<div class="mb-6 rounded-lg border p-6">
436-
<div class="mx-auto w-3/5 overflow-hidden">
435+
<div class="mb-6 rounded-lg border p-2">
436+
<div class="mx-auto w-11/12 overflow-hidden">
437437
<canvas
438438
data-te-chart="line"
439439
data-te-dataset-label="Traffic"
@@ -452,7 +452,7 @@
452452
<div class="pt-4">
453453
{{< twsnippet/wrapper "HTML,javascript" >}}
454454
{{< twsnippet/code active=true lang="html" >}}
455-
<div class="mx-auto w-3/5 overflow-hidden">
455+
<div class="mx-auto w-11/12 overflow-hidden">
456456
<canvas
457457
data-te-chart="line"
458458
data-te-dataset-label="Traffic"
@@ -486,7 +486,7 @@
486486
<div class="pt-4">
487487
{{< twsnippet/wrapper "HTML,javascript,umd" >}}
488488
{{< twsnippet/code active=true lang="html" >}}
489-
<div class="mx-auto w-3/5 overflow-hidden">
489+
<div class="mx-auto w-11/12 overflow-hidden">
490490
<canvas id="line-chart"></canvas>
491491
</div>
492492
{{< /twsnippet/code >}}
@@ -557,8 +557,8 @@
557557
</p>
558558

559559
<!--Section: Demo-->
560-
<div class="mb-6 rounded-lg border p-6">
561-
<div class="mx-auto w-3/5 overflow-hidden">
560+
<div class="mb-6 rounded-lg border p-2">
561+
<div class="mx-auto w-11/12 overflow-hidden">
562562
<canvas id="bar-chart-horizontal"></canvas>
563563
</div>
564564
</div>
@@ -570,7 +570,7 @@
570570
<div class="pt-4">
571571
{{< twsnippet/wrapper "HTML,javascript,umd" >}}
572572
{{< twsnippet/code active=true lang="html" >}}
573-
<div class="mx-auto w-3/5 overflow-hidden">
573+
<div class="mx-auto w-11/12 overflow-hidden">
574574
<canvas id="bar-chart-horizontal"></canvas>
575575
</div>
576576
{{< /twsnippet/code >}}
@@ -725,8 +725,8 @@
725725
</p>
726726

727727
<!--Section: Demo-->
728-
<div class="mb-6 rounded-lg border p-6">
729-
<div class="mx-auto w-3/5 overflow-hidden">
728+
<div class="mb-6 rounded-lg border p-2">
729+
<div class="mx-auto w-11/12 overflow-hidden">
730730
<canvas
731731
data-te-chart="pie"
732732
data-te-dataset-label="Traffic"
@@ -746,7 +746,7 @@
746746
<div class="pt-4">
747747
{{< twsnippet/wrapper "HTML,javascript" >}}
748748
{{< twsnippet/code active=true lang="html" >}}
749-
<div class="mx-auto w-3/5 overflow-hidden">
749+
<div class="mx-auto w-11/12 overflow-hidden">
750750
<canvas
751751
data-te-chart="pie"
752752
data-te-dataset-label="Traffic"
@@ -781,7 +781,7 @@
781781
<div class="pt-4">
782782
{{< twsnippet/wrapper "HTML,javascript,umd" >}}
783783
{{< twsnippet/code active=true lang="html" >}}
784-
<div class="mx-auto w-3/5 overflow-hidden">
784+
<div class="mx-auto w-11/12 overflow-hidden">
785785
<canvas id="pie-chart"></canvas>
786786
</div>
787787
{{< /twsnippet/code >}}
@@ -870,8 +870,8 @@
870870
</p>
871871

872872
<!--Section: Demo-->
873-
<div class="mb-6 rounded-lg border p-6">
874-
<div class="mx-auto w-3/5 overflow-hidden">
873+
<div class="mb-6 rounded-lg border p-2">
874+
<div class="mx-auto w-11/12 overflow-hidden">
875875
<canvas
876876
data-te-chart="doughnut"
877877
data-te-dataset-label="Traffic"
@@ -891,7 +891,7 @@
891891
<div class="pt-4">
892892
{{< twsnippet/wrapper "HTML,javascript" >}}
893893
{{< twsnippet/code active=true lang="html" >}}
894-
<div class="mx-auto w-3/5 overflow-hidden">
894+
<div class="mx-auto w-11/12 overflow-hidden">
895895
<canvas
896896
data-te-chart="doughnut"
897897
data-te-dataset-label="Traffic"
@@ -926,7 +926,7 @@
926926
<div class="pt-4">
927927
{{< twsnippet/wrapper "HTML,javascript,umd" >}}
928928
{{< twsnippet/code active=true lang="html" >}}
929-
<div class="mx-auto w-3/5 overflow-hidden">
929+
<div class="mx-auto w-11/12 overflow-hidden">
930930
<canvas id="doughnut-chart"></canvas>
931931
</div>
932932
{{< /twsnippet/code >}}
@@ -1015,8 +1015,8 @@
10151015
</p>
10161016

10171017
<!--Section: Demo-->
1018-
<div class="mb-6 rounded-lg border p-6">
1019-
<div class="mx-auto w-3/5 overflow-hidden">
1018+
<div class="mb-6 rounded-lg border p-2">
1019+
<div class="mx-auto w-11/12 overflow-hidden">
10201020
<canvas
10211021
data-te-chart="polarArea"
10221022
data-te-dataset-label="Traffic"
@@ -1036,7 +1036,7 @@
10361036
<div class="pt-4">
10371037
{{< twsnippet/wrapper "HTML,javascript" >}}
10381038
{{< twsnippet/code active=true lang="html" >}}
1039-
<div class="mx-auto w-3/5 overflow-hidden">
1039+
<div class="mx-auto w-11/12 overflow-hidden">
10401040
<canvas
10411041
data-te-chart="polarArea"
10421042
data-te-dataset-label="Traffic"
@@ -1071,7 +1071,7 @@
10711071
<div class="pt-4">
10721072
{{< twsnippet/wrapper "HTML,javascript,umd" >}}
10731073
{{< twsnippet/code active=true lang="html" >}}
1074-
<div class="mx-auto w-3/5 overflow-hidden">
1074+
<div class="mx-auto w-11/12 overflow-hidden">
10751075
<canvas id="polar-area-chart"></canvas>
10761076
</div>
10771077
{{< /twsnippet/code >}}
@@ -1159,8 +1159,8 @@
11591159
</p>
11601160

11611161
<!--Section: Demo-->
1162-
<div class="mb-6 rounded-lg border p-6">
1163-
<div class="mx-auto w-3/5 overflow-hidden">
1162+
<div class="mb-6 rounded-lg border p-2">
1163+
<div class="mx-auto w-11/12 overflow-hidden">
11641164
<canvas
11651165
data-te-chart="radar"
11661166
data-te-dataset-label="Traffic"
@@ -1179,7 +1179,7 @@
11791179
<div class="pt-4">
11801180
{{< twsnippet/wrapper "HTML,javascript" >}}
11811181
{{< twsnippet/code active=true lang="html" >}}
1182-
<div class="mx-auto w-3/5 overflow-hidden">
1182+
<div class="mx-auto w-11/12 overflow-hidden">
11831183
<canvas
11841184
data-te-chart="radar"
11851185
data-te-dataset-label="Traffic"
@@ -1213,7 +1213,7 @@
12131213
<div class="pt-4">
12141214
{{< twsnippet/wrapper "HTML,javascript,umd" >}}
12151215
{{< twsnippet/code active=true lang="html" >}}
1216-
<div class="mx-auto w-3/5 overflow-hidden">
1216+
<div class="mx-auto w-11/12 overflow-hidden">
12171217
<canvas id="radar-chart"></canvas>
12181218
</div>
12191219
{{< /twsnippet/code >}}
@@ -1292,7 +1292,7 @@
12921292

12931293
<!--Section: Demo-->
12941294
{{< twsnippet/demo id="example14" >}}
1295-
<div class="mx-auto w-3/5 overflow-hidden">
1295+
<div class="mx-auto w-11/12 overflow-hidden">
12961296
<canvas id="bubble-chart"></canvas>
12971297
</div>
12981298
{{< /twsnippet/demo >}}
@@ -1302,7 +1302,7 @@
13021302
<div class="pt-4">
13031303
{{< twsnippet/wrapper "HTML,javascript,umd" >}}
13041304
{{< twsnippet/code active=true lang="html" >}}
1305-
<div class="mx-auto w-3/5 overflow-hidden">
1305+
<div class="mx-auto w-11/12 overflow-hidden">
13061306
<canvas id="bubble-chart"></canvas>
13071307
</div>
13081308
{{< /twsnippet/code >}}
@@ -1434,7 +1434,7 @@
14341434

14351435
<!--Section: Demo-->
14361436
{{< twsnippet/demo id="example15" >}}
1437-
<div class="mx-auto w-3/5 overflow-hidden">
1437+
<div class="mx-auto w-11/12 overflow-hidden">
14381438
<canvas id="scatter-chart"></canvas>
14391439
</div>
14401440
{{< /twsnippet/demo >}}
@@ -1444,7 +1444,7 @@
14441444
<div class="pt-4">
14451445
{{< twsnippet/wrapper "HTML,javascript,umd" >}}
14461446
{{< twsnippet/code active=true lang="html" >}}
1447-
<div class="mx-auto w-3/5 overflow-hidden">
1447+
<div class="mx-auto w-11/12 overflow-hidden">
14481448
<canvas id="scatter-chart"></canvas>
14491449
</div>
14501450
{{< /twsnippet/code >}}
@@ -1832,7 +1832,7 @@
18321832

18331833
<!--Section: Demo-->
18341834
{{< twsnippet/demo id="example16" >}}
1835-
<div class="mx-auto w-3/5 overflow-hidden">
1835+
<div class="mx-auto w-11/12 overflow-hidden">
18361836
<canvas id="bar-chart-custom-options"></canvas>
18371837
</div>
18381838
{{< /twsnippet/demo >}}
@@ -1842,7 +1842,7 @@
18421842
<div class="pt-4">
18431843
{{< twsnippet/wrapper "HTML,javascript,umd" >}}
18441844
{{< twsnippet/code active=true lang="html" >}}
1845-
<div class="mx-auto w-3/5 overflow-hidden">
1845+
<div class="mx-auto w-11/12 overflow-hidden">
18461846
<canvas id="bar-chart-custom-options"></canvas>
18471847
</div>
18481848
{{< /twsnippet/code >}}
@@ -2004,7 +2004,7 @@
20042004

20052005
<!--Section: Demo-->
20062006
{{< twsnippet/demo id="example17" >}}
2007-
<div class="mx-auto w-3/5 overflow-hidden">
2007+
<div class="mx-auto w-11/12 overflow-hidden">
20082008
<canvas id="bar-chart-custom-tooltip"></canvas>
20092009
</div>
20102010
{{< /twsnippet/demo >}}
@@ -2014,7 +2014,7 @@
20142014
<div class="pt-4">
20152015
{{< twsnippet/wrapper "HTML,javascript,umd" >}}
20162016
{{< twsnippet/code active=true lang="html" >}}
2017-
<div class="mx-auto w-3/5 overflow-hidden">
2017+
<div class="mx-auto w-11/12 overflow-hidden">
20182018
<canvas id="bar-chart-custom-tooltip"></canvas>
20192019
</div>
20202020
{{< /twsnippet/code >}}
@@ -2150,7 +2150,7 @@
21502150

21512151
<!--Section: Demo-->
21522152
{{< twsnippet/demo id="example17" >}}
2153-
<div class="mx-auto w-3/5 overflow-hidden">
2153+
<div class="mx-auto w-11/12 overflow-hidden">
21542154
<canvas
21552155
data-te-chart="bar"
21562156
data-te-dataset-label="Traffic"
@@ -2168,7 +2168,7 @@
21682168
<div class="pt-4">
21692169
{{< twsnippet/wrapper "HTML,javascript" >}}
21702170
{{< twsnippet/code active=true lang="html" >}}
2171-
<div class="mx-auto w-3/5 overflow-hidden">
2171+
<div class="mx-auto w-11/12 overflow-hidden">
21722172
<canvas
21732173
data-te-chart="bar"
21742174
data-te-dataset-label="Traffic"
@@ -2219,7 +2219,7 @@
22192219

22202220
<!--Section: Demo-->
22212221
{{< twsnippet/demo id="example18" >}}
2222-
<div class="mx-auto w-3/5 overflow-hidden">
2222+
<div class="mx-auto w-11/12 overflow-hidden">
22232223
<canvas id="darkmode-customization"> </canvas>
22242224
</div>
22252225
{{< /twsnippet/demo >}}
@@ -2229,7 +2229,7 @@
22292229
<div class="pt-4">
22302230
{{< twsnippet/wrapper "HTML,javascript,umd" >}}
22312231
{{< twsnippet/code active=true lang="html" >}}
2232-
<div class="mx-auto w-3/5 overflow-hidden">
2232+
<div class="mx-auto w-11/12 overflow-hidden">
22332233
<canvas id="darkmode-customization"> </canvas>
22342234
</div>
22352235
{{< /twsnippet/code >}}

0 commit comments

Comments
 (0)