when using JSX // we are using a ref callback here since the candles loading most often will take some time ``` -------------------------------- ### Initialize Chart with Candles Data Source: https://github.com/devexperts/dxcharts-lite/blob/master/docs/how-to/multiple-y-scales/index.html Sets up the DXChart Lite instance and loads initial candle data. This is a prerequisite for adding Y-scales. ```javascript import generateCandlesData from '@devexperts/dxcharts-lite/dist/chart/utils/candles-generator.utils'; const container = document.getElementById('chart'); const chart = DXChart.createChart(container); const candles = generateCandlesData({ quantity: 1000, withVolume: true }); chart.setData({ candles }); ``` -------------------------------- ### setTimestampRange Source: https://github.com/devexperts/dxcharts-lite/blob/master/docs/generated/ChartComponent.md Sets the timestamp range of the chart by adjusting the x-axis scale. It takes start and end timestamps, and an optional boolean to force no animation, returning void. ```APIDOC ## setTimestampRange ### Description Sets the timestamp range of the chart by adjusting the x-axis scale. This method allows users to define the visible time period on the chart. ### Method (Not specified, assumed to be a class method) ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body - **start** (number) - The start timestamp of the range. - **end** (number) - The end timestamp of the range. - **forceNoAnimation** (boolean) - Defaults to true. If true, the range change will not be animated. ### Response #### Success Response (200) - void ### Response Example (No example provided) ``` -------------------------------- ### Create Chart Instance Source: https://github.com/devexperts/dxcharts-lite/blob/master/README.md Import and use the createChart method to initialize a new chart instance within a specified HTML element. Ensure the parent container has appropriate dimensions. ```javascript export const createChartInstance = () => { const container = document.getElementById('chart_container'); const chartInstance = DXChart.createChart(container); return chartInstance; }; ``` -------------------------------- ### Initialize Chart and Set Watermark Source: https://github.com/devexperts/dxcharts-lite/blob/master/docs/how-to/colors/index.html Initializes the DXChart and sets custom watermark text and visibility. Ensure the chart container element exists. ```javascript import generateCandlesData from '@devexperts/dxcharts-lite/dist/chart/utils/candles-generator.utils'; const container = document.getElementById('chart'); const chart = DXChart.createChart(container); const candles = generateCandlesData({ quantity: 1000, withVolume: true }); chart.setData({ candles }); chart.watermark.setWaterMarkData({ firstRow: 'My Instrument', secondRow: 'Some description', thirdRow: 'Some very useful message', }); chart.watermark.setWaterMarkVisible(true); ``` -------------------------------- ### Define Color Themes and Set Them Source: https://github.com/devexperts/dxcharts-lite/blob/master/docs/how-to/colors/index.html Define multiple color theme configurations and use event listeners to switch between them when buttons are clicked. Ensure the chart instance and buttons are correctly selected. ```javascript const colorsConfig1 = { chart: { backgroundColor: 'rgba(255, 255, 255, 1)', }, legend: { backgroundColor: 'rgba(255, 255, 255, 1)', }, series: { color1: 'rgba(255, 0, 0, 1)', color2: 'rgba(0, 255, 0, 1)', color3: 'rgba(0, 0, 255, 1)', }, newsTheme: { backgroundColor: 'rgba(100, 217, 245, 1)', }, xAxis: { labelTextColor: 'rgba(128,128,128,1)', backgroundColor: 'rgba(20,20,19,1)', }, yAxis: { labelTextColor: 'rgba(128,128,128,1)', backgroundColor: 'rgba(20,20,19,1)', }, }; const colorsConfig2 = { chart: { backgroundColor: 'rgba(0, 0, 0, 1)', }, legend: { backgroundColor: 'rgba(0, 0, 0, 1)', }, series: { color1: 'rgba(255, 255, 0, 1)', color2: 'rgba(0, 255, 255, 1)', color3: 'rgba(255, 0, 255, 1)', }, newsTheme: { backgroundColor: 'rgba(100, 217, 245, 1)', }, xAxis: { labelTextColor: 'rgba(128,128,128,1)', backgroundColor: 'rgba(20,20,19,1)', }, yAxis: { labelTextColor: 'rgba(128,128,128,1)', backgroundColor: 'rgba(20,20,19,1)', }, }; const colorsConfig3 = { chart: { backgroundColor: 'rgba(255, 255, 255, 1)', }, legend: { backgroundColor: 'rgba(255, 255, 255, 1)', }, series: { color1: 'rgba(192, 192, 192, 1)', color2: 'rgba(128, 128, 128, 1)', color3: 'rgba(128, 0, 128, 1)', }, newsTheme: { backgroundColor: 'rgba(100, 217, 245, 1)', }, xAxis: { labelTextColor: 'rgba(128,128,128,1)', backgroundColor: 'rgba(20,20,19,1)', }, yAxis: { labelTextColor: 'rgba(128,128,128,1)', backgroundColor: 'rgba(20,20,19,1)', }, }; const theme1Btn = document.querySelector('#theme_1'); theme1Btn.addEventListener('click', () => chart.setColors(colorsConfig1)); const theme2Btn = document.querySelector('#theme_2'); theme2Btn.addEventListener('click', () => chart.setColors(colorsConfig2)); const theme3Btn = document.querySelector('#theme_3'); theme3Btn.addEventListener('click', () => chart.setColors(colorsConfig3)); ``` -------------------------------- ### Change Y-Axis Label Mode Dynamically Source: https://github.com/devexperts/dxcharts-lite/blob/master/docs/how-to/custom-y-label/README.md Update the rendering mode of a specific Y-axis label after the chart has been initialized. Use this to change how a label is displayed, for example, from just text to a line with a label. ```javascript chart.yAxis.changeLabelMode('lastPrice', 'line-label'); ``` -------------------------------- ### Create Chart with Default Crosstool Source: https://github.com/devexperts/dxcharts-lite/blob/master/docs/how-to/crosstool/index.html This snippet demonstrates how to create a chart and configure its default crosstool component with specific label formatting and padding. It also shows how to toggle magnet mode and visibility for the crosstool. ```javascript import generateCandlesData from '@devexperts/dxcharts-lite/dist/chart/utils/candles-generator.utils'; // first chart with default crosstool const container_1 = document.getElementById('chart_1'); const chart = DXChart.createChart(container_1, { components: { crossTool: { type: 'none', xAxisLabelFormat: [{ format: 'dd.MM HH:mm' }], xLabel: { padding: { top: 4, bottom: 4, right: 8, left: 8 }, margin: { top: 0 }, }, }, }, }); const candles = generateCandlesData({ quantity: 1000 }); chart.setData({ candles }); let magnet = false; const crosshairMagnetBtn = document.querySelector('#crosstool-magnet-btn'); crosshairMagnetBtn.addEventListener('click', () => { magnet = !magnet; chart.crossToolComponent.setMagnetTarget(magnet ? 'OHLC' : 'none'); crosshairMagnetBtn.textContent = magnet ? 'Disable magnet mode' : 'Enable magnet mode'; }); let visible = false; const crosshairOnOffBtn = document.querySelector('#crosstool-onoff-btn'); crosshairOnOffBtn.addEventListener('click', () => { visible = !visible; chart.crossToolComponent.setVisible(visible); crosshairOnOffBtn.textContent = visible ? 'Disable crosstool' : 'Enable crosstool'; }); ``` -------------------------------- ### doActivate Source: https://github.com/devexperts/dxcharts-lite/blob/master/docs/generated/SnapshotComponent.md Implements the doActivate method for the SnapshotComponent. ```APIDOC ## doActivate ### Description Implements the doActivate method. ### Method N/A (Method signature provided) ### Parameters None ### Returns `void` ``` -------------------------------- ### Set Custom X-Axis Scale by Candle Units Source: https://github.com/devexperts/dxcharts-lite/blob/master/docs/how-to/x-scale/README.md Sets a custom viewport for the chart by specifying the start and end points in terms of candle units. This is useful for navigating to a specific range of data points represented as candles. ```javascript chart.data.setXScale(0, 20); ``` -------------------------------- ### Configure Last Price Label Mode and Appearance Source: https://github.com/devexperts/dxcharts-lite/blob/master/docs/how-to/y-last-price-label/index.html Set up the y-axis to display the last price with a 'line-label' mode and 'badge' appearance. This configuration is applied when initializing the chart. ```javascript import generateCandlesData from '@devexperts/dxcharts-lite/dist/chart/utils/candles-generator.utils'; const config = { components: { yAxis: { labels: { descriptions: true, settings: { lastPrice: { mode: 'line-label', type: 'badge', }, }, }, }, }, }; const node = document.querySelector('#root'); const chart = DXChart.createChart(node, config); const candles = generateCandlesData({ quantity: 1000, withVolume: true }); chart.setData({ candles }); chart.chartModel.mainCandleSeries.instrument = { symbol: 'GGLMZN' }; ``` -------------------------------- ### Configure Y-Axis Label Settings Source: https://github.com/devexperts/dxcharts-lite/blob/master/docs/how-to/custom-y-label/README.md Set initial configurations for Y-axis labels, including description visibility and specific settings for the 'lastPrice' label like mode and type. ```javascript const config = { components: { yAxis: { labels: { descriptions: true, settings: { lastPrice: { mode: 'line-label', type: 'badge', }, }, }, }, }, }; //... chart = DXChart.createChart(node, config); ``` -------------------------------- ### Generate and Set Mock Candle Data Source: https://github.com/devexperts/dxcharts-lite/blob/master/README.md Import and utilize the generateCandlesData utility to create mock data and then set it to the chart instance. This is useful for initial visualization and testing. ```javascript export const generateMockData = () => { const candles = generateCandlesData(); chart.setData({ candles }); }; ``` -------------------------------- ### Create and Render a Basic Candlestick Chart Source: https://github.com/devexperts/dxcharts-lite/blob/master/docs/how-to/basic-example/index.html Initializes a DXCharts Lite chart instance, generates candlestick data, and sets it for rendering. Ensure an HTML element with the ID 'dxcharts_lite' exists in your DOM. ```javascript import generateCandlesData from '@devexperts/dxcharts-lite/dist/chart/utils/candles-generator.utils'; const container = document.getElementById('dxcharts_lite'); const chartInstance = DXChart.createChart(container); const candles = generateCandlesData({ quantity: 1000, withVolume: true }); chartInstance.setData({ candles }); ``` -------------------------------- ### Initialize Chart and Set Data Source: https://github.com/devexperts/dxcharts-lite/blob/master/docs/how-to/x-scale/index.html Initializes the DXChart and sets candle data. This is a prerequisite for most scaling operations. ```javascript import generateCandlesData from '@devexperts/dxcharts-lite/dist/chart/utils/candles-generator.utils'; const container = document.getElementById('chart'); const chart = DXChart.createChart(container); const candles = generateCandlesData({ quantity: 1000, withVolume: true }); chart.setData({ candles }); ``` -------------------------------- ### Implement Custom Data Series Drawer Source: https://github.com/devexperts/dxcharts-lite/blob/master/docs/how-to/custom-data-series-drawer/README.md Implement the `draw` method to create a custom drawer for data series. This method receives the canvas context, all points, the data series model, and hit test configuration. Use `hitTestDrawerConfig.color` when available for hit testing. ```javascript const myDrawer = { draw( ctx, // CanvasRenderingContext2D allPoints, // VisualSeriesPoint[][] model, // DataSeriesModel - can be also CandleSeriesModel - in this case points have all candle fields hitTestDrawerConfig, // HTSeriesDrawerConfig ) { allPoints.forEach((points, idx) => { const allPoints = points.flat(); for (let i = 0; i < allPoints.length; i++) { const prevPoint = allPoints[i - 1]; const point = allPoints[i]; const x = point.x(model.view); const y = point.y(model.view); if (point.close > prevPoint?.close) { // it is not necessary to save and restore when modifying the context state // - it is done by DataSeriesDrawer, which calls draw() method of specific data series drawer ctx.fillStyle = hitTestDrawerConfig.color ?? 'green'; ctx.fillText('⬆', x, y); } else { // hitTestDrawerConfig.color is defined when the drawer is drawn by hit test drawer // in order to work with hit test correctly you have to use hitTestDrawerConfig.color if it's defined ctx.fillStyle = hitTestDrawerConfig.color ?? 'red'; ctx.fillText('⬇', x, y); } } }); }, }; ``` -------------------------------- ### doActivate Source: https://github.com/devexperts/dxcharts-lite/blob/master/docs/generated/ChartComponent.md Overrides the doActivate method of the parent class and calls it. This method does not take any parameters and does not return anything. ```APIDOC ## doActivate ### Description This method overrides the doActivate method of the parent class and calls it. It does not take any parameters and does not return anything. ### Method (Not specified, assumed to be a class method) ### Parameters None ### Response #### Success Response - void ### Response Example (No example provided) ``` -------------------------------- ### makeVisualCandles Source: https://github.com/devexperts/dxcharts-lite/blob/master/docs/generated/NavigationMapComponent.md Generates an array of visual candles based on the chart data, calculating maximum and minimum values and mapping them to canvas bounds. ```APIDOC ## makeVisualCandles ### Description This function generates an array of visual candles based on the data provided by the chartModel. It calculates the maximum and minimum values of the candles and maps them to the canvas bounds. ### Method `makeVisualCandles` ### Parameters None ### Returns `[number, number][]` - An array of visual candles. ``` -------------------------------- ### Clone Repository Source: https://github.com/devexperts/dxcharts-lite/blob/master/tests/memory-leak/README.md Clone the repository to your local machine to access the memory leak tests. ```shell git clone ``` -------------------------------- ### createGridComponent Source: https://github.com/devexperts/dxcharts-lite/blob/master/docs/generated/PaneComponent.md Creates a new GridComponent instance with the provided parameters. ```APIDOC ## createGridComponent ### Description Creates a new GridComponent instance with the provided parameters. ### Method `createGridComponent` ### Parameters #### Path Parameters - **uuid** (string) - Required - The unique identifier of the pane. - **extentIdx** (number) - Required - **scale** (ScaleModel) - Required - The scale model used to calculate the scale of the grid. - **yAxisState** (YAxisConfig) - Required - y Axis Config - **yAxisLabelsGetter** (() => NumericAxisLabel[]) - Required - **yAxisBaselineGetter** (() => number) - Required ### Returns `GridComponent` ``` -------------------------------- ### Create Chart with Custom Crosstool Drawer Source: https://github.com/devexperts/dxcharts-lite/blob/master/docs/how-to/crosstool/index.html This snippet shows how to create a chart with a custom crosstool drawer, enabling specific magnet targeting and initial visibility settings. It also registers the custom drawer for the 'cross-and-labels' type. ```javascript import generateCandlesData from '@devexperts/dxcharts-lite/dist/chart/utils/candles-generator.utils'; import CustomCrosstoolDrawer from './drawer.js'; // second chart with custom crosstool const container_2 = document.getElementById('chart_2'); const chart2 = DXChart.createChart(container_2, { components: { crossTool: { type: 'none', xAxisLabelFormat: [{ format: 'dd.MM HH:mm' }], xLabel: { padding: { top: 4, bottom: 4, right: 8, left: 8 }, margin: { top: 0 }, }, magnetTarget: 'C', visible: false, type: 'cross-and-labels', }, }, }); chart2.chartComponent.setMainSeries({ candles }); chart2.crossToolComponent.registerCrossToolTypeDrawer( 'cross-and-labels', new CustomCrosstoolDrawer( chart2.config, chart2.bounds, chart2.chartModel, chart2.paneManager, ), ); ``` -------------------------------- ### Render React App Source: https://github.com/devexperts/dxcharts-lite/blob/master/docs/how-to/react-integration/README.md This snippet shows the final step of rendering the React application, which includes the chart, into the DOM. ```javascript ReactDOM.createRoot(document.querySelector('#root')).render(React.createElement(App)); ``` -------------------------------- ### doActivate Source: https://github.com/devexperts/dxcharts-lite/blob/master/docs/generated/PaneComponent.md Activates the canvas bounds container and recalculates the zoom Y of the scale model. ```APIDOC ## doActivate ### Description Method that activates the canvas bounds container and recalculates the zoom Y of the scale model. ### Method `doActivate` ### Returns `void` ``` -------------------------------- ### setHighlights Source: https://github.com/devexperts/dxcharts-lite/blob/master/docs/generated/HighlightsComponent.md Sets the highlights of the highlights model with a provided array of Highlight objects. ```APIDOC ## setHighlights ### Description Sets the highlights of the highlights model. ### Method `setHighlights` ### Parameters #### Request Body - **highlights** (Highlight[]) - Required - An array of Highlight objects to be set as the highlights of the model. ### Request Example ```json { "highlights": [ { "id": "string", "type": "string", "data": {}, "style": {} } ] } ``` ### Returns `void` ``` -------------------------------- ### createExtentComponent Source: https://github.com/devexperts/dxcharts-lite/blob/master/docs/generated/PaneComponent.md Creates a new YExtentComponent instance. ```APIDOC ## createExtentComponent ### Description Creates a new YExtentComponent instance. ### Method `createExtentComponent` ### Parameters #### Path Parameters - **options** (AtLeastOne) - Required ### Returns `YExtentComponent` ``` -------------------------------- ### Render Chart with Series Data Source: https://github.com/devexperts/dxcharts-lite/blob/master/docs/how-to/react-integration/README.md Once the chart instance is ready and candle data is available, use this snippet to set the chart's data. ```javascript React.useEffect(() => { chart && chart.setData({ candles, }); }, [candles, chart]); ``` -------------------------------- ### Custom Drawer Implementation Source: https://github.com/devexperts/dxcharts-lite/blob/master/docs/how-to/custom-drawer/index.html This snippet demonstrates how to create a custom drawer for DXCharts Lite. It draws a line and a circle on the chart canvas, clipping the drawing to the chart's bounds. Ensure the chart and necessary data are initialized before adding the drawer. ```javascript import { clipToBounds } from '@devexperts/dxcharts-lite/dist/chart/utils/canvas/canvas-drawing-functions.utils'; import generateCandlesData from '@devexperts/dxcharts-lite/dist/chart/utils/candles-generator.utils'; const container = document.getElementById('chart'); const chart = DXChart.createChart(container); const candles = generateCandlesData({ quantity: 1000, withVolume: true }); chart.setData({ candles }); const customDrawer = { draw() { const ctx = chart.dynamicObjectsCanvasModel.ctx; const series = chart.chartModel.mainCandleSeries.getSeriesInViewport().flat(); const lastCandle = series[series.length - 1]; const startCandle = series[0]; // to get actual coordinates for canvas we need to use scaleModel, // since actual coordinates in pixels depends on current zoom level and viewport (scale) const [x1, y1] = [startCandle.x(chart.scale), startCandle.y(chart.scale)]; const [x2, y2] = [lastCandle.x(chart.scale), lastCandle.y(chart.scale)]; // below we do some manipulations which modifies ctx state, so we need to save it and restore after drawing ctx.save(); const bounds = chart.bounds.getBounds('PANE_CHART'); // clip drawing bounds to chart pane, so it will not be drawn outside of chart pane (on y-axis, for example) clipToBounds(ctx, bounds); ctx.beginPath(); ctx.lineWidth = 3; ctx.strokeStyle = 'orange'; ctx.fillStyle = 'orange'; // draw line ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke(); // draw circle on the end of the line ctx.beginPath(); ctx.arc(x2, y2, 5, 0, 2 * Math.PI); ctx.fill(); // restore ctx state ctx.restore(); }, // this methods should return ids of canvases which this drawers uses getCanvasIds() { return [chart.dynamicObjectsCanvasModel.canvasId]; }, }; chart.drawingManager.addDrawerAfter(customDrawer, 'arrowTrendDrawer', 'DYNAMIC_OBJECTS'); ``` -------------------------------- ### Update Chart Colors Dynamically Source: https://github.com/devexperts/dxcharts-lite/blob/master/docs/how-to/colors/README.md Apply new color configurations to an existing chart instance on the fly using the `setColors` method. This allows for real-time theme changes without re-initializing the chart. ```javascript chartInstance.setColors(colors); ``` -------------------------------- ### Run Codesandbox Generator Source: https://github.com/devexperts/dxcharts-lite/blob/master/docs/codesandbox/README.md Execute the Codesandbox generator script using ts-node, providing the path to the documentation folder as an argument. ```bash ts-node ./cli/run.ts ``` -------------------------------- ### registerCrossToolTypeDrawer Source: https://github.com/devexperts/dxcharts-lite/blob/master/docs/generated/CrossToolComponent.md Allows registration of custom drawer implementations for specific cross tool types. ```APIDOC ## registerCrossToolTypeDrawer ### Description Adds a new drawer type for cross tool, so you can add your own implementation of cross tool (or override existing). ### Method registerCrossToolTypeDrawer ### Parameters #### Query Parameters - **drawerName** (string) - Required - An unique drawer type name. - **drawerImpl** (CrossToolTypeDrawer) - Required - CrossToolTypeDrawer object. ``` -------------------------------- ### Generate Mock Candles Data Source: https://github.com/devexperts/dxcharts-lite/blob/master/docs/how-to/react-integration/README.md Use this snippet to generate mock candle data for testing. This function is typically not needed in production. ```javascript const [candles, setCandles] = React.useState([]); //... React.useEffect(() => { setCandles(DXChart.generateCandlesData({ quantity: 1000, withVolume: true })); }, []); ``` -------------------------------- ### setFormatsForLabelsConfig Source: https://github.com/devexperts/dxcharts-lite/blob/master/docs/generated/XAxisComponent.md Sets a new configuration for formatting x-axis labels based on duration and weight. ```APIDOC ## setFormatsForLabelsConfig ### Description Set new config for x labels formatting. ### Method N/A (Method signature) ### Parameters #### Request Body - **newFormatsByWeightMap** (Record) - Required - An object mapping time format durations to their string representations. ### Returns `void` ### Example ```javascript const formats = { 'minute': 'HH:mm', 'hour': 'HH:mm', 'day': 'dd MMM' }; xAxisComponent.setFormatsForLabelsConfig(formats); ``` ``` -------------------------------- ### registerXAxisLabelsProvider Source: https://github.com/devexperts/dxcharts-lite/blob/master/docs/generated/XAxisComponent.md Allows for the addition of custom label providers to the x-axis, enabling the display of additional labels, such as those for drawings. ```APIDOC ## registerXAxisLabelsProvider ### Description You can add a custom labels provider for additional labels on XAxis (like for drawings). ### Method N/A (Method signature) ### Parameters #### Request Body - **provider** (XAxisLabelsProvider) - Required - The custom labels provider to register. ### Returns `void` ### Example ```javascript const customProvider = { /* implementation of XAxisLabelsProvider */ }; xAxisComponent.registerXAxisLabelsProvider(customProvider); ``` ``` -------------------------------- ### Configure Volume Component Properties Source: https://github.com/devexperts/dxcharts-lite/blob/master/docs/generated/FullChartConfig.md Set properties for the volume component, such as visibility, display mode, fill color, and bar spacing. ```typescript { visible: true, showSeparately: false, volumeFillColor: "#4CAF50", valueLines: 1, barCapSize: 0.5, volumeBarSpace: 0.2 } ``` -------------------------------- ### setMainSeries Source: https://github.com/devexperts/dxcharts-lite/blob/master/docs/generated/ChartComponent.md Used to set the main series to the chart. ```APIDOC ## setMainSeries ### Description Used to set the main series to chart. ### Method `setMainSeries(series: CandleSeries)` ### Parameters #### Path Parameters - `series` (CandleSeries) ### Returns `void` ``` -------------------------------- ### Configure High/Low Label Properties Source: https://github.com/devexperts/dxcharts-lite/blob/master/docs/generated/FullChartConfig.md Control the visibility, font, and prefix for high and low price labels on the chart. The prefix can be customized for both high and low values. ```javascript const chartConfig = { components: { highLow: { visible: true, font: '12px Arial', prefix: { high: 'H: ', low: 'L: ' } } } }; ``` -------------------------------- ### Run Memory Leak Tests Source: https://github.com/devexperts/dxcharts-lite/blob/master/tests/memory-leak/README.md Execute the memory leak tests using the provided shell script. This command initiates the Mocha and Puppeteer test suite. ```shell sh ./tests/memory-leak/run-memory-leak-test.sh ``` -------------------------------- ### Markdown Placeholder for Codesandbox Link Source: https://github.com/devexperts/dxcharts-lite/blob/master/docs/codesandbox/README.md Use these HTML comments and Markdown link syntax in your .md files to indicate where the generated Codesandbox URL should be inserted. The generator will replace the placeholder URL with the actual generated link. ```markdown [live example](codesandbox_url) ``` ```markdown [live example](https://codesandbox.io/s/2jz2df) ``` -------------------------------- ### toY Source: https://github.com/devexperts/dxcharts-lite/blob/master/docs/generated/PaneComponent.md Converts a price value to a Y-coordinate. ```APIDOC ## toY ### Description Converts a price value to a Y-coordinate. ### Method `toY` ### Parameters #### Path Parameters - **price** (number) - Description: The price value to convert. ``` -------------------------------- ### prependCandles Source: https://github.com/devexperts/dxcharts-lite/blob/master/docs/generated/ChartComponent.md Adds new candles to the beginning of an existing series, primarily used for lazy loading. ```APIDOC ## prependCandles ### Description Adds a new array of candles to the existing target array at the beginning. This is commonly used for lazy loading historical data. ### Method `prependCandles` ### Parameters #### Path Parameters - **target** (Candle[]) - Required - The initial array of candles. - **prependUpdate** (Candle[]) - Optional - An additional array of candles to be added to the target array. ### Response #### Success Response (void) This method does not return any value. ``` -------------------------------- ### createSnapshot Source: https://github.com/devexperts/dxcharts-lite/blob/master/docs/generated/SnapshotComponent.md Creates a snapshot of the canvas and returns it as a Promise of a Blob object. An optional callback can be provided for custom drawing before the snapshot is taken. ```APIDOC ## createSnapshot ### Description Creates a snapshot of the canvas and returns it as a Promise of Blob object. ### Method N/A (Method signature provided) ### Parameters #### Request Body - **userDrawCallback** (function) - Optional - A callback function that takes a CanvasRenderingContext2D object as a parameter and allows the user to draw on the canvas before taking the snapshot. ### Returns #### Success Response - **Promise** - A Promise that resolves with the snapshot as a Blob object. ``` -------------------------------- ### setAllSeries Source: https://github.com/devexperts/dxcharts-lite/blob/master/docs/generated/ChartComponent.md Sets the main and secondary series in one bulk operation. Reindexing and visual rerender happen at the same time. ```APIDOC ## setAllSeries ### Description Sets the main and secondary series in one bulk operation. Reindexing and visual rerender happens at the same time. ### Method `setAllSeries(mainSeries: CandleSeries, secondarySeries: CandleSeries[])` ### Parameters #### Path Parameters - `mainSeries` (CandleSeries) - `secondarySeries` (CandleSeries[]) ### Returns `void` ``` -------------------------------- ### Set All Candle Series Source: https://github.com/devexperts/dxcharts-lite/blob/master/docs/how-to/set-and-update-candles/README.md Use `setAllSeries` to configure both the main series and multiple secondary series simultaneously. It accepts a main series object and an array of secondary series objects. ```js chart.data.setAllSeries( { candles: mainCandlesData, instrument: { symbol: mainInstrumentName, description: mainInstrumentDescription, }, }, [ { candles: firstSecondaryCandlesData, instrument: { symbol: firstSecondaryInstrumentName, description: firstSecondaryInstrumentDescription, }, }, { candles: secondarySecondaryCandlesData, instrument: { symbol: secondarySecondaryInstrumentName, description: secondarySecondaryInstrumentDescription, }, }, ], ); ``` -------------------------------- ### Set Main Candle Series Source: https://github.com/devexperts/dxcharts-lite/blob/master/docs/how-to/set-and-update-candles/README.md Use `setMainSeries` to render the primary set of candles on the chart. This method requires a `CandleSeries` object. ```js chart.setData({ candles: candlesData, }); ``` -------------------------------- ### updateAllSeries Source: https://github.com/devexperts/dxcharts-lite/blob/master/docs/generated/ChartComponent.md Updates the main and secondary series in one bulk operation. Reindexing and visual rerender happen at the same time. ```APIDOC ## updateAllSeries ### Description Updates the main and secondary series in one bulk operation. Reindexing and visual rerender happens at the same time. ### Method `updateAllSeries(mainSeries: CandleSeries, secondarySeries: CandleSeries[])` ### Parameters #### Path Parameters - `mainSeries` (CandleSeries) - `secondarySeries` (CandleSeries[]) ### Returns `void` ``` -------------------------------- ### createDataSeries Source: https://github.com/devexperts/dxcharts-lite/blob/master/docs/generated/PaneComponent.md Creates a new DataSeriesModel object, which can then be configured and added to the chart. ```APIDOC ## createDataSeries ### Description Creates a new DataSeriesModel object. ### Method Not applicable (SDK method) ### Parameters None ### Response #### Success Response - **DataSeriesModel** - The newly created DataSeriesModel object. ``` -------------------------------- ### registerVolumeColorResolver Source: https://github.com/devexperts/dxcharts-lite/blob/master/docs/generated/VolumesComponent.md Allows custom color resolution for volumes based on chart type. ```APIDOC ## registerVolumeColorResolver ### Description You can use this method to determine volumes' color for specified chart type. ### Method registerVolumeColorResolver ### Parameters #### Query Parameters - **chartType** (keyof BarTypes) - Required - The type of the chart for which the resolver is registered. - **resolver** (VolumeColorResolver) - Required - The function to resolve the volume color. ### Returns void ``` -------------------------------- ### Configure Event Icons with SVG Source: https://github.com/devexperts/dxcharts-lite/blob/master/docs/generated/FullChartConfig.md Icons for chart events can be configured using SVG strings. This allows for custom visual representation of events like earnings, dividends, splits, and conference calls. ```javascript const chartConfig = { components: { events: { icons: { earnings: '', dividends: '', splits: '', 'conference-calls': '' } } } }; ``` -------------------------------- ### doActivate Source: https://github.com/devexperts/dxcharts-lite/blob/master/docs/generated/YAxisComponent.md Activates a protected feature. This method is used to activate a protected feature. ```APIDOC ## doActivate ### Description Activates a protected feature. This method is used to activate a protected feature. ### Method Not specified ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ``` -------------------------------- ### doActivate Source: https://github.com/devexperts/dxcharts-lite/blob/master/docs/generated/NavigationMapComponent.md Activates the chart by subscribing to relevant observables. It also handles visual updates based on viewport changes and fires a draw event if the navigation map is visible. ```APIDOC ## doActivate ### Description Method to activate the chart. It subscribes to the observables of the chartModel and canvasBoundsContainer. It also subscribes to the xChanged observable of the chartModel's scaleModel and filters the values to check if the previous viewport had no-candles area and current viewport contains only candles or if the current viewport has no-candles area. If the navigationMap component is visible, it makes visual candles and fires the draw event of the canvasModel. ### Method `doActivate` ### Parameters None ### Returns `void` ``` -------------------------------- ### Default Drawer Types Source: https://github.com/devexperts/dxcharts-lite/blob/master/docs/how-to/custom-drawer/README.md A list of default drawer types available in the chart, useful for specifying drawing order. ```javascript [ 'MAIN_BACKGROUND', 'MAIN_CLEAR', 'HIT_TEST_CLEAR', 'YAXIS_CLEAR', 'SERIES_CLEAR', 'OVER_SERIES_CLEAR', 'HIT_TEST_DRAWINGS', 'GRID', 'VOLUMES', 'X_AXIS', 'Y_AXIS', 'HIGH_LOW', 'DYNAMIC_OBJECTS', 'N_MAP_CHART', 'PL_CHART', 'WATERMARK', 'EMPTY_CHART', 'OFFLINE_CHART', 'LABELS', 'EVENTS', 'HIT_TEST_EVENTS', 'ZERO_LINE', 'PL_ZERO_LINE_BACKGROUND', 'CROSS_TOOL', ]; ``` -------------------------------- ### observeHighlightsUpdated Source: https://github.com/devexperts/dxcharts-lite/blob/master/docs/generated/HighlightsComponent.md Provides an observable that emits an array of Highlight objects whenever the highlights are updated. ```APIDOC ## observeHighlightsUpdated ### Description Returns an observable that emits when the highlights are updated. ### Method `observeHighlightsUpdated` ### Parameters None ### Returns `Observable` - An observable stream of Highlight arrays. ### Response Example ```json [ { "id": "string", "type": "string", "data": {}, "style": {} } ] ``` ```