Skip to content

Commit 92adae9

Browse files
iprzybysziprzybysz
authored
Fix options in Scatter chart example (#2164)
1 parent 7faa861 commit 92adae9

File tree

3 files changed

+168
-20
lines changed

3 files changed

+168
-20
lines changed

‎demo/sites/data/charts.html‎

Lines changed: 41 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -493,9 +493,12 @@ <h2 class="mb-6 text-2xl font-bold text-gray-900 dark:text-gray-200">
493493

494494
const optionsScatter = {
495495
options: {
496-
title: {
497-
display: true,
498-
text: "Scatter Chart - Logarithmic X-Axis",
496+
plugins: {
497+
title: {
498+
display: true,
499+
text: "Scatter Chart - Logarithmic X-Axis",
500+
color: "rgb(102,102,102)",
501+
},
499502
},
500503
scales: {
501504
x: {
@@ -517,10 +520,44 @@ <h2 class="mb-6 text-2xl font-bold text-gray-900 dark:text-gray-200">
517520
},
518521
};
519522

523+
const optionsScatterDark = {
524+
options: {
525+
plugins: {
526+
title: {
527+
color: "#fff",
528+
},
529+
legend: {
530+
labels: {
531+
color: "#fff",
532+
},
533+
},
534+
},
535+
scales: {
536+
x: {
537+
ticks: {
538+
color: "#fff",
539+
},
540+
grid: {
541+
color: "#555",
542+
},
543+
},
544+
y: {
545+
ticks: {
546+
color: "#fff",
547+
},
548+
grid: {
549+
color: "#555",
550+
},
551+
},
552+
},
553+
},
554+
};
555+
520556
new te.Chart(
521557
document.getElementById("scatter-chart"),
522558
dataScatter,
523-
optionsScatter
559+
optionsScatter,
560+
optionsScatterDark
524561
);
525562
// Scatter chart
526563
// Bar chart with custom options

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

Lines changed: 41 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -242,9 +242,12 @@
242242

243243
const optionsScatter = {
244244
options: {
245-
title: {
246-
display: true,
247-
text: "Scatter Chart - Logarithmic X-Axis",
245+
plugins: {
246+
title: {
247+
display: true,
248+
text: "Scatter Chart - Logarithmic X-Axis",
249+
color: "rgb(102,102,102)",
250+
},
248251
},
249252
scales: {
250253
x: {
@@ -266,10 +269,44 @@
266269
},
267270
};
268271

272+
const optionsScatterDark = {
273+
options: {
274+
plugins: {
275+
title: {
276+
color: "#fff",
277+
},
278+
legend: {
279+
labels: {
280+
color: "#fff",
281+
},
282+
},
283+
},
284+
scales: {
285+
x: {
286+
ticks: {
287+
color: "#fff",
288+
},
289+
grid: {
290+
color: "#555",
291+
},
292+
},
293+
y: {
294+
ticks: {
295+
color: "#fff",
296+
},
297+
grid: {
298+
color: "#555",
299+
},
300+
},
301+
},
302+
},
303+
};
304+
269305
new te.Chart(
270306
document.getElementById("scatter-chart"),
271307
dataScatter,
272-
optionsScatter
308+
optionsScatter,
309+
optionsScatterDark
273310
);
274311
// Scatter chart
275312
// Bar chart with custom options

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

Lines changed: 86 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1554,9 +1554,12 @@
15541554

15551555
const optionsScatter = {
15561556
options: {
1557-
title: {
1558-
display: true,
1559-
text: "Scatter Chart - Logarithmic X-Axis",
1557+
plugins: {
1558+
title: {
1559+
display: true,
1560+
text: "Scatter Chart - Logarithmic X-Axis",
1561+
color: "rgb(102,102,102)",
1562+
},
15601563
},
15611564
scales: {
15621565
x: {
@@ -1577,11 +1580,45 @@
15771580
},
15781581
},
15791582
};
1583+
1584+
const optionsScatterDark = {
1585+
options: {
1586+
plugins: {
1587+
title: {
1588+
color: "#fff",
1589+
},
1590+
legend: {
1591+
labels: {
1592+
color: "#fff",
1593+
},
1594+
},
1595+
},
1596+
scales: {
1597+
x: {
1598+
ticks: {
1599+
color: "#fff",
1600+
},
1601+
grid: {
1602+
color: "#555",
1603+
},
1604+
},
1605+
y: {
1606+
ticks: {
1607+
color: "#fff",
1608+
},
1609+
grid: {
1610+
color: "#555",
1611+
},
1612+
},
1613+
},
1614+
},
1615+
};
15801616

15811617
new Chart(
15821618
document.getElementById("scatter-chart"),
15831619
dataScatter,
1584-
optionsScatter
1620+
optionsScatter,
1621+
optionsScatterDark
15851622
);
15861623
{{< /twsnippet/code >}}
15871624
{{< twsnippet/code lang="js" >}}
@@ -1727,9 +1764,12 @@
17271764

17281765
const optionsScatter = {
17291766
options: {
1730-
title: {
1731-
display: true,
1732-
text: "Scatter Chart - Logarithmic X-Axis",
1767+
plugins: {
1768+
title: {
1769+
display: true,
1770+
text: "Scatter Chart - Logarithmic X-Axis",
1771+
color: "rgb(102,102,102)",
1772+
},
17331773
},
17341774
scales: {
17351775
x: {
@@ -1750,11 +1790,45 @@
17501790
},
17511791
},
17521792
};
1793+
1794+
const optionsScatterDark = {
1795+
options: {
1796+
plugins: {
1797+
title: {
1798+
color: "#fff",
1799+
},
1800+
legend: {
1801+
labels: {
1802+
color: "#fff",
1803+
},
1804+
},
1805+
},
1806+
scales: {
1807+
x: {
1808+
ticks: {
1809+
color: "#fff",
1810+
},
1811+
grid: {
1812+
color: "#555",
1813+
},
1814+
},
1815+
y: {
1816+
ticks: {
1817+
color: "#fff",
1818+
},
1819+
grid: {
1820+
color: "#555",
1821+
},
1822+
},
1823+
},
1824+
},
1825+
};
17531826

17541827
new te.Chart(
17551828
document.getElementById("scatter-chart"),
17561829
dataScatter,
1757-
optionsScatter
1830+
optionsScatter,
1831+
optionsScatterDark
17581832
);
17591833
{{< /twsnippet/code >}}
17601834
{{< /twsnippet/wrapper >}}
@@ -2094,7 +2168,7 @@
20942168
</ul>
20952169

20962170
<!--Section: Demo-->
2097-
{{< twsnippet/demo id="example17" >}}
2171+
{{< twsnippet/demo id="example18" >}}
20982172
<div class="mx-auto w-11/12 overflow-hidden md:w-3/5">
20992173
<canvas
21002174
data-te-chart="bar"
@@ -2109,7 +2183,7 @@
21092183
{{< /twsnippet/demo >}}
21102184
<!--Section: Demo-->
21112185
<!--Section: Code-->
2112-
<section class="!visible hidden" data-te-collapse-item id="example17">
2186+
<section class="!visible hidden" data-te-collapse-item id="example18">
21132187
<div class="pt-4">
21142188
{{< twsnippet/wrapper "HTML,javascript" >}}
21152189
{{< twsnippet/code active=true lang="html" >}}
@@ -2163,14 +2237,14 @@
21632237
</div>
21642238

21652239
<!--Section: Demo-->
2166-
{{< twsnippet/demo id="example18" >}}
2240+
{{< twsnippet/demo id="example19" >}}
21672241
<div class="mx-auto w-11/12 overflow-hidden md:w-3/5">
21682242
<canvas id="darkmode-customization"> </canvas>
21692243
</div>
21702244
{{< /twsnippet/demo >}}
21712245
<!--Section: Demo-->
21722246
<!--Section: Code-->
2173-
<section class="!visible hidden" data-te-collapse-item id="example18">
2247+
<section class="!visible hidden" data-te-collapse-item id="example19">
21742248
<div class="pt-4">
21752249
{{< twsnippet/wrapper "HTML,javascript,umd" >}}
21762250
{{< twsnippet/code active=true lang="html" >}}

0 commit comments

Comments
 (0)