12 |
Brushable Area Series
13 |
14 | HINT: Click and drag across the chart. Click once to clear.
15 |
16 |
17 | An area series plot where the styling of individual points can be
18 | changed dynamically without needing to set new data.
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/tests/e2e/graphics/test-cases/initial-options/crosshair-label-color-black.js:
--------------------------------------------------------------------------------
1 | function generateData() {
2 | const res = [];
3 | const time = new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0));
4 | for (let i = 0; i < 500; ++i) {
5 | res.push({
6 | time: time.getTime() / 1000,
7 | value: i,
8 | });
9 |
10 | time.setUTCDate(time.getUTCDate() + 1);
11 | }
12 | return res;
13 | }
14 |
15 | function runTestCase(container) {
16 | const chart = window.chart = LightweightCharts.createChart(container, {
17 | crosshair: {
18 | vertLine: {
19 | labelBackgroundColor: '#000000',
20 | },
21 | horzLine: {
22 | labelBackgroundColor: '#000000',
23 | },
24 | },
25 | layout: { attributionLogo: false },
26 | });
27 |
28 | const mainSeries = chart.addSeries(LightweightCharts.AreaSeries);
29 |
30 | mainSeries.setData(generateData());
31 | }
32 |
--------------------------------------------------------------------------------
/tests/e2e/graphics/test-cases/initial-options/crosshair-label-color-greys.js:
--------------------------------------------------------------------------------
1 | function generateData() {
2 | const res = [];
3 | const time = new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0));
4 | for (let i = 0; i < 500; ++i) {
5 | res.push({
6 | time: time.getTime() / 1000,
7 | value: i,
8 | });
9 |
10 | time.setUTCDate(time.getUTCDate() + 1);
11 | }
12 | return res;
13 | }
14 |
15 | function runTestCase(container) {
16 | const chart = window.chart = LightweightCharts.createChart(container, {
17 | crosshair: {
18 | vertLine: {
19 | labelBackgroundColor: '#222222',
20 | },
21 | horzLine: {
22 | labelBackgroundColor: '#DDDDDD',
23 | },
24 | },
25 | layout: { attributionLogo: false },
26 | });
27 |
28 | const mainSeries = chart.addSeries(LightweightCharts.AreaSeries);
29 |
30 | mainSeries.setData(generateData());
31 | }
32 |
--------------------------------------------------------------------------------
/tests/e2e/graphics/test-cases/initial-options/crosshair-label-color-named.js:
--------------------------------------------------------------------------------
1 | function generateData() {
2 | const res = [];
3 | const time = new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0));
4 | for (let i = 0; i < 500; ++i) {
5 | res.push({
6 | time: time.getTime() / 1000,
7 | value: i,
8 | });
9 |
10 | time.setUTCDate(time.getUTCDate() + 1);
11 | }
12 | return res;
13 | }
14 |
15 | function runTestCase(container) {
16 | const chart = window.chart = LightweightCharts.createChart(container, {
17 | crosshair: {
18 | vertLine: {
19 | labelBackgroundColor: 'orangered',
20 | },
21 | horzLine: {
22 | labelBackgroundColor: 'hotpink',
23 | },
24 | },
25 | layout: { attributionLogo: false },
26 | });
27 |
28 | const mainSeries = chart.addSeries(LightweightCharts.AreaSeries);
29 |
30 | mainSeries.setData(generateData());
31 | }
32 |
--------------------------------------------------------------------------------
/tests/e2e/graphics/test-cases/initial-options/crosshair-label-color-white.js:
--------------------------------------------------------------------------------
1 | function generateData() {
2 | const res = [];
3 | const time = new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0));
4 | for (let i = 0; i < 500; ++i) {
5 | res.push({
6 | time: time.getTime() / 1000,
7 | value: i,
8 | });
9 |
10 | time.setUTCDate(time.getUTCDate() + 1);
11 | }
12 | return res;
13 | }
14 |
15 | function runTestCase(container) {
16 | const chart = window.chart = LightweightCharts.createChart(container, {
17 | crosshair: {
18 | vertLine: {
19 | labelBackgroundColor: '#ffffff',
20 | },
21 | horzLine: {
22 | labelBackgroundColor: '#ffffff',
23 | },
24 | },
25 | layout: { attributionLogo: false },
26 | });
27 |
28 | const mainSeries = chart.addSeries(LightweightCharts.AreaSeries);
29 |
30 | mainSeries.setData(generateData());
31 | }
32 |
--------------------------------------------------------------------------------
/packages/create-lwc-plugin/template-common/src/helpers/dimensions/crosshair-width.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Default grid / crosshair line width in Bitmap sizing
3 | * @param horizontalPixelRatio - horizontal pixel ratio
4 | * @returns default grid / crosshair line width in Bitmap sizing
5 | */
6 | export function gridAndCrosshairBitmapWidth(
7 | horizontalPixelRatio: number
8 | ): number {
9 | return Math.max(1, Math.floor(horizontalPixelRatio));
10 | }
11 |
12 | /**
13 | * Default grid / crosshair line width in Media sizing
14 | * @param horizontalPixelRatio - horizontal pixel ratio
15 | * @returns default grid / crosshair line width in Media sizing
16 | */
17 | export function gridAndCrosshairMediaWidth(
18 | horizontalPixelRatio: number
19 | ): number {
20 | return (
21 | gridAndCrosshairBitmapWidth(horizontalPixelRatio) / horizontalPixelRatio
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/tests/e2e/graphics/test-cases/series/line-with-custom-color-change-color-later.js:
--------------------------------------------------------------------------------
1 | function runTestCase(container) {
2 | const chart = window.chart = LightweightCharts.createChart(container, { layout: { attributionLogo: false } });
3 |
4 | const mainSeries = chart.addSeries(LightweightCharts.LineSeries);
5 |
6 | mainSeries.setData([
7 | { time: 1, value: 1, color: 'red' },
8 | { time: 2, value: 2, color: 'green' },
9 | { time: 3, value: 3 },
10 | { time: 4, value: 3 },
11 | { time: 5, value: 3 },
12 | { time: 6, value: 3 },
13 | { time: 7, value: 3 },
14 | { time: 8, value: 3 },
15 | { time: 9, value: 1, color: 'blue' },
16 | ]);
17 |
18 | chart.timeScale().fitContent();
19 |
20 | return new Promise(resolve => {
21 | setTimeout(() => {
22 | mainSeries.applyOptions({ color: 'red' });
23 | resolve();
24 | }, 300);
25 | });
26 | }
27 |
--------------------------------------------------------------------------------
/tests/e2e/graphics/test-cases/series/no-last-price-animation-on-first-set-data-after-reseting-data.js:
--------------------------------------------------------------------------------
1 | function runTestCase(container) {
2 | const chart = window.chart = LightweightCharts.createChart(container, { layout: { attributionLogo: false } });
3 |
4 | const series = chart.addSeries(LightweightCharts.LineSeries, {
5 | lastPriceAnimation: LightweightCharts.LastPriceAnimationMode.OnDataUpdate,
6 | });
7 | series.setData([
8 | { time: '1990-04-24', value: 0 },
9 | { time: '1990-04-25', value: 1 },
10 | { time: '1990-04-26', value: 2 },
11 | ]);
12 |
13 | series.setData([]);
14 |
15 | series.setData([
16 | { time: '1990-04-24', value: 0 },
17 | { time: '1990-04-25', value: 1 },
18 | { time: '1990-04-26', value: 2 },
19 | { time: '1990-04-28', value: 3 },
20 | ]);
21 |
22 | return new Promise(resolve => setTimeout(resolve, 500));
23 | }
24 |
--------------------------------------------------------------------------------
/tests/e2e/graphics/test-cases/time-scale/set-visible-range.js:
--------------------------------------------------------------------------------
1 | function generateData() {
2 | const res = [];
3 | const time = new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0));
4 | for (let i = 0; i < 1000; ++i) {
5 | res.push({
6 | time: time.getTime() / 1000,
7 | value: i,
8 | });
9 |
10 | time.setUTCDate(time.getUTCDate() + 1);
11 | }
12 | return res;
13 | }
14 |
15 | function runTestCase(container) {
16 | const chart = window.chart = LightweightCharts.createChart(container, { layout: { attributionLogo: false } });
17 |
18 | const mainSeries = chart.addSeries(LightweightCharts.LineSeries);
19 |
20 | mainSeries.setData(generateData());
21 |
22 | chart.timeScale().setVisibleRange({
23 | from: (new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0))).getTime() / 1000,
24 | to: (new Date(Date.UTC(2018, 1, 1, 0, 0, 0, 0))).getTime() / 1000,
25 | });
26 | }
27 |
--------------------------------------------------------------------------------
/tests/type-checks/watermarks.ts:
--------------------------------------------------------------------------------
1 | import { createChart, createImageWatermark, createTextWatermark, LineSeries } from '../../src';
2 |
3 | const chart = createChart('anything');
4 |
5 | const mainSeries = chart.addSeries(LineSeries);
6 | mainSeries.setData([]);
7 |
8 | const imageWatermark = createImageWatermark(chart.panes()[0], '/debug/image.svg', {
9 | alpha: 0.5,
10 | padding: 50,
11 | maxHeight: 400,
12 | maxWidth: 400,
13 | });
14 |
15 | imageWatermark.applyOptions({
16 | alpha: 0.75,
17 | });
18 |
19 | const watermarkPlugin = createTextWatermark(chart.panes()[1], {
20 | horzAlign: 'center',
21 | vertAlign: 'center',
22 | lines: [
23 | {
24 | text: 'Hello',
25 | color: 'rgba(255,0,0,0.5)',
26 | fontSize: 100,
27 | fontStyle: 'bold',
28 | },
29 | ],
30 | });
31 |
32 | watermarkPlugin.applyOptions({
33 | horzAlign: 'left',
34 | });
35 |
--------------------------------------------------------------------------------
/plugin-examples/src/plugins/anchored-text/example/example.ts:
--------------------------------------------------------------------------------
1 | import { createChart, LineSeries } from 'lightweight-charts';
2 | import { generateLineData } from '../../../sample-data';
3 | import { AnchoredText } from '../anchored-text';
4 |
5 | const chart = ((window as unknown as any).chart = createChart('chart', {
6 | autoSize: true
7 | }));
8 |
9 | const lineSeries = chart.addSeries(LineSeries);
10 |
11 | lineSeries.setData(generateLineData());
12 |
13 | const anchoredText = new AnchoredText({
14 | vertAlign: 'middle',
15 | horzAlign: 'middle',
16 | text: 'Anchored Text',
17 | lineHeight: 54,
18 | font: 'italic bold 54px Arial',
19 | color: 'red',
20 | });
21 | lineSeries.attachPrimitive(anchoredText);
22 |
23 | // testing the requestUpdate method
24 | setTimeout(() => {
25 | anchoredText.applyOptions({
26 | text: 'New Text',
27 | });
28 | }, 2000);
29 |
--------------------------------------------------------------------------------
/plugin-examples/src/plugins/image-watermark/example/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
17 |
Image Watermark
18 |
19 | Image watermark which is responsive to the size of the chart pane.
20 | Padding, maximum width, maximum height values can be defined to control
21 | the behaviour of the watermark.
22 |
23 |
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/src/model/bar.ts:
--------------------------------------------------------------------------------
1 | import { Nominal } from '../helpers/nominal';
2 |
3 | import { Coordinate } from './coordinate';
4 |
5 | /**
6 | * Represents a price as a `number`.
7 | */
8 | export type BarPrice = Nominal