diff --git a/website/.eslintrc.js b/website/.eslintrc.js
index f05e4a42ea..80db93a65e 100644
--- a/website/.eslintrc.js
+++ b/website/.eslintrc.js
@@ -3,6 +3,10 @@ module.exports = {
CHART_BACKGROUND_COLOR: true,
CHART_BACKGROUND_RGB_COLOR: true,
LINE_LINE_COLOR: true,
+ LINE_LINE2_COLOR: true,
+ LINE_LINE3_COLOR: true,
+ LINE_LINE4_COLOR: true,
+ LINE_LINE5_COLOR: true,
AREA_TOP_COLOR: true,
AREA_BOTTOM_COLOR: true,
BAR_UP_COLOR: true,
diff --git a/website/plugins/enhanced-codeblock/theme/CodeBlock/index.jsx b/website/plugins/enhanced-codeblock/theme/CodeBlock/index.jsx
index 46c7f3b7fa..224eaa6864 100644
--- a/website/plugins/enhanced-codeblock/theme/CodeBlock/index.jsx
+++ b/website/plugins/enhanced-codeblock/theme/CodeBlock/index.jsx
@@ -33,7 +33,7 @@ export function removeUnwantedLines(originalString) {
}
const EnhancedCodeBlock = props => {
- const { chart, replaceThemeConstants, hideableCode, chartOnly, iframeStyle, replaceTabs = true, ...rest } = props;
+ const { chart, replaceThemeConstants, hideableCode, chartOnly, chartOnTop = false, iframeStyle, replaceTabs = true, codeUsage, ...rest } = props;
let { children } = props;
const { colorMode } = useColorMode();
const isDarkTheme = colorMode === 'dark';
@@ -48,19 +48,19 @@ const EnhancedCodeBlock = props => {
children = removeUnwantedLines(children);
if (chart || hideableCode) {
- return (
- <>
- {hideableCode && <>
-
- }
- {!chartOnly && {children}}
- {chart && }>{() => }}
-
- );
+ const codeBlockSection = !chartOnly && {children};
+ const chartSection = chart && }>{() => };
+ const hideCodeToggle = (hideableCode && <>
+
+ );
+ if (chartOnTop) {
+ return <>{chartSection}{codeUsage}{hideCodeToggle}{codeBlockSection};
+ }
+ return <>{codeUsage}{hideCodeToggle}{codeBlockSection}{chartSection};
}
return {children};
diff --git a/website/sidebars-tutorials.js b/website/sidebars-tutorials.js
index 3c75264aae..a0dc1025f2 100644
--- a/website/sidebars-tutorials.js
+++ b/website/sidebars-tutorials.js
@@ -41,13 +41,21 @@ const sidebars = {
],
},
{
- 'How To / Examples': [
+ 'How To': [
{
type: 'autogenerated',
dirName: 'how_to',
},
],
},
+ {
+ 'Examples / Demos': [
+ {
+ type: 'autogenerated',
+ dirName: 'demos',
+ },
+ ],
+ },
],
};
diff --git a/website/theme-colors.js b/website/theme-colors.js
index 4df0af8360..6a567fed85 100644
--- a/website/theme-colors.js
+++ b/website/theme-colors.js
@@ -3,6 +3,10 @@ export const themeColors = {
CHART_BACKGROUND_COLOR: 'black',
CHART_BACKGROUND_RGB_COLOR: '0, 0, 0',
LINE_LINE_COLOR: '#2962FF',
+ LINE_LINE2_COLOR: 'rgb(225, 87, 90)',
+ LINE_LINE3_COLOR: 'rgb(242, 142, 44)',
+ LINE_LINE4_COLOR: 'rgb(164, 89, 209)',
+ LINE_LINE5_COLOR: 'rgb(27, 156, 133)',
AREA_TOP_COLOR: '#2962FF',
AREA_BOTTOM_COLOR: 'rgba(41, 98, 255, 0.28)',
BAR_UP_COLOR: '#26a69a',
@@ -20,6 +24,10 @@ export const themeColors = {
CHART_BACKGROUND_COLOR: 'white',
CHART_BACKGROUND_RGB_COLOR: '255, 255, 255',
LINE_LINE_COLOR: '#2962FF',
+ LINE_LINE2_COLOR: 'rgb(225, 87, 90)',
+ LINE_LINE3_COLOR: 'rgb(242, 142, 44)',
+ LINE_LINE4_COLOR: 'rgb(164, 89, 209)',
+ LINE_LINE5_COLOR: 'rgb(27, 156, 133)',
AREA_TOP_COLOR: '#2962FF',
AREA_BOTTOM_COLOR: 'rgba(41, 98, 255, 0.28)',
BAR_UP_COLOR: '#26a69a',
diff --git a/website/tutorials/how_to/_usage-guide-partial.mdx b/website/tutorials/_usage-guide-partial.mdx
similarity index 100%
rename from website/tutorials/how_to/_usage-guide-partial.mdx
rename to website/tutorials/_usage-guide-partial.mdx
diff --git a/website/tutorials/demos/.eslintrc.js b/website/tutorials/demos/.eslintrc.js
new file mode 100644
index 0000000000..5cd6c516c1
--- /dev/null
+++ b/website/tutorials/demos/.eslintrc.js
@@ -0,0 +1,6 @@
+module.exports = {
+ globals: {
+ document: false,
+ createChart: false,
+ },
+};
diff --git a/website/tutorials/demos/compare-multiple-series.js b/website/tutorials/demos/compare-multiple-series.js
new file mode 100644
index 0000000000..ebc419597f
--- /dev/null
+++ b/website/tutorials/demos/compare-multiple-series.js
@@ -0,0 +1,57 @@
+// remove-start
+// Lightweight Charts™ Example: Compare multiple series
+// https://tradingview.github.io/lightweight-charts/tutorials/how_to/compare-multiple-series
+
+// remove-end
+// hide-start
+let randomFactor = 25 + Math.random() * 25;
+const samplePoint = i =>
+ i *
+ (0.5 +
+ Math.sin(i / 10) * 0.2 +
+ Math.sin(i / 20) * 0.4 +
+ Math.sin(i / randomFactor) * 0.8 +
+ Math.sin(i / 500) * 0.5) +
+ 200;
+
+function generateLineData(numberOfPoints = 500) {
+ randomFactor = 25 + Math.random() * 25;
+ const res = [];
+ const date = new Date(Date.UTC(2018, 0, 1, 12, 0, 0, 0));
+ for (let i = 0; i < numberOfPoints; ++i) {
+ const time = (date.getTime() / 1000);
+ const value = samplePoint(i);
+ res.push({
+ time,
+ value,
+ });
+
+ date.setUTCDate(date.getUTCDate() + 1);
+ }
+
+ return res;
+}
+// hide-end
+const chartOptions = {
+ layout: {
+ textColor: CHART_TEXT_COLOR,
+ background: { type: 'solid', color: CHART_BACKGROUND_COLOR },
+ },
+};
+// remove-line
+/** @type {import('lightweight-charts').IChartApi} */
+const chart = createChart(document.getElementById('container'), chartOptions);
+
+const lineSeriesOne = chart.addLineSeries({ color: LINE_LINE_COLOR });
+const lineSeriesTwo = chart.addLineSeries({ color: LINE_LINE2_COLOR });
+const lineSeriesThree = chart.addLineSeries({ color: LINE_LINE3_COLOR });
+
+const lineSeriesOneData = generateLineData();
+const lineSeriesTwoData = generateLineData();
+const lineSeriesThreeData = generateLineData();
+
+lineSeriesOne.setData(lineSeriesOneData);
+lineSeriesTwo.setData(lineSeriesTwoData);
+lineSeriesThree.setData(lineSeriesThreeData);
+
+chart.timeScale().fitContent();
diff --git a/website/tutorials/demos/compare-multiple-series.mdx b/website/tutorials/demos/compare-multiple-series.mdx
new file mode 100644
index 0000000000..8502057291
--- /dev/null
+++ b/website/tutorials/demos/compare-multiple-series.mdx
@@ -0,0 +1,34 @@
+---
+title: Compare multiple series
+sidebar_label: Compare multiple series
+description:
+ An example of how to compare multiple series on a single price scale
+pagination_prev: null
+pagination_next: null
+keywords:
+ - compare
+ - series
+---
+
+This Multi-Series Comparison Example illustrates how an assortment of data
+series can be integrated into a single chart for comparisons. Simply use the
+charting API to create multiple series (such as `addLineSeries`).
+
+If you would like an unique price scales for each individual series,
+particularly when dealing with data series with divergent value ranges, then
+take a look at the [Two Price Scales Example](../how_to/two-price-scales.mdx).
+
+import UsageGuidePartial from '../_usage-guide-partial.mdx';
+import CodeBlock from '@theme/CodeBlock';
+import code from '!!raw-loader!./compare-multiple-series.js';
+
+}
+>
+ {code}
+
diff --git a/website/tutorials/demos/custom-font-family.js b/website/tutorials/demos/custom-font-family.js
new file mode 100644
index 0000000000..2dc18812f0
--- /dev/null
+++ b/website/tutorials/demos/custom-font-family.js
@@ -0,0 +1,806 @@
+// remove-start
+// Lightweight Charts™ Example: Compare mfont family
+// https://tradingview.github.io/lightweight-charts/tutorials/demos/custom-font-family
+
+// remove-end
+// hide-start
+const chartOptions = {
+ layout: {
+ textColor: CHART_TEXT_COLOR,
+ background: { type: 'solid', color: CHART_BACKGROUND_COLOR },
+ },
+ height: 200,
+};
+// hide-end
+const container = document.getElementById('container');
+// remove-line
+/** @type {import('lightweight-charts').IChartApi} */
+const chart = createChart(container, chartOptions);
+
+// remove-start
+// Only needed within demo page
+// eslint-disable-next-line no-undef
+window.addEventListener('resize', () => {
+ chart.applyOptions({ height: 200 });
+});
+// remove-end
+
+function setFontFamily(fontFamily) {
+ // highlight-start
+ chart.applyOptions({
+ layout: {
+ fontFamily: fontFamily,
+ },
+ });
+ // highlight-end
+}
+
+const candlestickSeries = chart.addCandlestickSeries({
+ upColor: BAR_UP_COLOR,
+ downColor: BAR_DOWN_COLOR,
+ borderVisible: false,
+ wickUpColor: BAR_UP_COLOR,
+ wickDownColor: BAR_DOWN_COLOR,
+});
+
+candlestickSeries.setData([
+ {
+ close: 108.9974612905403,
+ high: 121.20998259466148,
+ low: 96.65376292551082,
+ open: 104.5614412226746,
+ time: { year: 2018, month: 9, day: 22 },
+ },
+ // hide-start
+ {
+ close: 110.46815600023501,
+ high: 111.3650273696516,
+ low: 82.65543461471314,
+ open: 110.16538466099634,
+ time: { year: 2018, month: 9, day: 23 },
+ },
+ {
+ close: 90.62131977740425,
+ high: 109.19838270252615,
+ low: 82.30106956144076,
+ open: 105.03104735287424,
+ time: { year: 2018, month: 9, day: 24 },
+ },
+ {
+ close: 96.80120024431532,
+ high: 101.92074283374939,
+ low: 89.25819769856513,
+ open: 89.25819769856513,
+ time: { year: 2018, month: 9, day: 25 },
+ },
+ {
+ close: 94.87113928076117,
+ high: 104.12503365679314,
+ low: 85.42405005240111,
+ open: 104.12503365679314,
+ time: { year: 2018, month: 9, day: 26 },
+ },
+ {
+ close: 100.76494087674855,
+ high: 102.60508417239113,
+ low: 80.76268547064865,
+ open: 92.93299948659636,
+ time: { year: 2018, month: 9, day: 27 },
+ },
+ {
+ close: 101.45855928883597,
+ high: 110.26727325817173,
+ low: 91.10348900896837,
+ open: 93.4362185148034,
+ time: { year: 2018, month: 9, day: 28 },
+ },
+ {
+ close: 91.68871815146144,
+ high: 103.73263644407702,
+ low: 73.5329263610334,
+ open: 92.96467883926464,
+ time: { year: 2018, month: 9, day: 29 },
+ },
+ {
+ close: 89.39633140354033,
+ high: 101.06569518834237,
+ low: 81.71149885084162,
+ open: 83.08248758612376,
+ time: { year: 2018, month: 9, day: 30 },
+ },
+ {
+ close: 93.09498513675378,
+ high: 93.09498513675378,
+ low: 76.81138276012628,
+ open: 91.97280452613565,
+ time: { year: 2018, month: 10, day: 1 },
+ },
+ {
+ close: 89.26733004009083,
+ high: 89.26733004009083,
+ low: 76.27851645958225,
+ open: 85.83860311023625,
+ time: { year: 2018, month: 10, day: 2 },
+ },
+ {
+ close: 89.66035763006947,
+ high: 89.66035763006947,
+ low: 67.63677527399729,
+ open: 77.79584976144585,
+ time: { year: 2018, month: 10, day: 3 },
+ },
+ {
+ close: 89.59687813884807,
+ high: 97.05916949817754,
+ low: 72.9823390058379,
+ open: 77.37388423995716,
+ time: { year: 2018, month: 10, day: 4 },
+ },
+ {
+ close: 83.6425403120788,
+ high: 91.72593377862522,
+ low: 65.27208271740422,
+ open: 85.92711686401718,
+ time: { year: 2018, month: 10, day: 5 },
+ },
+ {
+ close: 82.99053929200655,
+ high: 93.4482645370556,
+ low: 65.98920655616067,
+ open: 71.8940788814462,
+ time: { year: 2018, month: 10, day: 6 },
+ },
+ {
+ close: 73.09595957510754,
+ high: 86.65935598412881,
+ low: 62.710852488609326,
+ open: 80.78945254092527,
+ time: { year: 2018, month: 10, day: 7 },
+ },
+ {
+ close: 80.12127692112905,
+ high: 87.49034842093855,
+ low: 60.09987438133361,
+ open: 70.2408873110499,
+ time: { year: 2018, month: 10, day: 8 },
+ },
+ {
+ close: 77.60439116240829,
+ high: 83.20908153481327,
+ low: 68.56836128158209,
+ open: 75.83440719565763,
+ time: { year: 2018, month: 10, day: 9 },
+ },
+ {
+ close: 73.8952889203428,
+ high: 81.89987377779327,
+ low: 57.8891283348631,
+ open: 66.51904017615065,
+ time: { year: 2018, month: 10, day: 10 },
+ },
+ {
+ close: 75.08452506029613,
+ high: 75.08452506029613,
+ low: 59.208194031968155,
+ open: 72.14475369395771,
+ time: { year: 2018, month: 10, day: 11 },
+ },
+ {
+ close: 73.08898607472305,
+ high: 73.08898607472305,
+ low: 63.05632280826725,
+ open: 66.93050765469924,
+ time: { year: 2018, month: 10, day: 12 },
+ },
+ {
+ close: 58.993371469509704,
+ high: 73.08872095153116,
+ low: 53.52204433018574,
+ open: 66.12840939191403,
+ time: { year: 2018, month: 10, day: 13 },
+ },
+ {
+ close: 57.150755012485,
+ high: 74.57414896810235,
+ low: 52.6552427480398,
+ open: 68.50876667562338,
+ time: { year: 2018, month: 10, day: 14 },
+ },
+ {
+ close: 58.03147289822832,
+ high: 69.62445357159157,
+ low: 53.8260018823565,
+ open: 61.62298899368165,
+ time: { year: 2018, month: 10, day: 15 },
+ },
+ {
+ close: 60.6852855399041,
+ high: 69.02095441024431,
+ low: 54.00939224622043,
+ open: 64.81901552322648,
+ time: { year: 2018, month: 10, day: 16 },
+ },
+ {
+ close: 57.508820449565285,
+ high: 63.82926565242872,
+ low: 54.07370975509682,
+ open: 54.07370975509682,
+ time: { year: 2018, month: 10, day: 17 },
+ },
+ {
+ close: 51.60796818909221,
+ high: 64.88712939579875,
+ low: 51.60796818909221,
+ open: 53.489226476218434,
+ time: { year: 2018, month: 10, day: 18 },
+ },
+ {
+ close: 55.139520748382864,
+ high: 59.161320710177925,
+ low: 52.228139922762765,
+ open: 52.228139922762765,
+ time: { year: 2018, month: 10, day: 19 },
+ },
+ {
+ close: 47.47868992247237,
+ high: 58.0836625917653,
+ low: 46.43213518526832,
+ open: 47.59258635788406,
+ time: { year: 2018, month: 10, day: 20 },
+ },
+ {
+ close: 47.22596723150508,
+ high: 51.55468175560989,
+ low: 45.22654435521185,
+ open: 47.452459556200054,
+ time: { year: 2018, month: 10, day: 21 },
+ },
+ {
+ close: 53.39724151191295,
+ high: 58.256006746786035,
+ low: 46.40105667413804,
+ open: 53.41548527476272,
+ time: { year: 2018, month: 10, day: 22 },
+ },
+ {
+ close: 45.015877277800854,
+ high: 51.2955426978105,
+ low: 40.26534748806228,
+ open: 43.90158660063875,
+ time: { year: 2018, month: 10, day: 23 },
+ },
+ {
+ close: 49.307312373439665,
+ high: 49.93643636637581,
+ low: 43.20705757075934,
+ open: 45.672934511555795,
+ time: { year: 2018, month: 10, day: 24 },
+ },
+ {
+ close: 45.15418019295631,
+ high: 48.59676744409583,
+ low: 37.628047445918504,
+ open: 40.33862825788268,
+ time: { year: 2018, month: 10, day: 25 },
+ },
+ {
+ close: 43.2972018283068,
+ high: 43.2972018283068,
+ low: 36.335943004352245,
+ open: 42.605991542720965,
+ time: { year: 2018, month: 10, day: 26 },
+ },
+ {
+ close: 39.1153643552137,
+ high: 44.311406627923844,
+ low: 35.31457011784855,
+ open: 42.00000202357808,
+ time: { year: 2018, month: 10, day: 27 },
+ },
+ {
+ close: 36.06960076896885,
+ high: 42.89041111567749,
+ low: 33.58326637182405,
+ open: 37.40942817102858,
+ time: { year: 2018, month: 10, day: 28 },
+ },
+ {
+ close: 35.8981036950969,
+ high: 42.19793419602979,
+ low: 33.62190962880232,
+ open: 36.87246325249825,
+ time: { year: 2018, month: 10, day: 29 },
+ },
+ {
+ close: 31.378205119641457,
+ high: 37.33501102832602,
+ low: 31.30137162225214,
+ open: 35.651275660713694,
+ time: { year: 2018, month: 10, day: 30 },
+ },
+ {
+ close: 33.574536057730576,
+ high: 37.30152570719593,
+ low: 27.369689193426243,
+ open: 34.330180925654936,
+ time: { year: 2018, month: 10, day: 31 },
+ },
+ {
+ close: 28.91735096504839,
+ high: 32.62196350117741,
+ low: 27.072564759401843,
+ open: 29.398552328599372,
+ time: { year: 2018, month: 11, day: 1 },
+ },
+ {
+ close: 28.44143154172122,
+ high: 31.042019861166594,
+ low: 23.383320830495375,
+ open: 27.275885037308072,
+ time: { year: 2018, month: 11, day: 2 },
+ },
+ {
+ close: 25.92162714418916,
+ high: 30.57604443170622,
+ low: 25.418671641150752,
+ open: 26.775196275924657,
+ time: { year: 2018, month: 11, day: 3 },
+ },
+ {
+ close: 26.376994016637433,
+ high: 28.198647836523744,
+ low: 21.492969733673334,
+ open: 26.27980943059139,
+ time: { year: 2018, month: 11, day: 4 },
+ },
+ {
+ close: 28.60834088674494,
+ high: 28.60834088674494,
+ low: 21.89002840571941,
+ open: 25.376464895884993,
+ time: { year: 2018, month: 11, day: 5 },
+ },
+ {
+ close: 31.103861067101136,
+ high: 31.103861067101136,
+ low: 24.39227668420513,
+ open: 28.994785427089838,
+ time: { year: 2018, month: 11, day: 6 },
+ },
+ {
+ close: 28.6308138310307,
+ high: 35.430817482769164,
+ low: 24.069515410358232,
+ open: 27.109407394069084,
+ time: { year: 2018, month: 11, day: 7 },
+ },
+ {
+ close: 29.468889521733466,
+ high: 37.54082586961352,
+ low: 27.90833873315644,
+ open: 33.16901271715577,
+ time: { year: 2018, month: 11, day: 8 },
+ },
+ {
+ close: 35.887823124204296,
+ high: 39.21804237580939,
+ low: 30.951078044055627,
+ open: 30.951078044055627,
+ time: { year: 2018, month: 11, day: 9 },
+ },
+ {
+ close: 34.361137347097575,
+ high: 35.27083445807796,
+ low: 27.825889562160082,
+ open: 34.86040182980157,
+ time: { year: 2018, month: 11, day: 10 },
+ },
+ {
+ close: 36.61336645243868,
+ high: 40.31460537175622,
+ low: 33.96383400053921,
+ open: 39.70037560142739,
+ time: { year: 2018, month: 11, day: 11 },
+ },
+ {
+ close: 41.321693986803055,
+ high: 44.45481986667003,
+ low: 35.67563772228475,
+ open: 38.67059795413642,
+ time: { year: 2018, month: 11, day: 12 },
+ },
+ {
+ close: 40.15038854039306,
+ high: 41.50912000191902,
+ low: 32.610637769394444,
+ open: 41.50912000191902,
+ time: { year: 2018, month: 11, day: 13 },
+ },
+ {
+ close: 44.092601065208015,
+ high: 44.092601065208015,
+ low: 37.778306506100726,
+ open: 38.99045898154136,
+ time: { year: 2018, month: 11, day: 14 },
+ },
+ {
+ close: 41.42426637839382,
+ high: 44.72189614841937,
+ low: 41.42426637839382,
+ open: 44.72189614841937,
+ time: { year: 2018, month: 11, day: 15 },
+ },
+ {
+ close: 41.19513795258408,
+ high: 49.08084695291049,
+ low: 36.24282165100056,
+ open: 44.909248500660254,
+ time: { year: 2018, month: 11, day: 16 },
+ },
+ {
+ close: 44.24935708161703,
+ high: 53.028535501565486,
+ low: 40.32056743060158,
+ open: 46.198546801109984,
+ time: { year: 2018, month: 11, day: 17 },
+ },
+ {
+ close: 43.18555863372182,
+ high: 52.34250206788521,
+ low: 43.18555863372182,
+ open: 49.58135271619679,
+ time: { year: 2018, month: 11, day: 18 },
+ },
+ {
+ close: 50.8568887039091,
+ high: 52.60441957102357,
+ low: 39.917719271944364,
+ open: 48.197532365645806,
+ time: { year: 2018, month: 11, day: 19 },
+ },
+ {
+ close: 48.79128595974164,
+ high: 52.45087789296739,
+ low: 46.80633073487828,
+ open: 52.45087789296739,
+ time: { year: 2018, month: 11, day: 20 },
+ },
+ {
+ close: 46.97300046781947,
+ high: 55.80689868049132,
+ low: 46.97300046781947,
+ open: 55.80689868049132,
+ time: { year: 2018, month: 11, day: 21 },
+ },
+ {
+ close: 55.58129861112469,
+ high: 55.58129861112469,
+ low: 49.087279242343996,
+ open: 53.16719476594961,
+ time: { year: 2018, month: 11, day: 22 },
+ },
+ {
+ close: 50.058979311730226,
+ high: 62.55333249171461,
+ low: 50.058979311730226,
+ open: 52.628489607588826,
+ time: { year: 2018, month: 11, day: 23 },
+ },
+ {
+ close: 51.193155229085995,
+ high: 59.08949991997865,
+ low: 51.193155229085995,
+ open: 55.352594157474755,
+ time: { year: 2018, month: 11, day: 24 },
+ },
+ {
+ close: 60.099338327208436,
+ high: 66.93510126958154,
+ low: 55.27299867222781,
+ open: 61.05897620044226,
+ time: { year: 2018, month: 11, day: 25 },
+ },
+ {
+ close: 58.3802630890727,
+ high: 71.50922937699602,
+ low: 50.95210438359451,
+ open: 62.4679688326532,
+ time: { year: 2018, month: 11, day: 26 },
+ },
+ {
+ close: 57.875350873413225,
+ high: 65.59903214448208,
+ low: 57.875350873413225,
+ open: 62.747405667247016,
+ time: { year: 2018, month: 11, day: 27 },
+ },
+ {
+ close: 61.231150731698605,
+ high: 66.3829902228434,
+ low: 61.231150731698605,
+ open: 65.01028486919516,
+ time: { year: 2018, month: 11, day: 28 },
+ },
+ {
+ close: 64.9698540874806,
+ high: 77.09783903299783,
+ low: 58.455031795628194,
+ open: 58.455031795628194,
+ time: { year: 2018, month: 11, day: 29 },
+ },
+ {
+ close: 72.40978471883417,
+ high: 72.40978471883417,
+ low: 53.05804901549206,
+ open: 65.907298021202,
+ time: { year: 2018, month: 11, day: 30 },
+ },
+ {
+ close: 74.60745731538934,
+ high: 78.33742117000789,
+ low: 54.42067144918077,
+ open: 73.20930147914103,
+ time: { year: 2018, month: 12, day: 1 },
+ },
+ {
+ close: 64.10866184869924,
+ high: 76.14506447001202,
+ low: 61.5224432669736,
+ open: 69.33984127682314,
+ time: { year: 2018, month: 12, day: 2 },
+ },
+ {
+ close: 65.92038759928786,
+ high: 76.98479070362022,
+ low: 65.92038759928786,
+ open: 69.32298264631615,
+ time: { year: 2018, month: 12, day: 3 },
+ },
+ {
+ close: 68.23682161095334,
+ high: 77.6723729460968,
+ low: 68.23682161095334,
+ open: 74.39471534484744,
+ time: { year: 2018, month: 12, day: 4 },
+ },
+ {
+ close: 67.45035792565862,
+ high: 83.53728553118547,
+ low: 67.45035792565862,
+ open: 74.79418570077237,
+ time: { year: 2018, month: 12, day: 5 },
+ },
+ {
+ close: 79.26722967320323,
+ high: 79.26722967320323,
+ low: 68.40654829383521,
+ open: 68.40654829383521,
+ time: { year: 2018, month: 12, day: 6 },
+ },
+ {
+ close: 74.95305464030587,
+ high: 81.65884414224071,
+ low: 64.08761481290135,
+ open: 81.65884414224071,
+ time: { year: 2018, month: 12, day: 7 },
+ },
+ {
+ close: 86.30802154315482,
+ high: 91.21953112925642,
+ low: 65.46112304993535,
+ open: 77.82514647663533,
+ time: { year: 2018, month: 12, day: 8 },
+ },
+ {
+ close: 82.67218208289492,
+ high: 92.45833377442081,
+ low: 76.80728739647081,
+ open: 87.18916937056241,
+ time: { year: 2018, month: 12, day: 9 },
+ },
+ {
+ close: 73.86125805398967,
+ high: 83.68952750914036,
+ low: 73.86125805398967,
+ open: 75.76119064173785,
+ time: { year: 2018, month: 12, day: 10 },
+ },
+ {
+ close: 79.00109311074502,
+ high: 88.74271558831151,
+ low: 69.00900811612337,
+ open: 88.74271558831151,
+ time: { year: 2018, month: 12, day: 11 },
+ },
+ {
+ close: 80.98779620162513,
+ high: 97.07429720104427,
+ low: 73.76970378608283,
+ open: 88.57288529720472,
+ time: { year: 2018, month: 12, day: 12 },
+ },
+ {
+ close: 87.83619759370346,
+ high: 91.29759438607132,
+ low: 74.00740214639268,
+ open: 87.51853658661781,
+ time: { year: 2018, month: 12, day: 13 },
+ },
+ {
+ close: 87.50134898892377,
+ high: 102.95635188637507,
+ low: 81.0513723219724,
+ open: 94.74009794290814,
+ time: { year: 2018, month: 12, day: 14 },
+ },
+ {
+ close: 92.40159548029843,
+ high: 103.24363067710844,
+ low: 75.44605394394573,
+ open: 95.99903495559444,
+ time: { year: 2018, month: 12, day: 15 },
+ },
+ {
+ close: 87.43619322092951,
+ high: 99.39349139000474,
+ low: 80.24624983473528,
+ open: 99.39349139000474,
+ time: { year: 2018, month: 12, day: 16 },
+ },
+ {
+ close: 84.42724177432086,
+ high: 95.57485075893881,
+ low: 84.42724177432086,
+ open: 90.71070399095831,
+ time: { year: 2018, month: 12, day: 17 },
+ },
+ {
+ close: 96.04408990868804,
+ high: 101.02158248010466,
+ low: 94.38544669520195,
+ open: 101.02158248010466,
+ time: { year: 2018, month: 12, day: 18 },
+ },
+ {
+ close: 97.2120815653703,
+ high: 103.35830035963959,
+ low: 78.72594316029567,
+ open: 86.98009038330306,
+ time: { year: 2018, month: 12, day: 19 },
+ },
+ {
+ close: 105.23366706522204,
+ high: 106.56174456393981,
+ low: 94.6658899187065,
+ open: 106.56174456393981,
+ time: { year: 2018, month: 12, day: 20 },
+ },
+ {
+ close: 89.53750874231946,
+ high: 112.27917367188074,
+ low: 87.13586952228918,
+ open: 96.0857985693989,
+ time: { year: 2018, month: 12, day: 21 },
+ },
+ {
+ close: 88.55787263435407,
+ high: 112.62138454627025,
+ low: 80.42783344898223,
+ open: 88.34340019789849,
+ time: { year: 2018, month: 12, day: 22 },
+ },
+ {
+ close: 86.00639650371167,
+ high: 110.94532193307279,
+ low: 74.78703575498496,
+ open: 92.4275741143068,
+ time: { year: 2018, month: 12, day: 23 },
+ },
+ {
+ close: 90.45119640254379,
+ high: 92.51500970997435,
+ low: 82.69475430846728,
+ open: 86.21662699549296,
+ time: { year: 2018, month: 12, day: 24 },
+ },
+ {
+ close: 93.38124264891343,
+ high: 93.38124264891343,
+ low: 84.5674956907938,
+ open: 87.54923273867136,
+ time: { year: 2018, month: 12, day: 25 },
+ },
+ {
+ close: 87.88725775527871,
+ high: 90.14253631595105,
+ low: 77.28638555494503,
+ open: 83.93199044032968,
+ time: { year: 2018, month: 12, day: 26 },
+ },
+ {
+ close: 71.77940077333062,
+ high: 89.25710176370582,
+ low: 67.74278646676306,
+ open: 78.5346198695072,
+ time: { year: 2018, month: 12, day: 27 },
+ },
+ {
+ close: 72.08757207606054,
+ high: 79.36518615067514,
+ low: 69.18787486704672,
+ open: 69.18787486704672,
+ time: { year: 2018, month: 12, day: 28 },
+ },
+ {
+ close: 73.87977927793119,
+ high: 77.62891475860795,
+ low: 70.42293039125319,
+ open: 70.42293039125319,
+ time: { year: 2018, month: 12, day: 29 },
+ },
+ {
+ close: 74.86330345366132,
+ high: 75.88473282167168,
+ low: 62.89549355427313,
+ open: 74.86554252962132,
+ time: { year: 2018, month: 12, day: 30 },
+ },
+ {
+ close: 71.00787215611817,
+ high: 71.00787215611817,
+ low: 57.29681995441558,
+ open: 60.04464694823929,
+ time: { year: 2018, month: 12, day: 31 },
+ },
+ // hide-end
+]);
+
+chart.timeScale().fitContent();
+// hide-start
+const styles = `
+ .buttons-container {
+ display: flex;
+ flex-direction: row;
+ gap: 8px;
+ }
+ .buttons-container button {
+ all: initial;
+ font-family: -apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, Ubuntu,
+ sans-serif;
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 510;
+ line-height: 24px; /* 150% */
+ letter-spacing: -0.32px;
+ padding: 8px 24px;
+ color: rgba(19, 23, 34, 1);
+ background-color: rgba(240, 243, 250, 1);
+ border-radius: 8px;
+ cursor: pointer;
+ }
+
+ .buttons-container button:hover {
+ background-color: rgba(224, 227, 235, 1);
+ }
+
+ .buttons-container button:active {
+ background-color: rgba(209, 212, 220, 1);
+ }
+`;
+
+const stylesElement = document.createElement('style');
+stylesElement.innerHTML = styles;
+container.appendChild(stylesElement);
+
+const buttonsContainer = document.createElement('div');
+buttonsContainer.classList.add('buttons-container');
+// hide-end
+const fontOptions = ['Courier New', 'Arial', 'Times New Roman'];
+fontOptions.forEach(font => {
+ const button = document.createElement('button');
+ button.innerText = font;
+ button.addEventListener('click', () => setFontFamily(font));
+ buttonsContainer.appendChild(button);
+});
+
+container.appendChild(buttonsContainer);
diff --git a/website/tutorials/demos/custom-font-family.mdx b/website/tutorials/demos/custom-font-family.mdx
new file mode 100644
index 0000000000..5d2dec04fe
--- /dev/null
+++ b/website/tutorials/demos/custom-font-family.mdx
@@ -0,0 +1,45 @@
+---
+title: Custom font family
+sidebar_label: Custom font
+description: An example of how to configure a custom font family for the chart
+pagination_prev: null
+pagination_next: null
+keywords:
+ - font
+ - typeface
+---
+
+In this example, Lightweight Charts™ showcases its high customizability,
+specifically with respect to adjusting font families. The primary tool for
+implementing this shift in font is the `chart.applyOptions()` method.
+
+This method is called within the `setFontFamily(fontFamily)` function, accepting
+an object that modifies the `layout` section of the chart options. The object
+changes the `fontFamily` property to the passed argument, allowing quick and
+responsive alterations to the chart's font style.
+
+The flexibility in adjusting text characteristics enables the fine-tuning of the
+chart's visual elements for better readability or to match specific styles,
+attesting to the adaptability of Lightweight Charts™.
+
+A more detailed tutorial on customizing the appearance of the chart can be found
+[here](../customization/intro.mdx).
+
+### API Reference
+
+- [LayoutOptions.fontFamily](/docs/api/interfaces/LayoutOptions#fontfamily)
+
+import UsageGuidePartial from '../_usage-guide-partial.mdx';
+import CodeBlock from '@theme/CodeBlock';
+import code from '!!raw-loader!./custom-font-family.js';
+
+}
+>
+ {code}
+
diff --git a/website/tutorials/demos/custom-locale.js b/website/tutorials/demos/custom-locale.js
new file mode 100644
index 0000000000..a1e32e72b2
--- /dev/null
+++ b/website/tutorials/demos/custom-locale.js
@@ -0,0 +1,807 @@
+// remove-start
+// Lightweight Charts™ Example: Custom locale
+// https://tradingview.github.io/lightweight-charts/tutorials/demos/custom-locale
+
+// remove-end
+// hide-start
+const chartOptions = {
+ layout: {
+ textColor: CHART_TEXT_COLOR,
+ background: { type: 'solid', color: CHART_BACKGROUND_COLOR },
+ },
+ height: 200,
+};
+// hide-end
+const container = document.getElementById('container');
+// remove-line
+/** @type {import('lightweight-charts').IChartApi} */
+const chart = createChart(container, chartOptions);
+
+// remove-start
+// Only needed within demo page
+// eslint-disable-next-line no-undef
+window.addEventListener('resize', () => {
+ chart.applyOptions({ height: 200 });
+});
+// remove-end
+
+function setLocale(locale) {
+ // highlight-start
+ chart.applyOptions({
+ localization: {
+ locale: locale,
+ dateFormat: 'ja-JP' === locale ? 'yyyy-MM-dd' : "dd MMM 'yy",
+ },
+ });
+ // highlight-end
+}
+
+const candlestickSeries = chart.addCandlestickSeries({
+ upColor: BAR_UP_COLOR,
+ downColor: BAR_DOWN_COLOR,
+ borderVisible: false,
+ wickUpColor: BAR_UP_COLOR,
+ wickDownColor: BAR_DOWN_COLOR,
+});
+
+candlestickSeries.setData([
+ {
+ close: 108.9974612905403,
+ high: 121.20998259466148,
+ low: 96.65376292551082,
+ open: 104.5614412226746,
+ time: { year: 2018, month: 9, day: 22 },
+ },
+ // hide-start
+ {
+ close: 110.46815600023501,
+ high: 111.3650273696516,
+ low: 82.65543461471314,
+ open: 110.16538466099634,
+ time: { year: 2018, month: 9, day: 23 },
+ },
+ {
+ close: 90.62131977740425,
+ high: 109.19838270252615,
+ low: 82.30106956144076,
+ open: 105.03104735287424,
+ time: { year: 2018, month: 9, day: 24 },
+ },
+ {
+ close: 96.80120024431532,
+ high: 101.92074283374939,
+ low: 89.25819769856513,
+ open: 89.25819769856513,
+ time: { year: 2018, month: 9, day: 25 },
+ },
+ {
+ close: 94.87113928076117,
+ high: 104.12503365679314,
+ low: 85.42405005240111,
+ open: 104.12503365679314,
+ time: { year: 2018, month: 9, day: 26 },
+ },
+ {
+ close: 100.76494087674855,
+ high: 102.60508417239113,
+ low: 80.76268547064865,
+ open: 92.93299948659636,
+ time: { year: 2018, month: 9, day: 27 },
+ },
+ {
+ close: 101.45855928883597,
+ high: 110.26727325817173,
+ low: 91.10348900896837,
+ open: 93.4362185148034,
+ time: { year: 2018, month: 9, day: 28 },
+ },
+ {
+ close: 91.68871815146144,
+ high: 103.73263644407702,
+ low: 73.5329263610334,
+ open: 92.96467883926464,
+ time: { year: 2018, month: 9, day: 29 },
+ },
+ {
+ close: 89.39633140354033,
+ high: 101.06569518834237,
+ low: 81.71149885084162,
+ open: 83.08248758612376,
+ time: { year: 2018, month: 9, day: 30 },
+ },
+ {
+ close: 93.09498513675378,
+ high: 93.09498513675378,
+ low: 76.81138276012628,
+ open: 91.97280452613565,
+ time: { year: 2018, month: 10, day: 1 },
+ },
+ {
+ close: 89.26733004009083,
+ high: 89.26733004009083,
+ low: 76.27851645958225,
+ open: 85.83860311023625,
+ time: { year: 2018, month: 10, day: 2 },
+ },
+ {
+ close: 89.66035763006947,
+ high: 89.66035763006947,
+ low: 67.63677527399729,
+ open: 77.79584976144585,
+ time: { year: 2018, month: 10, day: 3 },
+ },
+ {
+ close: 89.59687813884807,
+ high: 97.05916949817754,
+ low: 72.9823390058379,
+ open: 77.37388423995716,
+ time: { year: 2018, month: 10, day: 4 },
+ },
+ {
+ close: 83.6425403120788,
+ high: 91.72593377862522,
+ low: 65.27208271740422,
+ open: 85.92711686401718,
+ time: { year: 2018, month: 10, day: 5 },
+ },
+ {
+ close: 82.99053929200655,
+ high: 93.4482645370556,
+ low: 65.98920655616067,
+ open: 71.8940788814462,
+ time: { year: 2018, month: 10, day: 6 },
+ },
+ {
+ close: 73.09595957510754,
+ high: 86.65935598412881,
+ low: 62.710852488609326,
+ open: 80.78945254092527,
+ time: { year: 2018, month: 10, day: 7 },
+ },
+ {
+ close: 80.12127692112905,
+ high: 87.49034842093855,
+ low: 60.09987438133361,
+ open: 70.2408873110499,
+ time: { year: 2018, month: 10, day: 8 },
+ },
+ {
+ close: 77.60439116240829,
+ high: 83.20908153481327,
+ low: 68.56836128158209,
+ open: 75.83440719565763,
+ time: { year: 2018, month: 10, day: 9 },
+ },
+ {
+ close: 73.8952889203428,
+ high: 81.89987377779327,
+ low: 57.8891283348631,
+ open: 66.51904017615065,
+ time: { year: 2018, month: 10, day: 10 },
+ },
+ {
+ close: 75.08452506029613,
+ high: 75.08452506029613,
+ low: 59.208194031968155,
+ open: 72.14475369395771,
+ time: { year: 2018, month: 10, day: 11 },
+ },
+ {
+ close: 73.08898607472305,
+ high: 73.08898607472305,
+ low: 63.05632280826725,
+ open: 66.93050765469924,
+ time: { year: 2018, month: 10, day: 12 },
+ },
+ {
+ close: 58.993371469509704,
+ high: 73.08872095153116,
+ low: 53.52204433018574,
+ open: 66.12840939191403,
+ time: { year: 2018, month: 10, day: 13 },
+ },
+ {
+ close: 57.150755012485,
+ high: 74.57414896810235,
+ low: 52.6552427480398,
+ open: 68.50876667562338,
+ time: { year: 2018, month: 10, day: 14 },
+ },
+ {
+ close: 58.03147289822832,
+ high: 69.62445357159157,
+ low: 53.8260018823565,
+ open: 61.62298899368165,
+ time: { year: 2018, month: 10, day: 15 },
+ },
+ {
+ close: 60.6852855399041,
+ high: 69.02095441024431,
+ low: 54.00939224622043,
+ open: 64.81901552322648,
+ time: { year: 2018, month: 10, day: 16 },
+ },
+ {
+ close: 57.508820449565285,
+ high: 63.82926565242872,
+ low: 54.07370975509682,
+ open: 54.07370975509682,
+ time: { year: 2018, month: 10, day: 17 },
+ },
+ {
+ close: 51.60796818909221,
+ high: 64.88712939579875,
+ low: 51.60796818909221,
+ open: 53.489226476218434,
+ time: { year: 2018, month: 10, day: 18 },
+ },
+ {
+ close: 55.139520748382864,
+ high: 59.161320710177925,
+ low: 52.228139922762765,
+ open: 52.228139922762765,
+ time: { year: 2018, month: 10, day: 19 },
+ },
+ {
+ close: 47.47868992247237,
+ high: 58.0836625917653,
+ low: 46.43213518526832,
+ open: 47.59258635788406,
+ time: { year: 2018, month: 10, day: 20 },
+ },
+ {
+ close: 47.22596723150508,
+ high: 51.55468175560989,
+ low: 45.22654435521185,
+ open: 47.452459556200054,
+ time: { year: 2018, month: 10, day: 21 },
+ },
+ {
+ close: 53.39724151191295,
+ high: 58.256006746786035,
+ low: 46.40105667413804,
+ open: 53.41548527476272,
+ time: { year: 2018, month: 10, day: 22 },
+ },
+ {
+ close: 45.015877277800854,
+ high: 51.2955426978105,
+ low: 40.26534748806228,
+ open: 43.90158660063875,
+ time: { year: 2018, month: 10, day: 23 },
+ },
+ {
+ close: 49.307312373439665,
+ high: 49.93643636637581,
+ low: 43.20705757075934,
+ open: 45.672934511555795,
+ time: { year: 2018, month: 10, day: 24 },
+ },
+ {
+ close: 45.15418019295631,
+ high: 48.59676744409583,
+ low: 37.628047445918504,
+ open: 40.33862825788268,
+ time: { year: 2018, month: 10, day: 25 },
+ },
+ {
+ close: 43.2972018283068,
+ high: 43.2972018283068,
+ low: 36.335943004352245,
+ open: 42.605991542720965,
+ time: { year: 2018, month: 10, day: 26 },
+ },
+ {
+ close: 39.1153643552137,
+ high: 44.311406627923844,
+ low: 35.31457011784855,
+ open: 42.00000202357808,
+ time: { year: 2018, month: 10, day: 27 },
+ },
+ {
+ close: 36.06960076896885,
+ high: 42.89041111567749,
+ low: 33.58326637182405,
+ open: 37.40942817102858,
+ time: { year: 2018, month: 10, day: 28 },
+ },
+ {
+ close: 35.8981036950969,
+ high: 42.19793419602979,
+ low: 33.62190962880232,
+ open: 36.87246325249825,
+ time: { year: 2018, month: 10, day: 29 },
+ },
+ {
+ close: 31.378205119641457,
+ high: 37.33501102832602,
+ low: 31.30137162225214,
+ open: 35.651275660713694,
+ time: { year: 2018, month: 10, day: 30 },
+ },
+ {
+ close: 33.574536057730576,
+ high: 37.30152570719593,
+ low: 27.369689193426243,
+ open: 34.330180925654936,
+ time: { year: 2018, month: 10, day: 31 },
+ },
+ {
+ close: 28.91735096504839,
+ high: 32.62196350117741,
+ low: 27.072564759401843,
+ open: 29.398552328599372,
+ time: { year: 2018, month: 11, day: 1 },
+ },
+ {
+ close: 28.44143154172122,
+ high: 31.042019861166594,
+ low: 23.383320830495375,
+ open: 27.275885037308072,
+ time: { year: 2018, month: 11, day: 2 },
+ },
+ {
+ close: 25.92162714418916,
+ high: 30.57604443170622,
+ low: 25.418671641150752,
+ open: 26.775196275924657,
+ time: { year: 2018, month: 11, day: 3 },
+ },
+ {
+ close: 26.376994016637433,
+ high: 28.198647836523744,
+ low: 21.492969733673334,
+ open: 26.27980943059139,
+ time: { year: 2018, month: 11, day: 4 },
+ },
+ {
+ close: 28.60834088674494,
+ high: 28.60834088674494,
+ low: 21.89002840571941,
+ open: 25.376464895884993,
+ time: { year: 2018, month: 11, day: 5 },
+ },
+ {
+ close: 31.103861067101136,
+ high: 31.103861067101136,
+ low: 24.39227668420513,
+ open: 28.994785427089838,
+ time: { year: 2018, month: 11, day: 6 },
+ },
+ {
+ close: 28.6308138310307,
+ high: 35.430817482769164,
+ low: 24.069515410358232,
+ open: 27.109407394069084,
+ time: { year: 2018, month: 11, day: 7 },
+ },
+ {
+ close: 29.468889521733466,
+ high: 37.54082586961352,
+ low: 27.90833873315644,
+ open: 33.16901271715577,
+ time: { year: 2018, month: 11, day: 8 },
+ },
+ {
+ close: 35.887823124204296,
+ high: 39.21804237580939,
+ low: 30.951078044055627,
+ open: 30.951078044055627,
+ time: { year: 2018, month: 11, day: 9 },
+ },
+ {
+ close: 34.361137347097575,
+ high: 35.27083445807796,
+ low: 27.825889562160082,
+ open: 34.86040182980157,
+ time: { year: 2018, month: 11, day: 10 },
+ },
+ {
+ close: 36.61336645243868,
+ high: 40.31460537175622,
+ low: 33.96383400053921,
+ open: 39.70037560142739,
+ time: { year: 2018, month: 11, day: 11 },
+ },
+ {
+ close: 41.321693986803055,
+ high: 44.45481986667003,
+ low: 35.67563772228475,
+ open: 38.67059795413642,
+ time: { year: 2018, month: 11, day: 12 },
+ },
+ {
+ close: 40.15038854039306,
+ high: 41.50912000191902,
+ low: 32.610637769394444,
+ open: 41.50912000191902,
+ time: { year: 2018, month: 11, day: 13 },
+ },
+ {
+ close: 44.092601065208015,
+ high: 44.092601065208015,
+ low: 37.778306506100726,
+ open: 38.99045898154136,
+ time: { year: 2018, month: 11, day: 14 },
+ },
+ {
+ close: 41.42426637839382,
+ high: 44.72189614841937,
+ low: 41.42426637839382,
+ open: 44.72189614841937,
+ time: { year: 2018, month: 11, day: 15 },
+ },
+ {
+ close: 41.19513795258408,
+ high: 49.08084695291049,
+ low: 36.24282165100056,
+ open: 44.909248500660254,
+ time: { year: 2018, month: 11, day: 16 },
+ },
+ {
+ close: 44.24935708161703,
+ high: 53.028535501565486,
+ low: 40.32056743060158,
+ open: 46.198546801109984,
+ time: { year: 2018, month: 11, day: 17 },
+ },
+ {
+ close: 43.18555863372182,
+ high: 52.34250206788521,
+ low: 43.18555863372182,
+ open: 49.58135271619679,
+ time: { year: 2018, month: 11, day: 18 },
+ },
+ {
+ close: 50.8568887039091,
+ high: 52.60441957102357,
+ low: 39.917719271944364,
+ open: 48.197532365645806,
+ time: { year: 2018, month: 11, day: 19 },
+ },
+ {
+ close: 48.79128595974164,
+ high: 52.45087789296739,
+ low: 46.80633073487828,
+ open: 52.45087789296739,
+ time: { year: 2018, month: 11, day: 20 },
+ },
+ {
+ close: 46.97300046781947,
+ high: 55.80689868049132,
+ low: 46.97300046781947,
+ open: 55.80689868049132,
+ time: { year: 2018, month: 11, day: 21 },
+ },
+ {
+ close: 55.58129861112469,
+ high: 55.58129861112469,
+ low: 49.087279242343996,
+ open: 53.16719476594961,
+ time: { year: 2018, month: 11, day: 22 },
+ },
+ {
+ close: 50.058979311730226,
+ high: 62.55333249171461,
+ low: 50.058979311730226,
+ open: 52.628489607588826,
+ time: { year: 2018, month: 11, day: 23 },
+ },
+ {
+ close: 51.193155229085995,
+ high: 59.08949991997865,
+ low: 51.193155229085995,
+ open: 55.352594157474755,
+ time: { year: 2018, month: 11, day: 24 },
+ },
+ {
+ close: 60.099338327208436,
+ high: 66.93510126958154,
+ low: 55.27299867222781,
+ open: 61.05897620044226,
+ time: { year: 2018, month: 11, day: 25 },
+ },
+ {
+ close: 58.3802630890727,
+ high: 71.50922937699602,
+ low: 50.95210438359451,
+ open: 62.4679688326532,
+ time: { year: 2018, month: 11, day: 26 },
+ },
+ {
+ close: 57.875350873413225,
+ high: 65.59903214448208,
+ low: 57.875350873413225,
+ open: 62.747405667247016,
+ time: { year: 2018, month: 11, day: 27 },
+ },
+ {
+ close: 61.231150731698605,
+ high: 66.3829902228434,
+ low: 61.231150731698605,
+ open: 65.01028486919516,
+ time: { year: 2018, month: 11, day: 28 },
+ },
+ {
+ close: 64.9698540874806,
+ high: 77.09783903299783,
+ low: 58.455031795628194,
+ open: 58.455031795628194,
+ time: { year: 2018, month: 11, day: 29 },
+ },
+ {
+ close: 72.40978471883417,
+ high: 72.40978471883417,
+ low: 53.05804901549206,
+ open: 65.907298021202,
+ time: { year: 2018, month: 11, day: 30 },
+ },
+ {
+ close: 74.60745731538934,
+ high: 78.33742117000789,
+ low: 54.42067144918077,
+ open: 73.20930147914103,
+ time: { year: 2018, month: 12, day: 1 },
+ },
+ {
+ close: 64.10866184869924,
+ high: 76.14506447001202,
+ low: 61.5224432669736,
+ open: 69.33984127682314,
+ time: { year: 2018, month: 12, day: 2 },
+ },
+ {
+ close: 65.92038759928786,
+ high: 76.98479070362022,
+ low: 65.92038759928786,
+ open: 69.32298264631615,
+ time: { year: 2018, month: 12, day: 3 },
+ },
+ {
+ close: 68.23682161095334,
+ high: 77.6723729460968,
+ low: 68.23682161095334,
+ open: 74.39471534484744,
+ time: { year: 2018, month: 12, day: 4 },
+ },
+ {
+ close: 67.45035792565862,
+ high: 83.53728553118547,
+ low: 67.45035792565862,
+ open: 74.79418570077237,
+ time: { year: 2018, month: 12, day: 5 },
+ },
+ {
+ close: 79.26722967320323,
+ high: 79.26722967320323,
+ low: 68.40654829383521,
+ open: 68.40654829383521,
+ time: { year: 2018, month: 12, day: 6 },
+ },
+ {
+ close: 74.95305464030587,
+ high: 81.65884414224071,
+ low: 64.08761481290135,
+ open: 81.65884414224071,
+ time: { year: 2018, month: 12, day: 7 },
+ },
+ {
+ close: 86.30802154315482,
+ high: 91.21953112925642,
+ low: 65.46112304993535,
+ open: 77.82514647663533,
+ time: { year: 2018, month: 12, day: 8 },
+ },
+ {
+ close: 82.67218208289492,
+ high: 92.45833377442081,
+ low: 76.80728739647081,
+ open: 87.18916937056241,
+ time: { year: 2018, month: 12, day: 9 },
+ },
+ {
+ close: 73.86125805398967,
+ high: 83.68952750914036,
+ low: 73.86125805398967,
+ open: 75.76119064173785,
+ time: { year: 2018, month: 12, day: 10 },
+ },
+ {
+ close: 79.00109311074502,
+ high: 88.74271558831151,
+ low: 69.00900811612337,
+ open: 88.74271558831151,
+ time: { year: 2018, month: 12, day: 11 },
+ },
+ {
+ close: 80.98779620162513,
+ high: 97.07429720104427,
+ low: 73.76970378608283,
+ open: 88.57288529720472,
+ time: { year: 2018, month: 12, day: 12 },
+ },
+ {
+ close: 87.83619759370346,
+ high: 91.29759438607132,
+ low: 74.00740214639268,
+ open: 87.51853658661781,
+ time: { year: 2018, month: 12, day: 13 },
+ },
+ {
+ close: 87.50134898892377,
+ high: 102.95635188637507,
+ low: 81.0513723219724,
+ open: 94.74009794290814,
+ time: { year: 2018, month: 12, day: 14 },
+ },
+ {
+ close: 92.40159548029843,
+ high: 103.24363067710844,
+ low: 75.44605394394573,
+ open: 95.99903495559444,
+ time: { year: 2018, month: 12, day: 15 },
+ },
+ {
+ close: 87.43619322092951,
+ high: 99.39349139000474,
+ low: 80.24624983473528,
+ open: 99.39349139000474,
+ time: { year: 2018, month: 12, day: 16 },
+ },
+ {
+ close: 84.42724177432086,
+ high: 95.57485075893881,
+ low: 84.42724177432086,
+ open: 90.71070399095831,
+ time: { year: 2018, month: 12, day: 17 },
+ },
+ {
+ close: 96.04408990868804,
+ high: 101.02158248010466,
+ low: 94.38544669520195,
+ open: 101.02158248010466,
+ time: { year: 2018, month: 12, day: 18 },
+ },
+ {
+ close: 97.2120815653703,
+ high: 103.35830035963959,
+ low: 78.72594316029567,
+ open: 86.98009038330306,
+ time: { year: 2018, month: 12, day: 19 },
+ },
+ {
+ close: 105.23366706522204,
+ high: 106.56174456393981,
+ low: 94.6658899187065,
+ open: 106.56174456393981,
+ time: { year: 2018, month: 12, day: 20 },
+ },
+ {
+ close: 89.53750874231946,
+ high: 112.27917367188074,
+ low: 87.13586952228918,
+ open: 96.0857985693989,
+ time: { year: 2018, month: 12, day: 21 },
+ },
+ {
+ close: 88.55787263435407,
+ high: 112.62138454627025,
+ low: 80.42783344898223,
+ open: 88.34340019789849,
+ time: { year: 2018, month: 12, day: 22 },
+ },
+ {
+ close: 86.00639650371167,
+ high: 110.94532193307279,
+ low: 74.78703575498496,
+ open: 92.4275741143068,
+ time: { year: 2018, month: 12, day: 23 },
+ },
+ {
+ close: 90.45119640254379,
+ high: 92.51500970997435,
+ low: 82.69475430846728,
+ open: 86.21662699549296,
+ time: { year: 2018, month: 12, day: 24 },
+ },
+ {
+ close: 93.38124264891343,
+ high: 93.38124264891343,
+ low: 84.5674956907938,
+ open: 87.54923273867136,
+ time: { year: 2018, month: 12, day: 25 },
+ },
+ {
+ close: 87.88725775527871,
+ high: 90.14253631595105,
+ low: 77.28638555494503,
+ open: 83.93199044032968,
+ time: { year: 2018, month: 12, day: 26 },
+ },
+ {
+ close: 71.77940077333062,
+ high: 89.25710176370582,
+ low: 67.74278646676306,
+ open: 78.5346198695072,
+ time: { year: 2018, month: 12, day: 27 },
+ },
+ {
+ close: 72.08757207606054,
+ high: 79.36518615067514,
+ low: 69.18787486704672,
+ open: 69.18787486704672,
+ time: { year: 2018, month: 12, day: 28 },
+ },
+ {
+ close: 73.87977927793119,
+ high: 77.62891475860795,
+ low: 70.42293039125319,
+ open: 70.42293039125319,
+ time: { year: 2018, month: 12, day: 29 },
+ },
+ {
+ close: 74.86330345366132,
+ high: 75.88473282167168,
+ low: 62.89549355427313,
+ open: 74.86554252962132,
+ time: { year: 2018, month: 12, day: 30 },
+ },
+ {
+ close: 71.00787215611817,
+ high: 71.00787215611817,
+ low: 57.29681995441558,
+ open: 60.04464694823929,
+ time: { year: 2018, month: 12, day: 31 },
+ },
+ // hide-end
+]);
+
+chart.timeScale().fitContent();
+// hide-start
+const styles = `
+ .buttons-container {
+ display: flex;
+ flex-direction: row;
+ gap: 8px;
+ }
+ .buttons-container button {
+ all: initial;
+ font-family: -apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, Ubuntu,
+ sans-serif;
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 510;
+ line-height: 24px; /* 150% */
+ letter-spacing: -0.32px;
+ padding: 8px 24px;
+ color: rgba(19, 23, 34, 1);
+ background-color: rgba(240, 243, 250, 1);
+ border-radius: 8px;
+ cursor: pointer;
+ }
+
+ .buttons-container button:hover {
+ background-color: rgba(224, 227, 235, 1);
+ }
+
+ .buttons-container button:active {
+ background-color: rgba(209, 212, 220, 1);
+ }
+`;
+
+const stylesElement = document.createElement('style');
+stylesElement.innerHTML = styles;
+container.appendChild(stylesElement);
+
+const buttonsContainer = document.createElement('div');
+buttonsContainer.classList.add('buttons-container');
+// hide-end
+const localeOptions = ['es-ES', 'en-US', 'ja-JP'];
+localeOptions.forEach(locale => {
+ const button = document.createElement('button');
+ button.innerText = locale;
+ button.addEventListener('click', () => setLocale(locale));
+ buttonsContainer.appendChild(button);
+});
+
+container.appendChild(buttonsContainer);
diff --git a/website/tutorials/demos/custom-locale.mdx b/website/tutorials/demos/custom-locale.mdx
new file mode 100644
index 0000000000..cb13ba0664
--- /dev/null
+++ b/website/tutorials/demos/custom-locale.mdx
@@ -0,0 +1,48 @@
+---
+title: Custom locale
+sidebar_label: Custom locale
+description: An example of how to set a custom locale for the chart
+pagination_prev: null
+pagination_next: null
+keywords:
+ - locale
+ - language
+ - international
+ - internationalization
+ - i18n
+---
+
+In this example, the Lightweight Charts™ library allows for a change in the
+locale of the chart rendering, enabling customization to best suit the end-user.
+An initial chart is displayed in the default locale.
+
+The function `setLocale(locale)` is defined to change the locale of the chart
+using `chart.applyOptions` method. It adjusts the `localization` property of the
+chart options, specifically the `locale` and `dateFormat` options. The
+`dateFormat` varies depending on the set locale to mirror customary date formats
+in respective regions.
+
+A selection of buttons are created, each representing a distinct locale (like
+'es-ES', 'en-US', 'ja-JP'). On clicking any of these buttons, its respective
+locale is applied to the chart by invoking `setLocale(locale)`. This dynamically
+adjusts the date formatting for the chart data, demonstrating the flexibility of
+the Lightweight Charts™ in catering to an international audience.
+
+### API Reference
+
+- [ChartOptions.localization](/docs/api/interfaces/ChartOptionsBase#localization)
+
+import UsageGuidePartial from '../_usage-guide-partial.mdx';
+import CodeBlock from '@theme/CodeBlock';
+import code from '!!raw-loader!./custom-locale.js';
+
+}
+>
+ {code}
+
diff --git a/website/tutorials/demos/infinite-history.js b/website/tutorials/demos/infinite-history.js
new file mode 100644
index 0000000000..727b327360
--- /dev/null
+++ b/website/tutorials/demos/infinite-history.js
@@ -0,0 +1,126 @@
+// remove-start
+// Lightweight Charts™ Example: Infinite history
+// https://tradingview.github.io/lightweight-charts/tutorials/demos/infinite-history
+
+// remove-end
+
+// hide-start
+let randomFactor = 25 + Math.random() * 25;
+const samplePoint = i =>
+ i *
+ (0.5 +
+ Math.sin(i / 10) * 0.2 +
+ Math.sin(i / 20) * 0.4 +
+ Math.sin(i / randomFactor) * 0.8 +
+ Math.sin(i / 500) * 0.5) +
+ 200;
+
+function generateLineData(numberOfPoints = 500, endDate) {
+ randomFactor = 25 + Math.random() * 25;
+ const res = [];
+ const date = endDate || new Date(Date.UTC(2018, 0, 1, 12, 0, 0, 0));
+ date.setUTCDate(date.getUTCDate() - numberOfPoints - 1);
+ for (let i = 0; i < numberOfPoints; ++i) {
+ const time = date.getTime() / 1000;
+ const value = samplePoint(i);
+ res.push({
+ time,
+ value,
+ });
+
+ date.setUTCDate(date.getUTCDate() + 1);
+ }
+
+ return res;
+}
+
+function randomNumber(min, max) {
+ return Math.random() * (max - min) + min;
+}
+
+function randomBar(lastClose) {
+ const open = +randomNumber(lastClose * 0.95, lastClose * 1.05).toFixed(2);
+ const close = +randomNumber(open * 0.95, open * 1.05).toFixed(2);
+ const high = +randomNumber(
+ Math.max(open, close),
+ Math.max(open, close) * 1.1
+ ).toFixed(2);
+ const low = +randomNumber(
+ Math.min(open, close) * 0.9,
+ Math.min(open, close)
+ ).toFixed(2);
+ return {
+ open,
+ high,
+ low,
+ close,
+ };
+}
+
+function generateCandleData(numberOfPoints = 250, endDate) {
+ const lineData = generateLineData(numberOfPoints, endDate);
+ let lastClose = lineData[0].value;
+ return lineData.map(d => {
+ const candle = randomBar(lastClose);
+ lastClose = candle.close;
+ return {
+ time: d.time,
+ low: candle.low,
+ high: candle.high,
+ open: candle.open,
+ close: candle.close,
+ };
+ });
+}
+
+class Datafeed {
+ constructor() {
+ this._earliestDate = new Date(Date.UTC(2018, 0, 1, 12, 0, 0, 0));
+ this._data = [];
+ }
+
+ getBars(numberOfExtraBars) {
+ const historicalData = generateCandleData(
+ numberOfExtraBars,
+ this._earliestDate
+ );
+ this._data = [...historicalData, ...this._data];
+ this._earliestDate = new Date(historicalData[0].time * 1000);
+ return this._data;
+ }
+}
+
+const chartOptions = {
+ layout: {
+ textColor: CHART_TEXT_COLOR,
+ background: { type: 'solid', color: CHART_BACKGROUND_COLOR },
+ },
+};
+// hide-end
+const container = document.getElementById('container');
+// remove-line
+/** @type {import('lightweight-charts').IChartApi} */
+const chart = createChart(container, chartOptions);
+
+const series = chart.addCandlestickSeries({
+ upColor: BAR_UP_COLOR,
+ downColor: BAR_DOWN_COLOR,
+ borderVisible: false,
+ wickUpColor: BAR_UP_COLOR,
+ wickDownColor: BAR_DOWN_COLOR,
+});
+
+const datafeed = new Datafeed();
+
+series.setData(datafeed.getBars(200));
+
+chart.timeScale().subscribeVisibleLogicalRangeChange(logicalRange => {
+ if (logicalRange.from < 10) {
+ // load more data
+ const numberBarsToLoad = 50 - logicalRange.from;
+ const data = datafeed.getBars(numberBarsToLoad);
+ setTimeout(() => {
+ series.setData(data);
+ }, 250); // add a loading delay
+ }
+});
diff --git a/website/tutorials/demos/infinite-history.mdx b/website/tutorials/demos/infinite-history.mdx
new file mode 100644
index 0000000000..a53ade8ce6
--- /dev/null
+++ b/website/tutorials/demos/infinite-history.mdx
@@ -0,0 +1,42 @@
+---
+title: Infinite history
+sidebar_label: Infinite history
+description: An example of how to load historical data on demand
+pagination_prev: null
+pagination_next: null
+keywords:
+ - history
+---
+
+This sample showcases the capability of Lightweight Charts™ to manage and display
+an ever-expanding dataset, resembling a live feed that loads older data when the
+user scrolls back in time. The example depicts a chart that initially loads a
+limited amount of data, but later fetches additional data as required.
+
+Key to this functionality is the
+[`subscribeVisibleLogicalRangeChange`](docs/api/interfaces/ITimeScaleApi#subscribevisiblelogicalrangechange)
+method. This function is triggered when the visible data range changes, in this
+case, when the user scrolls beyond the initially loaded data.
+
+By checking if the amount of unseen data on the left of the screen falls below a
+certain threshold (in this example, 10 units), it's determined whether
+additional data needs to be loaded. New data is appended through a simulated
+delay using `setTimeout`.
+
+This kind of infinite history functionality is typical of financial charts which
+frequently handle large and continuously expanding datasets.
+
+import UsageGuidePartial from '../_usage-guide-partial.mdx';
+import CodeBlock from '@theme/CodeBlock';
+import code from '!!raw-loader!./infinite-history.js';
+
+}
+>
+ {code}
+
diff --git a/website/tutorials/demos/moving-average.js b/website/tutorials/demos/moving-average.js
new file mode 100644
index 0000000000..bd9b4873fd
--- /dev/null
+++ b/website/tutorials/demos/moving-average.js
@@ -0,0 +1,122 @@
+// remove-start
+// Lightweight Charts™ Example: Moving average indicator
+// https://tradingview.github.io/lightweight-charts/tutorials/demos/moving-average
+
+// remove-end
+
+// hide-start
+let randomFactor = 25 + Math.random() * 25;
+const samplePoint = i =>
+ i *
+ (0.5 +
+ Math.sin(i / 10) * 0.2 +
+ Math.sin(i / 20) * 0.4 +
+ Math.sin(i / randomFactor) * 0.8 +
+ Math.sin(i / 500) * 0.5) +
+ 200;
+
+function generateLineData(numberOfPoints = 500, endDate) {
+ randomFactor = 25 + Math.random() * 25;
+ const res = [];
+ const date = endDate || new Date(Date.UTC(2018, 0, 1, 12, 0, 0, 0));
+ date.setUTCDate(date.getUTCDate() - numberOfPoints - 1);
+ for (let i = 0; i < numberOfPoints; ++i) {
+ const time = date.getTime() / 1000;
+ const value = samplePoint(i);
+ res.push({
+ time,
+ value,
+ });
+
+ date.setUTCDate(date.getUTCDate() + 1);
+ }
+
+ return res;
+}
+
+function randomNumber(min, max) {
+ return Math.random() * (max - min) + min;
+}
+
+function randomBar(lastClose) {
+ const open = +randomNumber(lastClose * 0.95, lastClose * 1.05).toFixed(2);
+ const close = +randomNumber(open * 0.95, open * 1.05).toFixed(2);
+ const high = +randomNumber(
+ Math.max(open, close),
+ Math.max(open, close) * 1.1
+ ).toFixed(2);
+ const low = +randomNumber(
+ Math.min(open, close) * 0.9,
+ Math.min(open, close)
+ ).toFixed(2);
+ return {
+ open,
+ high,
+ low,
+ close,
+ };
+}
+
+function generateCandleData(numberOfPoints = 250, endDate) {
+ const lineData = generateLineData(numberOfPoints, endDate);
+ let lastClose = lineData[0].value;
+ return lineData.map(d => {
+ const candle = randomBar(lastClose);
+ lastClose = candle.close;
+ return {
+ time: d.time,
+ low: candle.low,
+ high: candle.high,
+ open: candle.open,
+ close: candle.close,
+ };
+ });
+}
+
+const chartOptions = {
+ layout: {
+ textColor: CHART_TEXT_COLOR,
+ background: { type: 'solid', color: CHART_BACKGROUND_COLOR },
+ },
+};
+// hide-end
+// remove-line
+/** @type {import('lightweight-charts').IChartApi} */
+const chart = createChart(document.getElementById('container'), chartOptions);
+
+const barData = generateCandleData(500);
+
+function calculateMovingAverageSeriesData(candleData, maLength) {
+ const maData = [];
+
+ for (let i = 0; i < candleData.length; i++) {
+ if (i < maLength) {
+ // Provide whitespace data points until the MA can be calculated
+ maData.push({ time: candleData[i].time });
+ } else {
+ // Calculate the moving average, slow but simple way
+ let sum = 0;
+ for (let j = 0; j < maLength; j++) {
+ sum += candleData[i - j].close;
+ }
+ const maValue = sum / maLength;
+ maData.push({ time: candleData[i].time, value: maValue });
+ }
+ }
+
+ return maData;
+}
+
+const maData = calculateMovingAverageSeriesData(barData, 20);
+
+const maSeries = chart.addLineSeries({ color: LINE_LINE_COLOR, lineWidth: 1 });
+maSeries.setData(maData);
+
+const candlestickSeries = chart.addCandlestickSeries({
+ upColor: BAR_UP_COLOR,
+ downColor: BAR_DOWN_COLOR,
+ borderVisible: false,
+ wickUpColor: BAR_UP_COLOR,
+ wickDownColor: BAR_DOWN_COLOR,
+});
+candlestickSeries.setData(barData);
diff --git a/website/tutorials/demos/moving-average.mdx b/website/tutorials/demos/moving-average.mdx
new file mode 100644
index 0000000000..9cec53d974
--- /dev/null
+++ b/website/tutorials/demos/moving-average.mdx
@@ -0,0 +1,41 @@
+---
+title: Moving average indicator
+sidebar_label: Moving average
+description: An example of how to add a moving average indicator line
+pagination_prev: null
+pagination_next: null
+keywords:
+ - moving average
+ - indicator
+---
+
+This example demonstrates the implementation of a moving average (MA) indicator
+using Lightweight Charts™. It effectively shows how to overlay a line series
+representing the moving average on a candlestick series.
+
+Initial rendering involves the creation of a candlestick series using randomly
+generated data. The `calculateMovingAverageSeriesData` function subsequently
+computes the 20-period MA data from the candlestick data. For each point, if
+less than 20 data points precede it, the function creates a whitespace data
+point. If 20 or more data points precede it, it calculates the MA for that
+period.
+
+The MA data set forms a line series, which is placed underneath the candlestick
+series (by creating the line series first). As a result, users can view the
+underlying price data (via the candlestick series) in conjunction with the
+moving average trend line which provides valuable analytical insight.
+
+import UsageGuidePartial from '../_usage-guide-partial.mdx';
+import CodeBlock from '@theme/CodeBlock';
+import code from '!!raw-loader!./moving-average.js';
+
+}
+>
+ {code}
+
diff --git a/website/tutorials/demos/range-switcher.js b/website/tutorials/demos/range-switcher.js
new file mode 100644
index 0000000000..bfcfc6d43e
--- /dev/null
+++ b/website/tutorials/demos/range-switcher.js
@@ -0,0 +1,586 @@
+// remove-start
+// Lightweight Charts™ Example: Range switcher
+// https://tradingview.github.io/lightweight-charts/tutorials/demos/range-switcher
+
+// remove-end
+
+const dayData = [
+ { time: '2018-10-19', value: 26.19 },
+ // hide-start
+ { time: '2018-10-22', value: 25.87 },
+ { time: '2018-10-23', value: 25.83 },
+ { time: '2018-10-24', value: 25.78 },
+ { time: '2018-10-25', value: 25.82 },
+ { time: '2018-10-26', value: 25.81 },
+ { time: '2018-10-29', value: 25.82 },
+ { time: '2018-10-30', value: 25.71 },
+ { time: '2018-10-31', value: 25.82 },
+ { time: '2018-11-01', value: 25.72 },
+ { time: '2018-11-02', value: 25.74 },
+ { time: '2018-11-05', value: 25.81 },
+ { time: '2018-11-06', value: 25.75 },
+ { time: '2018-11-07', value: 25.73 },
+ { time: '2018-11-08', value: 25.75 },
+ { time: '2018-11-09', value: 25.75 },
+ { time: '2018-11-12', value: 25.76 },
+ { time: '2018-11-13', value: 25.8 },
+ { time: '2018-11-14', value: 25.77 },
+ { time: '2018-11-15', value: 25.75 },
+ { time: '2018-11-16', value: 25.75 },
+ { time: '2018-11-19', value: 25.75 },
+ { time: '2018-11-20', value: 25.72 },
+ { time: '2018-11-21', value: 25.78 },
+ { time: '2018-11-23', value: 25.72 },
+ { time: '2018-11-26', value: 25.78 },
+ { time: '2018-11-27', value: 25.85 },
+ { time: '2018-11-28', value: 25.85 },
+ { time: '2018-11-29', value: 25.55 },
+ { time: '2018-11-30', value: 25.41 },
+ { time: '2018-12-03', value: 25.41 },
+ { time: '2018-12-04', value: 25.42 },
+ { time: '2018-12-06', value: 25.33 },
+ { time: '2018-12-07', value: 25.39 },
+ { time: '2018-12-10', value: 25.32 },
+ { time: '2018-12-11', value: 25.48 },
+ { time: '2018-12-12', value: 25.39 },
+ { time: '2018-12-13', value: 25.45 },
+ { time: '2018-12-14', value: 25.52 },
+ { time: '2018-12-17', value: 25.38 },
+ { time: '2018-12-18', value: 25.36 },
+ { time: '2018-12-19', value: 25.65 },
+ { time: '2018-12-20', value: 25.7 },
+ { time: '2018-12-21', value: 25.66 },
+ { time: '2018-12-24', value: 25.66 },
+ { time: '2018-12-26', value: 25.65 },
+ { time: '2018-12-27', value: 25.66 },
+ { time: '2018-12-28', value: 25.68 },
+ { time: '2018-12-31', value: 25.77 },
+ { time: '2019-01-02', value: 25.72 },
+ { time: '2019-01-03', value: 25.69 },
+ { time: '2019-01-04', value: 25.71 },
+ { time: '2019-01-07', value: 25.72 },
+ { time: '2019-01-08', value: 25.72 },
+ { time: '2019-01-09', value: 25.66 },
+ { time: '2019-01-10', value: 25.85 },
+ { time: '2019-01-11', value: 25.92 },
+ { time: '2019-01-14', value: 25.94 },
+ { time: '2019-01-15', value: 25.95 },
+ { time: '2019-01-16', value: 26.0 },
+ { time: '2019-01-17', value: 25.99 },
+ { time: '2019-01-18', value: 25.6 },
+ { time: '2019-01-22', value: 25.81 },
+ { time: '2019-01-23', value: 25.7 },
+ { time: '2019-01-24', value: 25.74 },
+ { time: '2019-01-25', value: 25.8 },
+ { time: '2019-01-28', value: 25.83 },
+ { time: '2019-01-29', value: 25.7 },
+ { time: '2019-01-30', value: 25.78 },
+ { time: '2019-01-31', value: 25.35 },
+ { time: '2019-02-01', value: 25.6 },
+ { time: '2019-02-04', value: 25.65 },
+ { time: '2019-02-05', value: 25.73 },
+ { time: '2019-02-06', value: 25.71 },
+ { time: '2019-02-07', value: 25.71 },
+ { time: '2019-02-08', value: 25.72 },
+ { time: '2019-02-11', value: 25.76 },
+ { time: '2019-02-12', value: 25.84 },
+ { time: '2019-02-13', value: 25.85 },
+ { time: '2019-02-14', value: 25.87 },
+ { time: '2019-02-15', value: 25.89 },
+ { time: '2019-02-19', value: 25.9 },
+ { time: '2019-02-20', value: 25.92 },
+ { time: '2019-02-21', value: 25.96 },
+ { time: '2019-02-22', value: 26.0 },
+ { time: '2019-02-25', value: 25.93 },
+ { time: '2019-02-26', value: 25.92 },
+ { time: '2019-02-27', value: 25.67 },
+ { time: '2019-02-28', value: 25.79 },
+ { time: '2019-03-01', value: 25.86 },
+ { time: '2019-03-04', value: 25.94 },
+ { time: '2019-03-05', value: 26.02 },
+ { time: '2019-03-06', value: 25.95 },
+ { time: '2019-03-07', value: 25.89 },
+ { time: '2019-03-08', value: 25.94 },
+ { time: '2019-03-11', value: 25.91 },
+ { time: '2019-03-12', value: 25.92 },
+ { time: '2019-03-13', value: 26.0 },
+ { time: '2019-03-14', value: 26.05 },
+ { time: '2019-03-15', value: 26.11 },
+ { time: '2019-03-18', value: 26.1 },
+ { time: '2019-03-19', value: 25.98 },
+ { time: '2019-03-20', value: 26.11 },
+ { time: '2019-03-21', value: 26.12 },
+ { time: '2019-03-22', value: 25.88 },
+ { time: '2019-03-25', value: 25.85 },
+ { time: '2019-03-26', value: 25.72 },
+ { time: '2019-03-27', value: 25.73 },
+ { time: '2019-03-28', value: 25.8 },
+ { time: '2019-03-29', value: 25.77 },
+ { time: '2019-04-01', value: 26.06 },
+ { time: '2019-04-02', value: 25.93 },
+ { time: '2019-04-03', value: 25.95 },
+ { time: '2019-04-04', value: 26.06 },
+ { time: '2019-04-05', value: 26.16 },
+ { time: '2019-04-08', value: 26.12 },
+ { time: '2019-04-09', value: 26.07 },
+ { time: '2019-04-10', value: 26.13 },
+ { time: '2019-04-11', value: 26.04 },
+ { time: '2019-04-12', value: 26.04 },
+ { time: '2019-04-15', value: 26.05 },
+ { time: '2019-04-16', value: 26.01 },
+ { time: '2019-04-17', value: 26.09 },
+ { time: '2019-04-18', value: 26.0 },
+ { time: '2019-04-22', value: 26.0 },
+ { time: '2019-04-23', value: 26.06 },
+ { time: '2019-04-24', value: 26.0 },
+ { time: '2019-04-25', value: 25.81 },
+ { time: '2019-04-26', value: 25.88 },
+ { time: '2019-04-29', value: 25.91 },
+ { time: '2019-04-30', value: 25.9 },
+ { time: '2019-05-01', value: 26.02 },
+ { time: '2019-05-02', value: 25.97 },
+ { time: '2019-05-03', value: 26.02 },
+ { time: '2019-05-06', value: 26.03 },
+ { time: '2019-05-07', value: 26.04 },
+ { time: '2019-05-08', value: 26.05 },
+ { time: '2019-05-09', value: 26.05 },
+ { time: '2019-05-10', value: 26.08 },
+ { time: '2019-05-13', value: 26.05 },
+ { time: '2019-05-14', value: 26.01 },
+ { time: '2019-05-15', value: 26.03 },
+ { time: '2019-05-16', value: 26.14 },
+ { time: '2019-05-17', value: 26.09 },
+ { time: '2019-05-20', value: 26.01 },
+ { time: '2019-05-21', value: 26.12 },
+ { time: '2019-05-22', value: 26.15 },
+ { time: '2019-05-23', value: 26.18 },
+ { time: '2019-05-24', value: 26.16 },
+ { time: '2019-05-28', value: 26.23 },
+ // hide-end
+];
+
+const weekData = [
+ { time: '2016-07-18', value: 26.1 },
+ // hide-start
+ { time: '2016-07-25', value: 26.19 },
+ { time: '2016-08-01', value: 26.24 },
+ { time: '2016-08-08', value: 26.22 },
+ { time: '2016-08-15', value: 25.98 },
+ { time: '2016-08-22', value: 25.85 },
+ { time: '2016-08-29', value: 25.98 },
+ { time: '2016-09-05', value: 25.71 },
+ { time: '2016-09-12', value: 25.84 },
+ { time: '2016-09-19', value: 25.89 },
+ { time: '2016-09-26', value: 25.65 },
+ { time: '2016-10-03', value: 25.69 },
+ { time: '2016-10-10', value: 25.67 },
+ { time: '2016-10-17', value: 26.11 },
+ { time: '2016-10-24', value: 25.8 },
+ { time: '2016-10-31', value: 25.7 },
+ { time: '2016-11-07', value: 25.4 },
+ { time: '2016-11-14', value: 25.32 },
+ { time: '2016-11-21', value: 25.48 },
+ { time: '2016-11-28', value: 25.08 },
+ { time: '2016-12-05', value: 25.06 },
+ { time: '2016-12-12', value: 25.11 },
+ { time: '2016-12-19', value: 25.34 },
+ { time: '2016-12-26', value: 25.2 },
+ { time: '2017-01-02', value: 25.33 },
+ { time: '2017-01-09', value: 25.56 },
+ { time: '2017-01-16', value: 25.32 },
+ { time: '2017-01-23', value: 25.71 },
+ { time: '2017-01-30', value: 25.85 },
+ { time: '2017-02-06', value: 25.77 },
+ { time: '2017-02-13', value: 25.94 },
+ { time: '2017-02-20', value: 25.67 },
+ { time: '2017-02-27', value: 25.6 },
+ { time: '2017-03-06', value: 25.54 },
+ { time: '2017-03-13', value: 25.84 },
+ { time: '2017-03-20', value: 25.96 },
+ { time: '2017-03-27', value: 25.9 },
+ { time: '2017-04-03', value: 25.97 },
+ { time: '2017-04-10', value: 26.0 },
+ { time: '2017-04-17', value: 26.13 },
+ { time: '2017-04-24', value: 26.02 },
+ { time: '2017-05-01', value: 26.3 },
+ { time: '2017-05-08', value: 26.27 },
+ { time: '2017-05-15', value: 26.24 },
+ { time: '2017-05-22', value: 26.02 },
+ { time: '2017-05-29', value: 26.2 },
+ { time: '2017-06-05', value: 26.12 },
+ { time: '2017-06-12', value: 26.2 },
+ { time: '2017-06-19', value: 26.46 },
+ { time: '2017-06-26', value: 26.39 },
+ { time: '2017-07-03', value: 26.52 },
+ { time: '2017-07-10', value: 26.57 },
+ { time: '2017-07-17', value: 26.65 },
+ { time: '2017-07-24', value: 26.45 },
+ { time: '2017-07-31', value: 26.37 },
+ { time: '2017-08-07', value: 26.13 },
+ { time: '2017-08-14', value: 26.21 },
+ { time: '2017-08-21', value: 26.31 },
+ { time: '2017-08-28', value: 26.33 },
+ { time: '2017-09-04', value: 26.38 },
+ { time: '2017-09-11', value: 26.38 },
+ { time: '2017-09-18', value: 26.5 },
+ { time: '2017-09-25', value: 26.39 },
+ { time: '2017-10-02', value: 25.95 },
+ { time: '2017-10-09', value: 26.15 },
+ { time: '2017-10-16', value: 26.43 },
+ { time: '2017-10-23', value: 26.22 },
+ { time: '2017-10-30', value: 26.14 },
+ { time: '2017-11-06', value: 26.08 },
+ { time: '2017-11-13', value: 26.27 },
+ { time: '2017-11-20', value: 26.3 },
+ { time: '2017-11-27', value: 25.92 },
+ { time: '2017-12-04', value: 26.1 },
+ { time: '2017-12-11', value: 25.88 },
+ { time: '2017-12-18', value: 25.82 },
+ { time: '2017-12-25', value: 25.82 },
+ { time: '2018-01-01', value: 25.81 },
+ { time: '2018-01-08', value: 25.95 },
+ { time: '2018-01-15', value: 26.03 },
+ { time: '2018-01-22', value: 26.04 },
+ { time: '2018-01-29', value: 25.96 },
+ { time: '2018-02-05', value: 25.99 },
+ { time: '2018-02-12', value: 26.0 },
+ { time: '2018-02-19', value: 26.06 },
+ { time: '2018-02-26', value: 25.77 },
+ { time: '2018-03-05', value: 25.81 },
+ { time: '2018-03-12', value: 25.88 },
+ { time: '2018-03-19', value: 25.72 },
+ { time: '2018-03-26', value: 25.75 },
+ { time: '2018-04-02', value: 25.7 },
+ { time: '2018-04-09', value: 25.73 },
+ { time: '2018-04-16', value: 25.74 },
+ { time: '2018-04-23', value: 25.69 },
+ { time: '2018-04-30', value: 25.76 },
+ { time: '2018-05-07', value: 25.89 },
+ { time: '2018-05-14', value: 25.89 },
+ { time: '2018-05-21', value: 26.0 },
+ { time: '2018-05-28', value: 25.79 },
+ { time: '2018-06-04', value: 26.11 },
+ { time: '2018-06-11', value: 26.43 },
+ { time: '2018-06-18', value: 26.3 },
+ { time: '2018-06-25', value: 26.58 },
+ { time: '2018-07-02', value: 26.33 },
+ { time: '2018-07-09', value: 26.33 },
+ { time: '2018-07-16', value: 26.32 },
+ { time: '2018-07-23', value: 26.2 },
+ { time: '2018-07-30', value: 26.03 },
+ { time: '2018-08-06', value: 26.15 },
+ { time: '2018-08-13', value: 26.17 },
+ { time: '2018-08-20', value: 26.28 },
+ { time: '2018-08-27', value: 25.86 },
+ { time: '2018-09-03', value: 25.69 },
+ { time: '2018-09-10', value: 25.69 },
+ { time: '2018-09-17', value: 25.64 },
+ { time: '2018-09-24', value: 25.67 },
+ { time: '2018-10-01', value: 25.55 },
+ { time: '2018-10-08', value: 25.59 },
+ { time: '2018-10-15', value: 26.19 },
+ { time: '2018-10-22', value: 25.81 },
+ { time: '2018-10-29', value: 25.74 },
+ { time: '2018-11-05', value: 25.75 },
+ { time: '2018-11-12', value: 25.75 },
+ { time: '2018-11-19', value: 25.72 },
+ { time: '2018-11-26', value: 25.41 },
+ { time: '2018-12-03', value: 25.39 },
+ { time: '2018-12-10', value: 25.52 },
+ { time: '2018-12-17', value: 25.66 },
+ { time: '2018-12-24', value: 25.68 },
+ { time: '2018-12-31', value: 25.71 },
+ { time: '2019-01-07', value: 25.92 },
+ { time: '2019-01-14', value: 25.6 },
+ { time: '2019-01-21', value: 25.8 },
+ { time: '2019-01-28', value: 25.6 },
+ { time: '2019-02-04', value: 25.72 },
+ { time: '2019-02-11', value: 25.89 },
+ { time: '2019-02-18', value: 26.0 },
+ { time: '2019-02-25', value: 25.86 },
+ { time: '2019-03-04', value: 25.94 },
+ { time: '2019-03-11', value: 26.11 },
+ { time: '2019-03-18', value: 25.88 },
+ { time: '2019-03-25', value: 25.77 },
+ { time: '2019-04-01', value: 26.16 },
+ { time: '2019-04-08', value: 26.04 },
+ { time: '2019-04-15', value: 26.0 },
+ { time: '2019-04-22', value: 25.88 },
+ { time: '2019-04-29', value: 26.02 },
+ { time: '2019-05-06', value: 26.08 },
+ { time: '2019-05-13', value: 26.09 },
+ { time: '2019-05-20', value: 26.16 },
+ { time: '2019-05-27', value: 26.23 },
+ // hide-end
+];
+
+const monthData = [
+ { time: '2006-12-01', value: 25.4 },
+ // hide-start
+ { time: '2007-01-01', value: 25.5 },
+ { time: '2007-02-01', value: 25.11 },
+ { time: '2007-03-01', value: 25.24 },
+ { time: '2007-04-02', value: 25.34 },
+ { time: '2007-05-01', value: 24.82 },
+ { time: '2007-06-01', value: 23.85 },
+ { time: '2007-07-02', value: 23.24 },
+ { time: '2007-08-01', value: 23.05 },
+ { time: '2007-09-03', value: 22.26 },
+ { time: '2007-10-01', value: 22.52 },
+ { time: '2007-11-01', value: 20.84 },
+ { time: '2007-12-03', value: 20.37 },
+ { time: '2008-01-01', value: 23.9 },
+ { time: '2008-02-01', value: 22.58 },
+ { time: '2008-03-03', value: 21.74 },
+ { time: '2008-04-01', value: 22.5 },
+ { time: '2008-05-01', value: 22.38 },
+ { time: '2008-06-02', value: 20.58 },
+ { time: '2008-07-01', value: 20.6 },
+ { time: '2008-08-01', value: 20.82 },
+ { time: '2008-09-01', value: 17.5 },
+ { time: '2008-10-01', value: 17.7 },
+ { time: '2008-11-03', value: 15.52 },
+ { time: '2008-12-01', value: 18.58 },
+ { time: '2009-01-01', value: 15.4 },
+ { time: '2009-02-02', value: 11.68 },
+ { time: '2009-03-02', value: 14.89 },
+ { time: '2009-04-01', value: 16.24 },
+ { time: '2009-05-01', value: 18.33 },
+ { time: '2009-06-01', value: 18.08 },
+ { time: '2009-07-01', value: 20.07 },
+ { time: '2009-08-03', value: 20.35 },
+ { time: '2009-09-01', value: 21.53 },
+ { time: '2009-10-01', value: 21.48 },
+ { time: '2009-11-02', value: 20.28 },
+ { time: '2009-12-01', value: 21.39 },
+ { time: '2010-01-01', value: 22.0 },
+ { time: '2010-02-01', value: 22.31 },
+ { time: '2010-03-01', value: 22.82 },
+ { time: '2010-04-01', value: 22.58 },
+ { time: '2010-05-03', value: 21.02 },
+ { time: '2010-06-01', value: 21.45 },
+ { time: '2010-07-01', value: 22.42 },
+ { time: '2010-08-02', value: 23.61 },
+ { time: '2010-09-01', value: 24.4 },
+ { time: '2010-10-01', value: 24.46 },
+ { time: '2010-11-01', value: 23.64 },
+ { time: '2010-12-01', value: 22.9 },
+ { time: '2011-01-03', value: 23.73 },
+ { time: '2011-02-01', value: 23.52 },
+ { time: '2011-03-01', value: 24.15 },
+ { time: '2011-04-01', value: 24.37 },
+ { time: '2011-05-02', value: 24.4 },
+ { time: '2011-06-01', value: 24.45 },
+ { time: '2011-07-01', value: 24.24 },
+ { time: '2011-08-01', value: 24.0 },
+ { time: '2011-09-01', value: 22.77 },
+ { time: '2011-10-03', value: 24.21 },
+ { time: '2011-11-01', value: 23.4 },
+ { time: '2011-12-01', value: 23.9 },
+ { time: '2012-01-02', value: 24.84 },
+ { time: '2012-02-01', value: 25.04 },
+ { time: '2012-03-01', value: 24.9 },
+ { time: '2012-04-02', value: 25.06 },
+ { time: '2012-05-01', value: 24.63 },
+ { time: '2012-06-01', value: 25.07 },
+ { time: '2012-07-02', value: 25.3 },
+ { time: '2012-08-01', value: 25.08 },
+ { time: '2012-09-03', value: 25.27 },
+ { time: '2012-10-01', value: 25.39 },
+ { time: '2012-11-01', value: 25.06 },
+ { time: '2012-12-03', value: 25.03 },
+ { time: '2013-01-01', value: 25.26 },
+ { time: '2013-02-01', value: 25.2 },
+ { time: '2013-03-01', value: 25.3 },
+ { time: '2013-04-01', value: 25.38 },
+ { time: '2013-05-01', value: 25.22 },
+ { time: '2013-06-03', value: 24.88 },
+ { time: '2013-07-01', value: 24.98 },
+ { time: '2013-08-01', value: 24.6 },
+ { time: '2013-09-02', value: 24.65 },
+ { time: '2013-10-01', value: 24.62 },
+ { time: '2013-11-01', value: 24.65 },
+ { time: '2013-12-02', value: 24.7 },
+ { time: '2014-01-01', value: 24.98 },
+ { time: '2014-02-03', value: 24.95 },
+ { time: '2014-03-03', value: 25.45 },
+ { time: '2014-04-01', value: 25.4 },
+ { time: '2014-05-01', value: 25.51 },
+ { time: '2014-06-02', value: 25.34 },
+ { time: '2014-07-01', value: 25.3 },
+ { time: '2014-08-01', value: 25.36 },
+ { time: '2014-09-01', value: 25.16 },
+ { time: '2014-10-01', value: 25.53 },
+ { time: '2014-11-03', value: 25.4 },
+ { time: '2014-12-01', value: 25.7 },
+ { time: '2015-01-01', value: 25.95 },
+ { time: '2015-02-02', value: 25.81 },
+ { time: '2015-03-02', value: 25.63 },
+ { time: '2015-04-01', value: 25.39 },
+ { time: '2015-05-01', value: 25.62 },
+ { time: '2015-06-01', value: 25.23 },
+ { time: '2015-07-01', value: 25.47 },
+ { time: '2015-08-03', value: 25.18 },
+ { time: '2015-09-01', value: 25.3 },
+ { time: '2015-10-01', value: 25.68 },
+ { time: '2015-11-02', value: 25.63 },
+ { time: '2015-12-01', value: 25.57 },
+ { time: '2016-01-01', value: 25.55 },
+ { time: '2016-02-01', value: 25.05 },
+ { time: '2016-03-01', value: 25.61 },
+ { time: '2016-04-01', value: 25.91 },
+ { time: '2016-05-02', value: 25.84 },
+ { time: '2016-06-01', value: 25.94 },
+ { time: '2016-07-01', value: 26.19 },
+ { time: '2016-08-01', value: 26.06 },
+ { time: '2016-09-01', value: 25.65 },
+ { time: '2016-10-03', value: 25.8 },
+ { time: '2016-11-01', value: 25.06 },
+ { time: '2016-12-01', value: 25.2 },
+ { time: '2017-01-02', value: 25.7 },
+ { time: '2017-02-01', value: 25.78 },
+ { time: '2017-03-01', value: 25.9 },
+ { time: '2017-04-03', value: 26.02 },
+ { time: '2017-05-01', value: 26.02 },
+ { time: '2017-06-01', value: 26.39 },
+ { time: '2017-07-03', value: 26.3 },
+ { time: '2017-08-01', value: 26.14 },
+ { time: '2017-09-01', value: 26.39 },
+ { time: '2017-10-02', value: 26.12 },
+ { time: '2017-11-01', value: 25.81 },
+ { time: '2017-12-01', value: 25.82 },
+ { time: '2018-01-01', value: 26.06 },
+ { time: '2018-02-01', value: 25.78 },
+ { time: '2018-03-01', value: 25.75 },
+ { time: '2018-04-02', value: 25.72 },
+ { time: '2018-05-01', value: 25.75 },
+ { time: '2018-06-01', value: 26.58 },
+ { time: '2018-07-02', value: 26.14 },
+ { time: '2018-08-01', value: 25.86 },
+ { time: '2018-09-03', value: 25.67 },
+ { time: '2018-10-01', value: 25.82 },
+ { time: '2018-11-01', value: 25.41 },
+ { time: '2018-12-03', value: 25.77 },
+ { time: '2019-01-01', value: 25.35 },
+ { time: '2019-02-01', value: 25.79 },
+ { time: '2019-03-01', value: 25.77 },
+ { time: '2019-04-01', value: 25.9 },
+ { time: '2019-05-01', value: 26.23 },
+ // hide-end
+];
+
+const yearData = [
+ { time: '2006-01-02', value: 24.89 },
+ // hide-start
+ { time: '2007-01-01', value: 25.5 },
+ { time: '2008-01-01', value: 23.9 },
+ { time: '2009-01-01', value: 15.4 },
+ { time: '2010-01-01', value: 22.0 },
+ { time: '2011-01-03', value: 23.73 },
+ { time: '2012-01-02', value: 24.84 },
+ { time: '2013-01-01', value: 25.26 },
+ { time: '2014-01-01', value: 24.98 },
+ { time: '2015-01-01', value: 25.95 },
+ { time: '2016-01-01', value: 25.55 },
+ { time: '2017-01-02', value: 25.7 },
+ { time: '2018-01-01', value: 26.06 },
+ { time: '2019-01-01', value: 26.23 },
+ // hide-end
+];
+
+const seriesesData = new Map([
+ ['1D', dayData],
+ ['1W', weekData],
+ ['1M', monthData],
+ ['1Y', yearData],
+]);
+
+// hide-start
+const chartOptions = {
+ layout: {
+ textColor: CHART_TEXT_COLOR,
+ background: { type: 'solid', color: CHART_BACKGROUND_COLOR },
+ },
+ height: 200,
+};
+// hide-end
+const container = document.getElementById('container');
+// remove-line
+/** @type {import('lightweight-charts').IChartApi} */
+const chart = createChart(container, chartOptions);
+
+// remove-start
+// Only needed within demo page
+// eslint-disable-next-line no-undef
+window.addEventListener('resize', () => {
+ chart.applyOptions({ height: 200 });
+});
+// remove-end
+
+const intervalColors = {
+ '1D': LINE_LINE_COLOR,
+ '1W': LINE_LINE2_COLOR,
+ '1M': LINE_LINE3_COLOR,
+ '1Y': LINE_LINE4_COLOR,
+};
+
+const lineSeries = chart.addLineSeries({ color: intervalColors['1D'] });
+
+function setChartInterval(interval) {
+ lineSeries.setData(seriesesData.get(interval));
+ lineSeries.applyOptions({
+ color: intervalColors[interval],
+ });
+ chart.timeScale().fitContent();
+}
+
+setChartInterval('1D');
+
+// hide-start
+const styles = `
+ .buttons-container {
+ display: flex;
+ flex-direction: row;
+ gap: 8px;
+ }
+ .buttons-container button {
+ all: initial;
+ font-family: -apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, Ubuntu,
+ sans-serif;
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 510;
+ line-height: 24px; /* 150% */
+ letter-spacing: -0.32px;
+ padding: 8px 24px;
+ color: rgba(19, 23, 34, 1);
+ background-color: rgba(240, 243, 250, 1);
+ border-radius: 8px;
+ cursor: pointer;
+ }
+
+ .buttons-container button:hover {
+ background-color: rgba(224, 227, 235, 1);
+ }
+
+ .buttons-container button:active {
+ background-color: rgba(209, 212, 220, 1);
+ }
+`;
+
+const stylesElement = document.createElement('style');
+stylesElement.innerHTML = styles;
+container.appendChild(stylesElement);
+
+const buttonsContainer = document.createElement('div');
+buttonsContainer.classList.add('buttons-container');
+// hide-end
+const intervals = ['1D', '1W', '1M', '1Y'];
+intervals.forEach(interval => {
+ const button = document.createElement('button');
+ button.innerText = interval;
+ button.addEventListener('click', () => setChartInterval(interval));
+ buttonsContainer.appendChild(button);
+});
+
+container.appendChild(buttonsContainer);
diff --git a/website/tutorials/demos/range-switcher.mdx b/website/tutorials/demos/range-switcher.mdx
new file mode 100644
index 0000000000..26c5a9dbec
--- /dev/null
+++ b/website/tutorials/demos/range-switcher.mdx
@@ -0,0 +1,38 @@
+---
+title: Range switcher
+sidebar_label: Range switcher
+description: An example of how to switch range (resolution) of the chart
+pagination_prev: null
+pagination_next: null
+keywords:
+ - range
+ - resolution
+---
+
+This example illustrates the creation of a range switcher in Lightweight Charts™
+that allows for changing the data set displayed based on a selected time range
+or interval. Different data sets representing ranges such as daily ('1D'),
+weekly ('1W'), monthly ('1M'), and yearly ('1Y') are prepared.
+
+The chart begins with daily data displayed by default. Then, buttons
+corresponding to each predefined interval are created. When a user clicks one of
+these buttons, the `setChartInterval` function is called with the chosen
+interval, swapping the currently displayed data series with the one
+corresponding to the chosen interval. Consequently, the viewers can quickly
+switch between different timeframes, providing flexible analysis of the data
+trends.
+
+import UsageGuidePartial from '../_usage-guide-partial.mdx';
+import CodeBlock from '@theme/CodeBlock';
+import code from '!!raw-loader!./range-switcher.js';
+
+}
+>
+ {code}
+
diff --git a/website/tutorials/demos/realtime-updates.js b/website/tutorials/demos/realtime-updates.js
new file mode 100644
index 0000000000..85a9925bf8
--- /dev/null
+++ b/website/tutorials/demos/realtime-updates.js
@@ -0,0 +1,176 @@
+// remove-start
+// Lightweight Charts™ Example: Realtime updates
+// https://tradingview.github.io/lightweight-charts/tutorials/demos/realtime-updates
+
+// remove-end
+
+// hide-start
+let randomFactor = 25 + Math.random() * 25;
+const samplePoint = i =>
+ i *
+ (0.5 +
+ Math.sin(i / 1) * 0.2 +
+ Math.sin(i / 2) * 0.4 +
+ Math.sin(i / randomFactor) * 0.8 +
+ Math.sin(i / 50) * 0.5) +
+ 200 +
+ i * 2;
+
+function generateData(
+ numberOfCandles = 500,
+ updatesPerCandle = 5,
+ startAt = 100
+) {
+ const createCandle = (val, time) => ({
+ time,
+ open: val,
+ high: val,
+ low: val,
+ close: val,
+ });
+
+ const updateCandle = (candle, val) => ({
+ time: candle.time,
+ close: val,
+ open: candle.open,
+ low: Math.min(candle.low, val),
+ high: Math.max(candle.high, val),
+ });
+
+ randomFactor = 25 + Math.random() * 25;
+ const date = new Date(Date.UTC(2018, 0, 1, 12, 0, 0, 0));
+ const numberOfPoints = numberOfCandles * updatesPerCandle;
+ const initialData = [];
+ const realtimeUpdates = [];
+ let lastCandle;
+ let previousValue = samplePoint(-1);
+ for (let i = 0; i < numberOfPoints; ++i) {
+ if (i % updatesPerCandle === 0) {
+ date.setUTCDate(date.getUTCDate() + 1);
+ }
+ const time = date.getTime() / 1000;
+ let value = samplePoint(i);
+ const diff = (value - previousValue) * Math.random();
+ value = previousValue + diff;
+ previousValue = value;
+ if (i % updatesPerCandle === 0) {
+ const candle = createCandle(value, time);
+ lastCandle = candle;
+ if (i >= startAt) {
+ realtimeUpdates.push(candle);
+ }
+ } else {
+ const newCandle = updateCandle(lastCandle, value);
+ lastCandle = newCandle;
+ if (i >= startAt) {
+ realtimeUpdates.push(newCandle);
+ } else if ((i + 1) % updatesPerCandle === 0) {
+ initialData.push(newCandle);
+ }
+ }
+ }
+
+ return {
+ initialData,
+ realtimeUpdates,
+ };
+}
+
+const chartOptions = {
+ layout: {
+ textColor: CHART_TEXT_COLOR,
+ background: { type: 'solid', color: CHART_BACKGROUND_COLOR },
+ },
+ height: 200,
+};
+// hide-end
+const container = document.getElementById('container');
+// remove-line
+/** @type {import('lightweight-charts').IChartApi} */
+const chart = createChart(container, chartOptions);
+
+// remove-start
+// Only needed within demo page
+// eslint-disable-next-line no-undef
+window.addEventListener('resize', () => {
+ chart.applyOptions({ height: 200 });
+});
+// remove-end
+
+const series = chart.addCandlestickSeries({
+ upColor: BAR_UP_COLOR,
+ downColor: BAR_DOWN_COLOR,
+ borderVisible: false,
+ wickUpColor: BAR_UP_COLOR,
+ wickDownColor: BAR_DOWN_COLOR,
+});
+
+const data = generateData(2500, 20, 1000);
+
+series.setData(data.initialData);
+chart.timeScale().fitContent();
+chart.timeScale().scrollToPosition(5);
+
+// simulate real-time data
+function* getNextRealtimeUpdate(realtimeData) {
+ for (const dataPoint of realtimeData) {
+ yield dataPoint;
+ }
+ return null;
+}
+const streamingDataProvider = getNextRealtimeUpdate(data.realtimeUpdates);
+
+const intervalID = setInterval(() => {
+ const update = streamingDataProvider.next();
+ if (update.done) {
+ clearInterval(intervalID);
+ return;
+ }
+ series.update(update.value);
+}, 100);
+
+// hide-start
+const styles = `
+ .buttons-container {
+ display: flex;
+ flex-direction: row;
+ gap: 8px;
+ }
+ .buttons-container button {
+ all: initial;
+ font-family: -apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, Ubuntu,
+ sans-serif;
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 510;
+ line-height: 24px; /* 150% */
+ letter-spacing: -0.32px;
+ padding: 8px 24px;
+ color: rgba(19, 23, 34, 1);
+ background-color: rgba(240, 243, 250, 1);
+ border-radius: 8px;
+ cursor: pointer;
+ }
+
+ .buttons-container button:hover {
+ background-color: rgba(224, 227, 235, 1);
+ }
+
+ .buttons-container button:active {
+ background-color: rgba(209, 212, 220, 1);
+ }
+`;
+
+const stylesElement = document.createElement('style');
+stylesElement.innerHTML = styles;
+container.appendChild(stylesElement);
+
+const buttonsContainer = document.createElement('div');
+buttonsContainer.classList.add('buttons-container');
+// hide-end
+const button = document.createElement('button');
+button.innerText = 'Go to realtime';
+button.addEventListener('click', () => chart.timeScale().scrollToRealTime());
+buttonsContainer.appendChild(button);
+
+container.appendChild(buttonsContainer);
diff --git a/website/tutorials/demos/realtime-updates.mdx b/website/tutorials/demos/realtime-updates.mdx
new file mode 100644
index 0000000000..824d5e21c0
--- /dev/null
+++ b/website/tutorials/demos/realtime-updates.mdx
@@ -0,0 +1,36 @@
+---
+title: Realtime updates
+sidebar_label: Realtime updates
+description: An example of how to handle realtime updates
+pagination_prev: null
+pagination_next: null
+keywords:
+ - realtime updates
+---
+
+This sample demonstrates how to mimic real-time updates on a candlestick chart
+with Lightweight Charts™. The chart initially populates with some historical
+data. By using `setInterval` function, the chart then begins to receive
+simulated real-time updates with the usage of `series.update(...)`.
+
+Each real-time update represents a new data point or modifies the latest point,
+providing the illusion of a live, updating chart. If you scroll the chart and
+wish to return to the latest data points then you can use the "Go to realtime"
+button provided which calls the
+[`scrollToRealtime`](/docs/api/interfaces/ITimeScaleApi#scrolltorealtime) method
+on the timescale.
+
+import UsageGuidePartial from '../_usage-guide-partial.mdx';
+import CodeBlock from '@theme/CodeBlock';
+import code from '!!raw-loader!./realtime-updates.js';
+
+}
+>
+ {code}
+
diff --git a/website/tutorials/demos/whitespace.js b/website/tutorials/demos/whitespace.js
new file mode 100644
index 0000000000..dc16bd2eee
--- /dev/null
+++ b/website/tutorials/demos/whitespace.js
@@ -0,0 +1,630 @@
+// remove-start
+// Lightweight Charts™ Example: Whitespace data
+// https://tradingview.github.io/lightweight-charts/tutorials/demos/whitespace
+
+// remove-end
+// hide-start
+const chartOptions = {
+ layout: {
+ textColor: CHART_TEXT_COLOR,
+ background: { type: 'solid', color: CHART_BACKGROUND_COLOR },
+ },
+};
+// hide-end
+const container = document.getElementById('container');
+// remove-line
+/** @type {import('lightweight-charts').IChartApi} */
+const chart = createChart(container, chartOptions);
+
+const candlestickSeries = chart.addCandlestickSeries({
+ upColor: BAR_UP_COLOR,
+ downColor: BAR_DOWN_COLOR,
+ borderVisible: false,
+ wickUpColor: BAR_UP_COLOR,
+ wickDownColor: BAR_DOWN_COLOR,
+});
+
+candlestickSeries.setData([
+ {
+ close: 108.9974612905403,
+ high: 121.20998259466148,
+ low: 96.65376292551082,
+ open: 104.5614412226746,
+ time: { year: 2018, month: 9, day: 22 },
+ },
+ {
+ close: 110.46815600023501,
+ high: 111.3650273696516,
+ low: 82.65543461471314,
+ open: 110.16538466099634,
+ time: { year: 2018, month: 9, day: 23 },
+ },
+ // highlight-start
+ {
+ // Whitespace data, only time is provided
+ time: { year: 2018, month: 9, day: 24 },
+ },
+ // highlight-end
+ {
+ close: 96.80120024431532,
+ high: 101.92074283374939,
+ low: 89.25819769856513,
+ open: 89.25819769856513,
+ time: { year: 2018, month: 9, day: 25 },
+ },
+ // hide-start
+ {
+ close: 94.87113928076117,
+ high: 104.12503365679314,
+ low: 85.42405005240111,
+ open: 104.12503365679314,
+ time: { year: 2018, month: 9, day: 26 },
+ },
+ {
+ close: 100.76494087674855,
+ high: 102.60508417239113,
+ low: 80.76268547064865,
+ open: 92.93299948659636,
+ time: { year: 2018, month: 9, day: 27 },
+ },
+ {
+ close: 101.45855928883597,
+ high: 110.26727325817173,
+ low: 91.10348900896837,
+ open: 93.4362185148034,
+ time: { year: 2018, month: 9, day: 28 },
+ },
+ {
+ close: 91.68871815146144,
+ high: 103.73263644407702,
+ low: 73.5329263610334,
+ open: 92.96467883926464,
+ time: { year: 2018, month: 9, day: 29 },
+ },
+ {
+ time: { year: 2018, month: 9, day: 30 },
+ },
+ {
+ time: { year: 2018, month: 10, day: 1 },
+ },
+ {
+ close: 89.26733004009083,
+ high: 89.26733004009083,
+ low: 76.27851645958225,
+ open: 85.83860311023625,
+ time: { year: 2018, month: 10, day: 2 },
+ },
+ {
+ close: 89.66035763006947,
+ high: 89.66035763006947,
+ low: 67.63677527399729,
+ open: 77.79584976144585,
+ time: { year: 2018, month: 10, day: 3 },
+ },
+ {
+ close: 89.59687813884807,
+ high: 97.05916949817754,
+ low: 72.9823390058379,
+ open: 77.37388423995716,
+ time: { year: 2018, month: 10, day: 4 },
+ },
+ {
+ close: 83.6425403120788,
+ high: 91.72593377862522,
+ low: 65.27208271740422,
+ open: 85.92711686401718,
+ time: { year: 2018, month: 10, day: 5 },
+ },
+ {
+ close: 82.99053929200655,
+ high: 93.4482645370556,
+ low: 65.98920655616067,
+ open: 71.8940788814462,
+ time: { year: 2018, month: 10, day: 6 },
+ },
+ {
+ time: { year: 2018, month: 10, day: 7 },
+ },
+ {
+ time: { year: 2018, month: 10, day: 8 },
+ },
+ {
+ close: 77.60439116240829,
+ high: 83.20908153481327,
+ low: 68.56836128158209,
+ open: 75.83440719565763,
+ time: { year: 2018, month: 10, day: 9 },
+ },
+ {
+ close: 73.8952889203428,
+ high: 81.89987377779327,
+ low: 57.8891283348631,
+ open: 66.51904017615065,
+ time: { year: 2018, month: 10, day: 10 },
+ },
+ {
+ close: 75.08452506029613,
+ high: 75.08452506029613,
+ low: 59.208194031968155,
+ open: 72.14475369395771,
+ time: { year: 2018, month: 10, day: 11 },
+ },
+ {
+ close: 73.08898607472305,
+ high: 73.08898607472305,
+ low: 63.05632280826725,
+ open: 66.93050765469924,
+ time: { year: 2018, month: 10, day: 12 },
+ },
+ {
+ close: 58.993371469509704,
+ high: 73.08872095153116,
+ low: 53.52204433018574,
+ open: 66.12840939191403,
+ time: { year: 2018, month: 10, day: 13 },
+ },
+ {
+ time: { year: 2018, month: 10, day: 14 },
+ },
+ {
+ time: { year: 2018, month: 10, day: 15 },
+ },
+ {
+ close: 60.6852855399041,
+ high: 69.02095441024431,
+ low: 54.00939224622043,
+ open: 64.81901552322648,
+ time: { year: 2018, month: 10, day: 16 },
+ },
+ {
+ close: 57.508820449565285,
+ high: 63.82926565242872,
+ low: 54.07370975509682,
+ open: 54.07370975509682,
+ time: { year: 2018, month: 10, day: 17 },
+ },
+ {
+ close: 51.60796818909221,
+ high: 64.88712939579875,
+ low: 51.60796818909221,
+ open: 53.489226476218434,
+ time: { year: 2018, month: 10, day: 18 },
+ },
+ {
+ close: 55.139520748382864,
+ high: 59.161320710177925,
+ low: 52.228139922762765,
+ open: 52.228139922762765,
+ time: { year: 2018, month: 10, day: 19 },
+ },
+ {
+ close: 47.47868992247237,
+ high: 58.0836625917653,
+ low: 46.43213518526832,
+ open: 47.59258635788406,
+ time: { year: 2018, month: 10, day: 20 },
+ },
+ {
+ time: { year: 2018, month: 10, day: 21 },
+ },
+ {
+ time: { year: 2018, month: 10, day: 22 },
+ },
+ {
+ close: 45.015877277800854,
+ high: 51.2955426978105,
+ low: 40.26534748806228,
+ open: 43.90158660063875,
+ time: { year: 2018, month: 10, day: 23 },
+ },
+ {
+ close: 49.307312373439665,
+ high: 49.93643636637581,
+ low: 43.20705757075934,
+ open: 45.672934511555795,
+ time: { year: 2018, month: 10, day: 24 },
+ },
+ {
+ close: 45.15418019295631,
+ high: 48.59676744409583,
+ low: 37.628047445918504,
+ open: 40.33862825788268,
+ time: { year: 2018, month: 10, day: 25 },
+ },
+ {
+ close: 43.2972018283068,
+ high: 43.2972018283068,
+ low: 36.335943004352245,
+ open: 42.605991542720965,
+ time: { year: 2018, month: 10, day: 26 },
+ },
+ {
+ close: 39.1153643552137,
+ high: 44.311406627923844,
+ low: 35.31457011784855,
+ open: 42.00000202357808,
+ time: { year: 2018, month: 10, day: 27 },
+ },
+ {
+ time: { year: 2018, month: 10, day: 28 },
+ },
+ {
+ time: { year: 2018, month: 10, day: 29 },
+ },
+ {
+ close: 31.378205119641457,
+ high: 37.33501102832602,
+ low: 31.30137162225214,
+ open: 35.651275660713694,
+ time: { year: 2018, month: 10, day: 30 },
+ },
+ {
+ close: 33.574536057730576,
+ high: 37.30152570719593,
+ low: 27.369689193426243,
+ open: 34.330180925654936,
+ time: { year: 2018, month: 10, day: 31 },
+ },
+ {
+ close: 28.91735096504839,
+ high: 32.62196350117741,
+ low: 27.072564759401843,
+ open: 29.398552328599372,
+ time: { year: 2018, month: 11, day: 1 },
+ },
+ {
+ close: 28.44143154172122,
+ high: 31.042019861166594,
+ low: 23.383320830495375,
+ open: 27.275885037308072,
+ time: { year: 2018, month: 11, day: 2 },
+ },
+ {
+ close: 25.92162714418916,
+ high: 30.57604443170622,
+ low: 25.418671641150752,
+ open: 26.775196275924657,
+ time: { year: 2018, month: 11, day: 3 },
+ },
+ {
+ time: { year: 2018, month: 11, day: 4 },
+ },
+ {
+ time: { year: 2018, month: 11, day: 5 },
+ },
+ {
+ close: 31.103861067101136,
+ high: 31.103861067101136,
+ low: 24.39227668420513,
+ open: 28.994785427089838,
+ time: { year: 2018, month: 11, day: 6 },
+ },
+ {
+ close: 28.6308138310307,
+ high: 35.430817482769164,
+ low: 24.069515410358232,
+ open: 27.109407394069084,
+ time: { year: 2018, month: 11, day: 7 },
+ },
+ {
+ close: 29.468889521733466,
+ high: 37.54082586961352,
+ low: 27.90833873315644,
+ open: 33.16901271715577,
+ time: { year: 2018, month: 11, day: 8 },
+ },
+ {
+ close: 35.887823124204296,
+ high: 39.21804237580939,
+ low: 30.951078044055627,
+ open: 30.951078044055627,
+ time: { year: 2018, month: 11, day: 9 },
+ },
+ {
+ close: 34.361137347097575,
+ high: 35.27083445807796,
+ low: 27.825889562160082,
+ open: 34.86040182980157,
+ time: { year: 2018, month: 11, day: 10 },
+ },
+ {
+ time: { year: 2018, month: 11, day: 11 },
+ },
+ {
+ time: { year: 2018, month: 11, day: 12 },
+ },
+ {
+ close: 40.15038854039306,
+ high: 41.50912000191902,
+ low: 32.610637769394444,
+ open: 41.50912000191902,
+ time: { year: 2018, month: 11, day: 13 },
+ },
+ {
+ close: 44.092601065208015,
+ high: 44.092601065208015,
+ low: 37.778306506100726,
+ open: 38.99045898154136,
+ time: { year: 2018, month: 11, day: 14 },
+ },
+ {
+ close: 41.42426637839382,
+ high: 44.72189614841937,
+ low: 41.42426637839382,
+ open: 44.72189614841937,
+ time: { year: 2018, month: 11, day: 15 },
+ },
+ {
+ close: 41.19513795258408,
+ high: 49.08084695291049,
+ low: 36.24282165100056,
+ open: 44.909248500660254,
+ time: { year: 2018, month: 11, day: 16 },
+ },
+ {
+ close: 44.24935708161703,
+ high: 53.028535501565486,
+ low: 40.32056743060158,
+ open: 46.198546801109984,
+ time: { year: 2018, month: 11, day: 17 },
+ },
+ {
+ time: { year: 2018, month: 11, day: 18 },
+ },
+ {
+ time: { year: 2018, month: 11, day: 19 },
+ },
+ {
+ close: 48.79128595974164,
+ high: 52.45087789296739,
+ low: 46.80633073487828,
+ open: 52.45087789296739,
+ time: { year: 2018, month: 11, day: 20 },
+ },
+ {
+ close: 46.97300046781947,
+ high: 55.80689868049132,
+ low: 46.97300046781947,
+ open: 55.80689868049132,
+ time: { year: 2018, month: 11, day: 21 },
+ },
+ {
+ close: 55.58129861112469,
+ high: 55.58129861112469,
+ low: 49.087279242343996,
+ open: 53.16719476594961,
+ time: { year: 2018, month: 11, day: 22 },
+ },
+ {
+ close: 50.058979311730226,
+ high: 62.55333249171461,
+ low: 50.058979311730226,
+ open: 52.628489607588826,
+ time: { year: 2018, month: 11, day: 23 },
+ },
+ {
+ close: 51.193155229085995,
+ high: 59.08949991997865,
+ low: 51.193155229085995,
+ open: 55.352594157474755,
+ time: { year: 2018, month: 11, day: 24 },
+ },
+ {
+ time: { year: 2018, month: 11, day: 25 },
+ },
+ {
+ time: { year: 2018, month: 11, day: 26 },
+ },
+ {
+ close: 57.875350873413225,
+ high: 65.59903214448208,
+ low: 57.875350873413225,
+ open: 62.747405667247016,
+ time: { year: 2018, month: 11, day: 27 },
+ },
+ {
+ close: 61.231150731698605,
+ high: 66.3829902228434,
+ low: 61.231150731698605,
+ open: 65.01028486919516,
+ time: { year: 2018, month: 11, day: 28 },
+ },
+ {
+ close: 64.9698540874806,
+ high: 77.09783903299783,
+ low: 58.455031795628194,
+ open: 58.455031795628194,
+ time: { year: 2018, month: 11, day: 29 },
+ },
+ {
+ close: 72.40978471883417,
+ high: 72.40978471883417,
+ low: 53.05804901549206,
+ open: 65.907298021202,
+ time: { year: 2018, month: 11, day: 30 },
+ },
+ {
+ close: 74.60745731538934,
+ high: 78.33742117000789,
+ low: 54.42067144918077,
+ open: 73.20930147914103,
+ time: { year: 2018, month: 12, day: 1 },
+ },
+ {
+ time: { year: 2018, month: 12, day: 2 },
+ },
+ {
+ time: { year: 2018, month: 12, day: 3 },
+ },
+ {
+ close: 68.23682161095334,
+ high: 77.6723729460968,
+ low: 68.23682161095334,
+ open: 74.39471534484744,
+ time: { year: 2018, month: 12, day: 4 },
+ },
+ {
+ close: 67.45035792565862,
+ high: 83.53728553118547,
+ low: 67.45035792565862,
+ open: 74.79418570077237,
+ time: { year: 2018, month: 12, day: 5 },
+ },
+ {
+ close: 79.26722967320323,
+ high: 79.26722967320323,
+ low: 68.40654829383521,
+ open: 68.40654829383521,
+ time: { year: 2018, month: 12, day: 6 },
+ },
+ {
+ close: 74.95305464030587,
+ high: 81.65884414224071,
+ low: 64.08761481290135,
+ open: 81.65884414224071,
+ time: { year: 2018, month: 12, day: 7 },
+ },
+ {
+ close: 86.30802154315482,
+ high: 91.21953112925642,
+ low: 65.46112304993535,
+ open: 77.82514647663533,
+ time: { year: 2018, month: 12, day: 8 },
+ },
+ {
+ time: { year: 2018, month: 12, day: 9 },
+ },
+ {
+ time: { year: 2018, month: 12, day: 10 },
+ },
+ {
+ close: 79.00109311074502,
+ high: 88.74271558831151,
+ low: 69.00900811612337,
+ open: 88.74271558831151,
+ time: { year: 2018, month: 12, day: 11 },
+ },
+ {
+ close: 80.98779620162513,
+ high: 97.07429720104427,
+ low: 73.76970378608283,
+ open: 88.57288529720472,
+ time: { year: 2018, month: 12, day: 12 },
+ },
+ {
+ close: 87.83619759370346,
+ high: 91.29759438607132,
+ low: 74.00740214639268,
+ open: 87.51853658661781,
+ time: { year: 2018, month: 12, day: 13 },
+ },
+ {
+ close: 87.50134898892377,
+ high: 102.95635188637507,
+ low: 81.0513723219724,
+ open: 94.74009794290814,
+ time: { year: 2018, month: 12, day: 14 },
+ },
+ {
+ close: 92.40159548029843,
+ high: 103.24363067710844,
+ low: 75.44605394394573,
+ open: 95.99903495559444,
+ time: { year: 2018, month: 12, day: 15 },
+ },
+ {
+ time: { year: 2018, month: 12, day: 16 },
+ },
+ {
+ time: { year: 2018, month: 12, day: 17 },
+ },
+ {
+ close: 96.04408990868804,
+ high: 101.02158248010466,
+ low: 94.38544669520195,
+ open: 101.02158248010466,
+ time: { year: 2018, month: 12, day: 18 },
+ },
+ {
+ close: 97.2120815653703,
+ high: 103.35830035963959,
+ low: 78.72594316029567,
+ open: 86.98009038330306,
+ time: { year: 2018, month: 12, day: 19 },
+ },
+ {
+ close: 105.23366706522204,
+ high: 106.56174456393981,
+ low: 94.6658899187065,
+ open: 106.56174456393981,
+ time: { year: 2018, month: 12, day: 20 },
+ },
+ {
+ close: 89.53750874231946,
+ high: 112.27917367188074,
+ low: 87.13586952228918,
+ open: 96.0857985693989,
+ time: { year: 2018, month: 12, day: 21 },
+ },
+ {
+ close: 88.55787263435407,
+ high: 112.62138454627025,
+ low: 80.42783344898223,
+ open: 88.34340019789849,
+ time: { year: 2018, month: 12, day: 22 },
+ },
+ {
+ time: { year: 2018, month: 12, day: 23 },
+ },
+ {
+ time: { year: 2018, month: 12, day: 24 },
+ },
+ {
+ close: 93.38124264891343,
+ high: 93.38124264891343,
+ low: 84.5674956907938,
+ open: 87.54923273867136,
+ time: { year: 2018, month: 12, day: 25 },
+ },
+ {
+ close: 87.88725775527871,
+ high: 90.14253631595105,
+ low: 77.28638555494503,
+ open: 83.93199044032968,
+ time: { year: 2018, month: 12, day: 26 },
+ },
+ {
+ close: 71.77940077333062,
+ high: 89.25710176370582,
+ low: 67.74278646676306,
+ open: 78.5346198695072,
+ time: { year: 2018, month: 12, day: 27 },
+ },
+ {
+ close: 72.08757207606054,
+ high: 79.36518615067514,
+ low: 69.18787486704672,
+ open: 69.18787486704672,
+ time: { year: 2018, month: 12, day: 28 },
+ },
+ {
+ close: 73.87977927793119,
+ high: 77.62891475860795,
+ low: 70.42293039125319,
+ open: 70.42293039125319,
+ time: { year: 2018, month: 12, day: 29 },
+ },
+ {
+ time: { year: 2018, month: 12, day: 30 },
+ },
+ {
+ close: 71.00787215611817,
+ high: 71.00787215611817,
+ low: 57.29681995441558,
+ open: 60.04464694823929,
+ time: { year: 2018, month: 12, day: 31 },
+ },
+ // hide-end
+]);
+
+chart.timeScale().fitContent();
diff --git a/website/tutorials/demos/whitespace.mdx b/website/tutorials/demos/whitespace.mdx
new file mode 100644
index 0000000000..36df3a8a3d
--- /dev/null
+++ b/website/tutorials/demos/whitespace.mdx
@@ -0,0 +1,35 @@
+---
+title: Whitespace data
+sidebar_label: Whitespace data
+description: An example of how to provide whitespace data
+pagination_prev: null
+pagination_next: null
+keywords:
+ - whitespace data
+---
+
+This sample demonstrates the usage of "whitespace data" in Lightweight Charts™.
+Rather than a complete set of pricing information, these data points only
+provide a timestamp. This generates a gap or "whitespace" on the chart,
+signifying periods without trading. An example in the code is `{time: { year:
+2018, month: 9, day: 24 }}`, which results in a visual break in the candlestick
+series.
+
+### API Reference
+
+- [WhitespaceData](/docs/api/interfaces/WhitespaceData)
+
+import UsageGuidePartial from '../_usage-guide-partial.mdx';
+import CodeBlock from '@theme/CodeBlock';
+import code from '!!raw-loader!./whitespace.js';
+
+}
+>
+ {code}
+
diff --git a/website/tutorials/how_to/inverted-price-scale.mdx b/website/tutorials/how_to/inverted-price-scale.mdx
index d4af973445..d203ea1fd6 100644
--- a/website/tutorials/how_to/inverted-price-scale.mdx
+++ b/website/tutorials/how_to/inverted-price-scale.mdx
@@ -42,13 +42,10 @@ You can see a full [working example](#full-example) below.
## Full example
-import UsageGuidePartial from "./_usage-guide-partial.mdx";
-
-
-
+import UsageGuidePartial from "../_usage-guide-partial.mdx";
import CodeBlock from "@theme/CodeBlock";
import code from "!!raw-loader!./inverted-price-scale.js";
-
+}>
{code}
diff --git a/website/tutorials/how_to/legends.mdx b/website/tutorials/how_to/legends.mdx
index fe85e73af6..c9ce2a4125 100644
--- a/website/tutorials/how_to/legends.mdx
+++ b/website/tutorials/how_to/legends.mdx
@@ -63,7 +63,7 @@ Below are a few external resources related to creating and styling html elements
## Examples
-import UsageGuidePartial from "./_usage-guide-partial.mdx";
+import UsageGuidePartial from "../_usage-guide-partial.mdx";
@@ -73,7 +73,7 @@ import CodeBlock from "@theme/CodeBlock";
import codeLegend from "!!raw-loader!./legend.js";
-
+
{codeLegend}
@@ -81,6 +81,6 @@ import codeLegend from "!!raw-loader!./legend.js";
import code3Line from "!!raw-loader!./legend-3line.js";
-
+
{code3Line}
diff --git a/website/tutorials/how_to/price-and-volume.mdx b/website/tutorials/how_to/price-and-volume.mdx
index fe882a3678..cb17990fe3 100644
--- a/website/tutorials/how_to/price-and-volume.mdx
+++ b/website/tutorials/how_to/price-and-volume.mdx
@@ -95,13 +95,10 @@ You can see a full [working example](#full-example) below.
## Full example
-import UsageGuidePartial from "./_usage-guide-partial.mdx";
-
-
-
+import UsageGuidePartial from "../_usage-guide-partial.mdx";
import CodeBlock from "@theme/CodeBlock";
import code from "!!raw-loader!./price-and-volume.js";
-
+}>
{code}
diff --git a/website/tutorials/how_to/price-line.mdx b/website/tutorials/how_to/price-line.mdx
index f04d70a872..95f61516be 100644
--- a/website/tutorials/how_to/price-line.mdx
+++ b/website/tutorials/how_to/price-line.mdx
@@ -54,13 +54,10 @@ You can view the related APIs here:
## Full example
-import UsageGuidePartial from "./_usage-guide-partial.mdx";
-
-
-
+import UsageGuidePartial from "../_usage-guide-partial.mdx";
import CodeBlock from "@theme/CodeBlock";
import code from "!!raw-loader!./price-line.js";
-
+}>
{code}
diff --git a/website/tutorials/how_to/series-markers.mdx b/website/tutorials/how_to/series-markers.mdx
index 96c3830aad..612838d542 100644
--- a/website/tutorials/how_to/series-markers.mdx
+++ b/website/tutorials/how_to/series-markers.mdx
@@ -52,13 +52,10 @@ You can view the related APIs here:
## Full example
-import UsageGuidePartial from "./_usage-guide-partial.mdx";
-
-
-
+import UsageGuidePartial from "../_usage-guide-partial.mdx";
import CodeBlock from "@theme/CodeBlock";
import code from "!!raw-loader!./series-markers.js";
-
+}>
{code}
diff --git a/website/tutorials/how_to/set-crosshair-position.mdx b/website/tutorials/how_to/set-crosshair-position.mdx
index 114aa34c61..c117809020 100644
--- a/website/tutorials/how_to/set-crosshair-position.mdx
+++ b/website/tutorials/how_to/set-crosshair-position.mdx
@@ -35,7 +35,7 @@ import VersionWarningAdmonition from "@site/src/components/VersionWarningAdmonit
## Syncing two charts
-
+
{syncingCode}
@@ -43,7 +43,7 @@ import VersionWarningAdmonition from "@site/src/components/VersionWarningAdmonit
If scrolling and scaling is disabled, then the API can be used to enable a kind of tracking mode without the user having to long-press the screen.
-
+
{trackingCode}
diff --git a/website/tutorials/how_to/tooltips.mdx b/website/tutorials/how_to/tooltips.mdx
index 9dd9a009d8..9d5ff92382 100644
--- a/website/tutorials/how_to/tooltips.mdx
+++ b/website/tutorials/how_to/tooltips.mdx
@@ -97,7 +97,7 @@ Below are a few external resources related to creating and styling html elements
## Examples
-import UsageGuidePartial from "./_usage-guide-partial.mdx";
+import UsageGuidePartial from "../_usage-guide-partial.mdx";
@@ -109,7 +109,7 @@ The floating tooltip in this example will position itself next to the current da
import floatingCode from "!!raw-loader!./tooltip-floating.js";
-
+
{floatingCode}
@@ -119,7 +119,7 @@ The tracking tooltip will position itself next to the user's cursor.
import trackingCode from "!!raw-loader!./tooltip-tracking.js";
-
+
{trackingCode}
@@ -130,6 +130,6 @@ the user's cursor along the horizontal time axis.
import magnifierCode from "!!raw-loader!./tooltip-magnifier.js";
-
+
{magnifierCode}
diff --git a/website/tutorials/how_to/two-price-scales.mdx b/website/tutorials/how_to/two-price-scales.mdx
index 461334efa4..cdbc2b52c5 100644
--- a/website/tutorials/how_to/two-price-scales.mdx
+++ b/website/tutorials/how_to/two-price-scales.mdx
@@ -66,13 +66,10 @@ and view the related APIs here:
## Full example
-import UsageGuidePartial from "./_usage-guide-partial.mdx";
-
-
-
+import UsageGuidePartial from "../_usage-guide-partial.mdx";
import CodeBlock from "@theme/CodeBlock";
import code from "!!raw-loader!./two-price-scales.js";
-
+}>
{code}
diff --git a/website/tutorials/how_to/watermark.mdx b/website/tutorials/how_to/watermark.mdx
index 4ff769b52a..cda9d4f57d 100644
--- a/website/tutorials/how_to/watermark.mdx
+++ b/website/tutorials/how_to/watermark.mdx
@@ -44,7 +44,7 @@ You can see full [working examples](#examples) below.
## Examples
-import UsageGuidePartial from "./_usage-guide-partial.mdx";
+import UsageGuidePartial from "../_usage-guide-partial.mdx";
@@ -54,7 +54,7 @@ import CodeBlock from "@theme/CodeBlock";
import codeSimple from "!!raw-loader!./watermark-simple.js";
-
+
{codeSimple}
@@ -101,6 +101,6 @@ container.appendChild(background);
import codeAdvanced from "!!raw-loader!./watermark-advanced.js";
-
+
{codeAdvanced}
diff --git a/website/tutorials/index.mdx b/website/tutorials/index.mdx
index 270b7ced96..23f792947e 100644
--- a/website/tutorials/index.mdx
+++ b/website/tutorials/index.mdx
@@ -76,14 +76,14 @@ or submit your own.
:::
-## How To / Examples
+## How To
A collection of code examples showcasing the various capabilities of the library, and how to implement common additional features.
import { useDocsSidebar } from "@docusaurus/theme-common/internal";
-export const ExamplesList = () => {
+export const HowToList = () => {
const examplesCategory = useDocsSidebar().items.find(
- item => item.type === "category" && item.label === "How To / Examples"
+ item => item.type === "category" && item.label === "How To"
);
const examples = examplesCategory.items.filter(doc => doc.type === "link");
return (
@@ -97,10 +97,26 @@ export const ExamplesList = () => {
);
};
-
+
-:::tip
+## Examples / Demos
-More examples can be viewed on the [Lightweight Charts™ product page](https://www.tradingview.com/lightweight-charts/).
+A collection of demos showcasing the various capabilities of the library.
-:::
+export const ExamplesList = () => {
+ const examplesCategory = useDocsSidebar().items.find(
+ item => item.type === "category" && item.label === "Examples / Demos"
+ );
+ const examples = examplesCategory.items.filter(doc => doc.type === "link");
+ return (
+
+ );
+};
+
+