Unlisted page

This page is unlisted. Search engines will not index it, and only users having a direct link can access it.

Q&A

This page contains frequently asked questions and answers about DXcharts.

Q1: Is DxCharts-react compatible with React 18?

A: Yep, it is fully compatible with React 18

reference — Getting started with DXcharts React, Migration guide

Q2: Is DxCharts-react compatible with React 19?

A: React 19 is supported

reference — Migration guide

Q3: Are styled components a hard dependency for overriding styles in the chart?

A: That's something we are going to work on in the near feature, however there is no major influence on performance since we don’t have to much react rendering on controls

reference — Ways to customize, Styling, Config override, CSS override, UI overrides

A: You will be able to remove certain drawings and change their order, changes in a hierarchy aren’t available through API

reference — Sidebar component, Drawings configuration

Q5: Can you remove or override the trading components? E.g. hide the buy/sell buttons on display info

A: Yep, you can hide our trading components and create your own on top. One of the examples from the other project is attached to this message https://files.slack.com/files-pri/T7RV222NQ-F069XRJHD1D/screenshot_2023-12-15_at_17.09.52.png

reference — UI overrides, Config override, Order component

Q6: do you know which data point that the % scale on DXCharts benchmarks against? The 0% line usually intersects the first candle on the chart but not always at an : open, low, high, or close value. See the image below.

A: Beginning of the visible chart is the starting point for comparison (0%). All other values are calculated relative to that baseline. The baseline is the close price of the first candle in the viewport. Percent change is: (price - baseline) * 100 / baseline.

reference — Compare charts

A: Yep, you will be able to disable right click menu (both chart and Y-axis) and override selections

reference — Right-click menu elements, Config override

Q8: What's DXcharts size in KB?

A: 990 kb (zip), 3,900 kb (uncompressed), 11,000 kb (source code)

reference — Getting started with DXcharts React

Q9: How easy to replace current charting solution

A: Widget – easy, maybe 1 day. Library – depends on how they would like to customize it, what data provider they have etc. Best case – week or few, worst case – month or few.

no link — This is not a developer documentation question. Integration timelines depend on your scope and setup — contact your DXcharts account manager for an estimate.

Q10: Who does the integrations

A: Clients team or DXcharts team based on T&M billing model.

no link — This is not a developer documentation question. Integration ownership is agreed per contract — contact your DXcharts account manager.

Q11: How do you trade from the charts? Which type of orders are supported?

A: There is trading UI and API that will allow brokers to connect charts to their trading functionalities. Type of orders: Market, Limit, SL, TP

reference — Trading, Order provider

Q12: If there is an issue who can fix it? How fast? How many people work on the team?

A: We have support package for those who are interested in predictable SLA. In general, all clients can report defect, we try to take everything into account

no link — This is not a developer documentation question. Support SLAs and response times depend on your support package — contact your DXcharts account manager.

Q13: Can you give us grace period for integrations

A: Yes, there is free trial

no link — This is not a developer documentation question. Trial and licensing terms are agreed per contract — contact your DXcharts account manager.

Q14: Who is using it already?

A: Banks, brokers, startups

no link — This is not a developer documentation question. For customer references and use cases — contact your DXcharts account manager.

Q15: Are there any major differences between the libraries we're using for the free trial and the libraries we would use if we decide to move forward on a paid subscription? I'd like to know if we're going to have to redo some of the development work after the free trial or if it's a smooth transition to go live

A: There are no differences between trial and paid libraries. Once the trial library is integrated you won't have to reintegrate it again after receiving the paid build.

Q16: We want to align the Y Axis of custom data in a separate pane (a horizontal bar chart) with the Y Axis of our main DXChart

A: If library needs to communicate with something outside of it, there is a need for additional coding. Clients might do it themselves or this can be delivered as sponsored (paid) feature based on T&M billing model

Q17: I just want to know if I have to draw a vertical line at a specific time, or you can simply say that I want to know the x position at the specific time. How can I calculate that?

A: To redraw specific canvas only use chart.bus.fireDraw([this.dynamicObjectsCanvasModel.canvasId]) , this is more performant way. To find an X coordinate based on timestamp you should use chart.toXFromTimestamp method

reference — Custom drawer, Custom drawer — redraw

Q18: Why are my drawn lines partially erased when the graph is rendered? Am I drawing the lines on the wrong canvas?

A: You use correct canvas, maybe your drawer calculates incorrect Y coordinate? you should draw line from bottom to top of canvas bounds area.

reference — Custom drawer

Q19: RoundingY-AxisLabelValues: Currently, the Y-axis label values are displayed with up to two decimal places. However, I need them to be rounded to up to five decimal places. Could you please advise on how I can achieve this customization?

E.g -> in right side y -axis it is only showing 1.08 but the remaining of the y-axis are black due to round up to 2 decimals

A: Our documentation is to help with price precision — configure priceIncrements on each instrument via Symbol Suggest Provider.

reference — Price precision, Symbol suggest provider

Q20: Setting Margin-Top for Legend: I am wondering if there is a way to adjust the margin-top for the legends that are displayed in the top-left corner of the chart. I would like to customize their position, and any insights on how to achieve this would be greatly appreciated.

A: There is no quick way to achieve. You can replace the legend header via uiOverrides (Legend.Header) or adjust layout with CSS overrides.

reference — UI overrides, CSS override, Component overriding — Overview

Q21: Rounding Y-Axis Label Values: Currently, the Y-axis label values are displayed with up to two decimal places. However, I need them to be rounded to up to five decimal places. Could you please advise on how I can achieve this customization?

A: Precision is specified on the data level. Set priceIncrements on each instrument via SymbolSuggestProvider — whatever is configured there is displayed on the Y-axis (it can be more than two decimals). If this field is missing, two decimals are used by default.

The priceIncrements array format is [(priceIncrement, price,)*, incrementForOtherPrices] — for example [0.01, 1, 0.1, 10, 1] means increment 0.01 for price < 1, 0.1 for price < 10, and 1 for any other price. The array must contain at least 3 elements and the number of elements must be odd.

reference — Price precision, Symbol suggest provider

Q22: Can I use Vite as a bundler?

A: Yes — Vite is fully supported as of DXcharts React v5.17.1 and higher (including web workers). Use the latest Vite 5.x and follow the required configuration in the Bundling guide. Webpack 5 remains the most battle-tested option if you run into bundler-specific issues.

reference — Bundling

Q23: How to create custom indicators?

A: Custom indicators are implemented as JavaScript custom studies. Register a study with addCustomStudy() and define its calculation logic, parameters, and output plots.

reference — Custom studies

Q24: Do you have roadmap?

A: Yes, you can reach out to DXcharts sales team to help with that

Q25: Are there heat maps in DXchart.

A: No, we don't have heat maps and don't have any plans to add it.

Q26: How secure DXcharts is?

A: DXcharts is a purely front end library. We don't store any users info

Q27: Are there external dependencies?

A: Yes. DXcharts React depends on react, react-dom, @dx-private/dxchart5-react, @dx-private/dxchart5-modules, @dx-private/dxstudies, and uses styled-components for UI styling. See Packages and Getting started for the full list.

reference — Packages, Getting started with DXcharts React

Q28: Is there a dummy market data in the chart? is there a way to see how it works?

A: The public demo at devexperts.com/dxcharts-demo uses real market data from the dxFeed demo feed with a 15-minute delay — not static dummy data. To run a chart locally without a live feed, use mock providers.

reference — Provider setup examples — live demo, Provider setup examples — mock providers

Q29: How to install library?

A: Install via ZIP file or private npm registry. See Getting started for step-by-step instructions.

reference — Getting started with DXcharts React, Installing from ZIP file, Navigating this portal

Q30: How to add custom drawings?

A: Built-in drawing tools cannot be extended via the library API. With source code access, you can add new drawing instruments. For canvas overlays without source code, use a custom drawer.

reference — Creating a custom drawing, Custom drawer, Working with drawings

Q31: Could you please provide detailed steps or documentation on how to effectively insert source data?

reference — Chart Data Provider, Providers setup, dxFeed Integration, Symbol Suggest Provider, Trading Session Provider

A: Custom indicators are implemented as JavaScript custom studies. See the Custom studies documentation for how to define metadata, calculation logic, and output plots with addCustomStudy().

reference — Custom studies

Q33: After successfully creating a custom graph(indicator), I would like to understand how to create an API for it. Furthermore, could you provide guidance on integrating this API with the chart for seamless functionality?

A: Custom indicators integrate with the chart through the chart React API. Register your study with __CHART_REACT_API.addCustomStudy() — define metadata (id, parameters, output lines) and a constructor.main function for the calculation. The chart then handles lifecycle automatically: real-time ticks, historical data loads, and parameter changes. Use removeCustomStudy() to unregister. Calculation runs client-side in JavaScript; there is no separate server-side indicator API to implement.

reference — Custom studies, Quick reference

Q34: Is it possible to create an overlay custom chart, and if so, what are the recommended steps or considerations in achieving this?

A: Yes. For styling or hiding built-in elements, use config, CSS, or UI overrides. To draw custom overlays on the chart canvas, use a custom drawer or add data series and panes. For deeper changes, replace components via UI overrides.

reference — Ways to customize, Component overriding, Custom drawer, Data series, Panes

Q35: In cases where we are using the dxChart library, but do not have access to the source code, how can we integrate a custom API? Could you provide insights or best practices to achieve this integration?

A: You cannot inject arbitrary custom APIs into the library internals. Integration is done through provider interfaces — implement the relevant provider (for example chartDataProvider, newsDataProvider, orderProvider) and pass it when creating the chart instance.

reference — Providers setup

Q36: What is the data ingestion framework for streaming quotes data into the dxCharts components? For better understanding, can you please explain the process flow.

A: Streaming data flows through ChartDataProvider. The chart first calls requestHistoryData for OHLCV history, then subscribeCandles for live last-candle updates pushed via callback, and subscribeServiceData for streaming bid/ask and related quote fields. In the stock product, dxFeed dxLink handles snapshot and live stream subscription.

reference — Chart Data Provider — Data flow, dxFeed Integration

Q37: For technical indicators if we plan to utilize ML-driven methods, how would we integrate the same with the UI?

A: That's in our plans for future, currently not supported in Library

Q38: How can integrate news that we would receive via another API to library’s event component in a way that the hover component is created automatically as soon as the news is received?

A: Implement a NewsDataProvider that fetches news from your API and maps it to the NewsData format. The chart displays news icons above candles and opens the hover popup automatically when the user hovers an icon.

reference — News Data Provider, News, NewsComponent

A: Library is build for Trading platforms. Lots of customisation capabilities, trading functionality, build on React. For technical advanced teams or developers. While widget is build for website, there are customisations possible but restricted comparing with library but much easier to instal. Just get JS files, host them on your server, copy code from here https://devexperts.com/advanced-financial-chart-widget/, add your data provider and it is ready to go.

reference — Getting started with DXcharts widget — React library vs widget, Widget setup, DXcharts React quick start

Q40: Which of DXcharts solution better for TV

A: They all suit, while we don't test our products on TV screens

Q41: What if I am looking for data provided along with charts?

A: It is absolutely possible, we have our sister company DXfeed that sells market data. We have simplified integration with them. In the DXcharts library there is build in data provider that you can use

reference — dxFeed Integration, Packages

Q42: About x-axis: We have a lot of chart, some chart X-axis is time-base, but some x-axis data is from other different thing.

A: Right now our dxchart5-react library only support time-based data

reference — Chart Data Provider

Q43: About jest configuration: I still didn’t understand how to configure jest to support es2020. Could you provide a whole “Hello Word”project with “vue2+dxchart.lib+jest”

A: Dxcharts team recommends this guide https://jestjs.io/docs/ecmascript-modules for ESM support. We do not ship a vue2+jest hello-world sample, but you can run Jest with DXcharts: mock @dx-private/dxchart5-react in unit tests that do not need a live chart, or configure Jest to transform DXcharts packages (esbuild-jest + transformIgnorePatterns) and set chartReactConfig.disableWorkers: true when importing the library. For Vue integration see the createChart guide. For full chart testing use browser E2E (for example Playwright) rather than Jest.

reference — Bundling — Jest, Using DXcharts with Vue

Q44: About the multiple chart? I don’t want to add a new series via UI select, I want show the two series on first render.

A: you have 2 options: - call method on init chartReactAPI.addCompareInstrument(symbol) if you have one additional instrument or chartReactAPI.setCompareInstruments(symbols) if you want to set more than one in a row.You can find the reference here https://devexperts.com/dxcharts/documentation-for-developers/dxcharts-react/API%20Reference%20-%20API- there's a concept of LayoutProvider https://devexperts.com/dxcharts/documentation-for-developers/dxcharts-react/Advanced/Sync%20state%20with%20external%20storage, you can provide the layout you need with compare instruments added in it, and chart will init with them automatically

reference — Compare charts — Setting compare instruments on first render, Supported APIs, Layout Provider

Q45: Do you have a full demo integrate dxchart and vue? I encounter some error when I am run unit test and build my project

A: Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

By default "node_modules" folder is ignored by transformers.

Here's what you can do:

• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.

• If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript

• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.

• If you need a custom transformation specify a "transform" option in your config.

• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

You'll find more details and examples of these config options in the docs:

https://jestjs.io/docs/configuration

For information about custom transformations, see:

https://jestjs.io/docs/code-transformation

Details:

dxchart.lib\dxchart5-react\dist\utils\timezones\timezones.js:204

const _0x3754ff = (0, _comlink.wrap)(new Worker(new URL('./timezones-worker.js', import.meta['url']))),

^^^^

at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)

at Object.<anonymous> (dxchart.lib/dxchart5-react/dist/chart/chart-react-app.js:6:8032)

at Object.<anonymous> (dxchart.lib/dxchart5-react/dist/render-chart.js:6:6011)

reference — Using DXcharts with Vue, Bundling — Jest

Q46: Are you support a api which can let us fetch the new data when I drag the chart to the left side?

A: Yes, when you reach the left edge of the loaded data, chartDataProvider.requestHistoryData is called again for lazy loading. For scrolling into older history, the chart passes toTime — the timestamp of the leftmost candle already loaded — so your provider can fetch the next older chunk.

reference — Chart Data Provider — toTime, Chart Data Provider

Q47: How to pass the other graphic data structures in addition to candles. I have creare a chartDataProvider in our project, but I don’t know what data structures should be resolve by requestHistoryData.

A: What other graphic data you mean? chartDataProvider has strict interface and you can find a d.ts file for it here `chart-react/dist/providers/chart-data-provider.d.ts

reference — Chart Data Provider, Data series

Q48: How to display four decimal places on the y-axis.

A: That's not trivial too, Iet me write a guide for it. It depends on the instrument info you passed via SymbolSuggestProvider

reference — Price precision, Symbol suggest provider

Q49: didn’t see the complete configuration of initialChartConfig in the chart-with-modules.config.d.ts file.

A: chart-with-modules.config.d.tsdepends on the dxcharts-lite config, it extends dxcharts-lite config. Modules are like an addons for the dxcharts-lite, which include drawings, studies etc. Full config for dxcharts-lite can be found heredxcharts-lite/dist/chart/chart.config.d.ts

reference — Chart configuration, Configuration and main concepts

Q50: How to intergra the Mandatory providers in createChart.

A: how to use createChart function described in the https://devexperts.com/dxcharts/documentation-for-developers/dxcharts-react/Quick%20Start/Quick%20Start%20-%20Vue, as you can see there's a second argument, which is exactly the same as dependencies prop in ChartReactApp React component. So you should pass your implementations of providers right here to the object that is passed as a second argument

reference — Using DXcharts with Vue, Providers setup, Getting started with providers

Q51: How to control the y-axis and x-axis range in my code? The library default show is the figure 1 below, and I want to show is Figure 2 below looks like

Chart automatically calculates the range of values on YAxis, it takes in count the maximum and minimum values of the candle data you provided. So the first option is to fix your data, because I can't see the point of not showing the user all the data you have on chart. The second option - you can control it programmatically, let me write a guide how you can do this, because that's not trivial at all.

how to control YAxis values decimal part.

When you implement symbolSuggestProvider there's Instrument interface all over the place. In Instrument interface there's a field called priceIncrements.

What is a priceIncrements?

// Price increment represent array of increment-price couples and trailing increment

// e.g. [(priceIncrement, price,)* incrementForOtherPrices]

// [0.01, 1, 0.1, 10, 1] means

// there are three increments (0.01 for price < 1 ), (0.1 for price < 10), (1 for any other price)

i.e increment is a step for a values on Y Axis, i.e if the increment is 0.01, it means that Y axis will show you the values like 1.01, 1.02, 1.03 etc.

These increments are used to format these values on YAxis. For your case you should pass smth like [0,0001, 1, 1] as a priceIncrements

NOTE: there should be at least 3 elements in priceIncrements array.

reference — Scaling, Price precision, Symbol suggest provider

Q52: I have implement a ‘SymbolSuggestProvider’, but I still don’t know how to write ‘priceIncrements’, what is [0,0001, 1, 1] means? It is not work for our data.

When I pass SymbolSuggestProvider’, my y-axis data just display integer, not decimal. And just see one data in y-axis.

A: here's the definition of what price increment is

// Price increment represent array of increment-price couples and trailing increment

// e.g. [(priceIncrement, price,)* incrementForOtherPrices]

// for example [0.01, 1, 0.1, 10, 1] means that

// there are three increments (0.01 for price < 1), (0.1 for price < 10), (1 for any other price)

// it means, that if your price is smth like < 1, then values will have 2 decimal digits like 0.56, 077. If your price is < 10, then values on y-axis will have 1 decimal digit like 4.4, 9.5. And for prices > 10 values on y-axis will be 11, 15, 17 etc.

reference — Price precision, Symbol suggest provider

Q53: How to pass multiple data for custom provider? The demo just has one data. I want to show two candlesticks in one chart

A: Just select compare instrument from the UI via toolbar button, and you will see one more series on top of main series.

reference — Compare charts, Compare charts — Setting compare instruments on first render

Q54: In the chart, how could we zoom in out with x-axis and y-axis at the same time.

A: In order to zoom with x and y axis same time you would turn on Lock scale or Auto-scale price axis options (right click in Price Axis expends the context menu)

reference — Scaling

A: Would you like to hide twitter and telergam sharing buttons or the whole snapshot menu?

reference — Snapshot sharing menu, Config override

Q56: Are there any api sending out data out of the library?

A: The library does not expose a general-purpose API to send chart data out. Some builds include Google Analytics event logging (controlled at build time). Chart snapshot sharing uploads an image via your chartSharingProvider when the user uses the share menu.

reference — Chart Sharing Provider

Q57: How to implement multiple data in the one chart. (in the example, showing candlestick and histogram)

A: Volume histograms are built into the chart (enable volumes in config). For multiple candle series from different instruments on the same chart, use compare series. For candlestick plus another series on independent Y-axes, use multiple scales or panes.

reference — Compare charts, Multiple scales, Multiple scales in DXcharts Lite, Panes

Q58: I have tried to figure out how to set the specified xAxis or yAxis range/scale during initialization but cannot find relevant configuration.

A: subscribe to chartInstance.data.observeCandlesChanged after candles are set. Use instance.scale.setYScale / instance.scale.setXScale to manually specify range and scale right after initialization. And then set Autoscale to false initialChartConfig: { scale: { auto: false } }

reference — Scaling — Programmatic axis range, Chart configuration

Q59: We applied the settings from the document https://devexperts.com/dxcharts/documentation-for-developers/dxcharts-lite/X%20Axis but found that the display looked strange and didn't follow what the documentation defined it would. What we want to achieve is to display all the data when the chart is first displayed. In addition to this, we want the Xscale gaps to be even.

As shown in the picture below, this is the question mentioned in my previous email. Some gaps are based on month and some are based on years. We want its gaps to be normal and regular rather than the gaps in the picture appearing abnormally. The Xscala we need should be 1d 2d ...nd, or 1d, 3d, 5d...(2n+1)d. Same for year/month/time..etc

Here's the default format config for x scale labels:

initialChartConfig: {
components: {
xAxis: {
formatsForLabelsConfig: {
lessThanSecond: 'mm:ss',
second_1: 'HH:mm:ss',
minute_1: 'HH:mm',
minute_5: 'HH:mm',
minute_30: 'HH:mm',
hour_1: 'HH:mm',
day_1: 'dd.MM',
month_1: 'MMM',
year_1: 'YYYY',
},
},
},
},

The thing is, that x-labels-generator takes into account the maximum possible length of a label, i.e number of symbols. For example in default config the longest format is HH:mm:ss, which is 8 symbols long. Bearing that in mind, x-axis labels-generator will try to position every possible label as if it has maximum possible length. And it stops on the first label, that satisfies all the requirements. That's why labels can be positioned not evenly.

You can overcome that by reducing the maximum possible length of a label. For example, if you know that you don't have seconds aggregation, and you don't need that long format like HH:mm:ss, just delete it.

i.e that's may be your config

initialChartConfig: {
components: {
xAxis: {
formatsForLabelsConfig: {
minute_1: 'HH:mm',
minute_5: 'HH:mm',
minute_30: 'HH:mm',
hour_1: 'HH:mm',
day_1: 'dd.MM',
month_1: 'MMM',
year_1: 'YYYY',
},
},
},
},

This will help you to make maximum possible length of a label more stable in average, in this example it will be 5 symbols in average. And because of that chart will be able to place labels more evenly.

reference — X-axis, Chart configuration

Q60: We cannot see complete configurations in the document, which is very troublesome for us to use. Can the document show the complete configuration? I highlighted one of these cases in below screenshot.https://devexperts.com/dxcharts/documentation-for-developers/dxcharts-react/API%20Reference%20-%20Configuration. We can understand the attributes of APIs through the definition of TS, but even if we know what attributes this method requires, we don't know what it is used for. Some attribute definitions are not very clear, which also take us time to figure out what they are used for.

A: Currently most of our documentation is auto-generated. Besides we're using documentation engine which is not supporting nested values description, eg. nested config objects. We've plans to change our documentation engine and also provide more self-handed articles rather than auto-generated. For now, probably, as a workaround, is better to use Typescript types definitions to understand our APIs.

reference — API reference for configuration, Chart configuration, Configuration and main concepts

Q61: Upon unzipping the files, I attempted to execute "npm install," at which point I was prompted to sign in to GitHub. However, when I tried to sign in using my email address kannan.ganesan@rksv.in, I encountered a "permission denied" error message. Kindly review the attached screenshot and provide assistance as necessary.

A: For ZIP file owners, the right place to start will be https://devexperts.com/dxcharts/documentation-for-developers/dxcharts-react/Quick%20Start/Quick%20Start%20-%20Zip Quote: "If you don't have an access to internal repository then this is a guide how to install dxCharts packages without it"

reference — Installing from ZIP file

Q62: upon attempting to launch the app, I encountered an error from Firebase stating `index.esm2017.js:561 Uncaught FirebaseError: Firebase: Firebase App named '[DEFAULT]' already exists with different options or config (app/duplicate-app)`. Please refer to the attached image for further details and provide any suggestions you may have.

A: Looks like there is a conflict between DXcharts analytics and your analytics account. You should reach out to Devexperts team to get a new build

no link — This requires a custom build with Google Analytics disabled. Contact your Devexperts representative.

A: We currently don't have demo app that demonstrates all the available methods. https://devexperts.com/dxcharts-demo/

There lots of providers added as examples, such as: market data integration, symbol suggest provider, layout provider integration, logo added to the charts etc. Everything that is mentioned here is described in the documentation, so you do not necessarily need an access to source code to understand how we built these.

reference — Provider setup examples, Getting started with providers, Supported APIs

Q64: Is there a method to determine whether the requestHistoryData function is invoked for the initial data request for a symbol? The reason for this inquiry is that we utilize two distinct APIs to retrieve current day and historical data. Simply providing the 'from' and 'to' times doesn't suffice for our needs.

Our current approach for the chart we are having involves: The chart library invokes the requestHistoryData function and with arguments such as 'from', 'to', and 'firstDataRequest'. If 'firstDataRequest' is true, we utilize our current day API to retrieve today's candle response, which we then pass back to the chart. We disregard the requested 'from' and 'to' values since we don't have a single API. If the returned candles are insufficient, the chart subsequently calls the same method again with 'firstDataRequest' set to false. At this point, we utilize the historical API to retrieve the necessary data from the previous day. The documentation provides only basic syntaxes and lacks detailed explanations. It doesn't offer a comprehensive understanding of how to utilize the methods provided by the DX chart.

A: Usually there are two kinds of Candle's data: 1) candles which are already in past - any candles before the current moment, even if it's the current day. 2) candles which are still incoming - candles will be received reactively in runtime.

For first kind of the candles data, we need to use requestHistoryData even if it's current day candles. For second one, we need to use method subscribeCandles which is implements subscription model for incoming data. Also, we need to learn, that there's not any point which can be called firstDataRequest and be somehow related to current day, because chart viewport can be initially scrolled into the distant past and firstDataRequest will not be include current day candles at all.

Seems like complexity on your side is connected with the fact that data source separates current day candles and all other previous candles for some reasons. And access to these data are presented through different api endpoints. In this case, probably the only solution is to abstract this inconvenience within the date provider itself. Looks like, they can just check fromTime/toTime parameters are belongs to current day, and make an additional request to get current candles data and merge it with historical data from second api endpoint. Pseudo-code bellow:

async function requestHistoryData(symbol, aggregation, { fromTime, toTime }, updateCallback) { const includesCurrentDay = checkIncludesCurrentDay(fromTime, toTime); const includesHistorical = checkIncludesHistorical(fromTime, toTime); const data: ChartCandleData = []; if (includesHistorical) { const historicalData = await fetchHistoricalData(symbol, aggregation, ...); data.push(...historicalData); } if (includesCurrentDay) { const currentDayData = await fetchCurrentDay(symbol, aggregation, ...); data.push(...currentDayData); } return data; }

reference — Chart Data Provider, Chart Data Provider — Data flow

Q65: How can we ensure that the charts are reloaded when the internet connection is lost and then restored? We anticipate that the charts should retrieve historical data and resubscribe once the internet connection is reestablished. Could you please advise us on how to accomplish this.

A: Internet connection loss affects only live data, not historical. If you worry that historical data might be stale by the time when connection is restored you can use the last argument of requestHistoryData for manual data update

function requestHistoryData(symbol, aggregation, options, updateCallback) {

....

// something has happened with the connection, that it has been restored, you can request data again and call

updateCallback(data);

}

reference — Chart Data Provider — updateCallback, Chart Data Provider — Data flow

Q66: The requestHistoryData function isn't providing the expected parameters

A: fromTime and toTime reflect the chart viewport state, not only user swipes. On initial load they are often undefined or 0 — load the latest dataset you need. fromTime may appear on subsequent loads or timeframe presets. When scrolling left into older history, lazy loading passes toTime (timestamp of the oldest loaded candle).

reference — Chart Data Provider — fromTime, Chart Data Provider — toTime

Q67: How do we configure sessions for different segments?, How do we pass special holidays and handle special trading sessions?

A: TradingSessionsProvider needs to be implemented.

reference — Trading Session Provider

Q68: How do we configure price precision for different segments?

A: Price Precision feature is described here (https://devexperts.com/dxcharts/documentation-for-developers/dxcharts-react/Price%20Precision).

reference — Price precision, Symbol suggest provider

Q69: How do we display search results on symbol search?

A: SymbolSuggestProvider needs to be implemented.

reference — Symbol suggest provider

Q70: Do we need to code anything to save indicator templates?

A: IndicatorsTemplateProvider needs to be implemented.

reference — Indicator Templates Provider

Q71: Inserting Source Data into Graph: Could you please provide detailed steps or documentation on how to effectively insert source data into a graph using [name of the tool or library]?

A: The library is data-agnostic — connect your sources by implementing providers. Candles are passed in OHLCV format (Open, High, Low, Close, Volume) for drawing candles, volume, and indicators. In DXcharts React, implement chartDataProvider for historical and live candles, symbolSuggestProvider for instrument search, and tradingSessionsProvider for session-based indicators such as VWAP. Alternatively, push OHLCV data directly to the chart-core instance with chart.setData({ candles }) — get the instance from api.onChartCreated. Use chart.updateData() for incremental updates without replacing the full history.

reference — Chart Data Provider, Providers setup, dxFeed Integration, Symbol Suggest Provider, Trading Session Provider, Getting started with DXcharts Lite, Using API

A: Custom indicators are implemented as JavaScript custom studies. See the Custom studies documentation for how to define metadata, calculation logic, and output plots with addCustomStudy().

reference — Custom studies

Q73: Is it possible to create an overlay custom chart, and if so, what are the recommended steps or considerations in achieving this?

reference — Ways to customize, Component overriding, Custom drawer, Data series, Panes

Q74: data ingestion framework : What is the data ingestion framework for streaming quotes data into the dxCharts components? For better understanding, can you please explain the process flow.

reference — Chart Data Provider — Data flow, dxFeed Integration

Q75: Technical indicators & signals: For technical indicators if we plan to utilize ML-driven methods, how would we integrate the same with the UI?

A: That's in our plans for future, currently not supported in Library

Q76: How can integrate news that we would receive via another API to library’s event component in a way that the hover component is created automatically as soon as the news is received.

reference — News Data Provider, News, NewsComponent

Q77: Can your component be used with Electron + NextJs (React) environment?

A: Yes, in practice — DXcharts is a client-side React component and customers use it in Electron and Next.js, though we do not officially test or document a Next.js integration path. Mount ChartReactApp only in the browser ('use client' or dynamic(..., { ssr: false })). In Electron with strict CSP, you may need relaxed policy (for example script-src 'unsafe-eval' if you use custom JS studies or DXScript; worker-src blob: for timezone workers — see Q127).

reference — Using DXcharts with React — Next.js and Electron

Q78: can you provide example code for integrating your component with Next.js or React?

A: React integration samples are in the quick-start guides. There is no dedicated Next.js guide — follow the React quick start and mount the chart as a client component.

reference — Using DXcharts with React, Getting started, Providers setup

Q79: In the demo of the component your company provides, there is an indicator search and add dialogue box; Can we add our custom-made indicators to this dialogue?

A: Yes. Register custom indicators with __CHART_REACT_API.addCustomStudy() — they appear in the indicator search and add dialog alongside built-in studies.

reference — Custom studies, Custom studies — Study not appearing

Q80: Can we add and display the properties of our custom-made indicators in the indicator properties dialogue box?

A: Yes. Define inputs in the study metainfo.parameters array when registering with addCustomStudy() — they are shown in the indicator properties dialog and can be edited by the user.

reference — Custom studies — Parameters

Q81: TradingView has a drawing tool called "Date and price range"; do you offer a similar feature?

A: Yes. DXcharts includes the Date and Price Range drawing (date_price_range) — a shaded box between two points across time and price. It is available in the drawings toolbar/sidebar by default.

reference — Date and Price Range

Q82: Can the button placement or caption of the drawing tools be changed?

A: Drawing tool captions can be changed via the localization dependency (for example localization.drawings.date_price_range). You can switch drawings between the sidebar and toolbar via chartReactConfig.drawings, and customize which tools appear via drawingsList. Reordering buttons or adding custom toolbar placements is not supported.

reference — Localization, Configuring drawings

A: Yes. Use a custom drawer to render SVG or canvas annotations on the chart and attach tooltips to your data points.

reference — Custom drawer

Q84: We would like to change the line color of specific indicators based on the reference value or direction. is this feature available?

A: Built-in indicators do not support conditional line colors. With custom studies, you can return per-point colors from constructor.main (for example { value: rsi, color: '#00FF00' } when a value crosses a threshold), or use line types such as LINEAR_TREND, TREND_HISTOGRAM, and TREND_POINTS to color output by direction.

reference — Custom studies — Output lines (plots), Custom studies — Line types

Q85: Can we add a button for temporarily hiding or minimizing a specific indicator displayed on the chart?

A: You cannot add a custom hide/minimize button, but indicators can be hidden via the chart legend eye icon, the studies right-click menu (hideStudyButton), or the chart layers panel. Toggle visibility per study line from the legend when an indicator has multiple plots.

Q86: We are conducting tests on the implementation of the DXCharts library. We have made progress in some areas, but we noticed some issues after integrating the SymbolSuggestProvider with our data provider. SymbolSuggestProvider:

We have created an internal list of symbols according to those available in our data provider. However, after passing the list, we noticed that some functionalities and graph visualizations stopped working. As per the screenshot below, we cannot visualize the auto-scale price axis; prices do not appear on the Y-axis, and some drawings after marking on the graph also do not appear.

A: This usually means priceIncrements was not set on instruments returned by symbolSuggestProvider. Without price precision, the Y-axis, auto-scale, and drawings can fail to render correctly. Set priceIncrements on each instrument in your symbol list.

reference — Price precision, Symbol suggest provider

Q87: Indicators: Regarding the indicators, selecting one does not generate the graph. It is unclear whether we need to pass specific data or perform some calculations. Nevertheless, we have successfully integrated our endpoint, which is the data provider, and made the requestHistoryData function work.

chunk-XCJ4UMHA.js?v=62e2c2b9:9269 Uncaught Error: Something went wrong =/ at ExtendedContext.intersectLineVertically (chunk-XCJ4UMHA.js?v=62e2c2b9:9269:15) at polygonPoints (chunk-2TKESNEC.js?v=62e2c2b9:11408:43) at TrendChannel.draw (chunk-2TKESNEC.js?v=62e2c2b9:11444:21) at drawShape (chunk-2TKESNEC.js?v=62e2c2b9:9482:63) at DrawingsDrawer.drawDrawing (chunk-2TKESNEC.js?v=62e2c2b9:9465:5) at DrawingsDrawer.draw (chunk-2TKESNEC.js?v=62e2c2b9:9458:147) at @dx-private_dxchart5…v=62e2c2b9:39298:16 at Array.forEach (<anonymous>) at DynamicObjectsDrawer.draw (@dx-private_dxchart5…v=62e2c2b9:39295:29) at @dx-private_dxchart5…v=62e2c2b9:36872:18 Upon reviewing the documentation, we identified potential issues with Vite related to the use of Webworkers. In response to this, I opted to set up a new environment using create-react-app + TypeScript, which utilizes Webpack as its default bundler. During the project execution, I noticed some warning messages indicating failures in the file paths that supposedly represent the indicator names. Although I examined the ZIP file containing the DxCharts libraries that were sent to us, I couldn't locate these specific files. Would it be possible to check with your team if it makes sense for us to have access to these files to ensure thecorrect functioning of the indicators? Are we on the right track?

A: These are separate issues. The Create React App path warnings about indicator file names are a known harmless CRA issue — no files are missing; mute the warnings. The TrendChannel.draw stack trace is a drawing render error (often related to missing priceIncrements or invalid chart data), not missing indicator files. Built-in indicators are provided by the @dx-private/dxstudies package included in the ZIP — you do not pass indicator calculation data via chartDataProvider; only OHLCV candles are required. Ensure dxstudies is installed and requestHistoryData returns enough history for the selected study.

reference — Getting started with ZIP, Price precision, Chart Data Provider

Q88: Is there any functionality in this version to divide one asset by another?

A: No. There is no built-in price-ratio chart (dividing one instrument by another). Compare charts overlay multiple instruments on a percentage-performance axis, which is not the same as a price division.

reference — Compare charts

Q89: Does the interface support language change to Portuguese/pt-br?

A: Yes. Pass a custom localization object with Portuguese strings to ChartReactApp. There is no pre-built pt-BR locale file — you provide the translations yourself.

reference — Localization

Q90: the user conducted their technical analysis on the graph and wants to continue monitoring their markings in the following days. How can we proceed with this approach?

A: Persist drawings and chart state via LayoutProvider — layout snapshots include drawings per instrument. Implement a LayoutProvider backed by localStorage (example in docs) or your database so markings reload when the user returns. Use UserDataProvider for additional user preferences (favorite drawings, toolbar positions, etc.).

reference — Layout Provider, User Data Provider, Working with drawings — external storage

Q91: I am currently analyzing the mentioned topic. Do you have explanatory documentation on how to use the @dxfeed/dxlink-websocket-client? In the attached file, only the packages were provided, which makes it difficult to understand. We need to understand the best approach to capture real-time data. We have a data feeder directly connected to the exchange. The idea is to determine the best way to integrate our data feed with DXchart. I believe we will have an intermediate endpoint that can communicate with DXchart using WebSockets. This endpoint will be responsible for generating daily bars and continuing to send trades in real-time.

A: There is no DXcharts documentation for @dxfeed/dxlink-websocket-client — it is a dxFeed-only demo reference. If you use dxFeed market data, connect via dxLink and createDxLinkAdapter() (see dxFeed Integration). If you have your own exchange feed, implement ChartDataProvider yourself: return historical bars from requestHistoryData, push live last-candle updates via subscribeCandles, and optionally stream quote fields via subscribeServiceData. Your WebSocket endpoint sits behind the provider; DXcharts does not connect to it directly.

reference — dxFeed Integration — dxLink, Chart Data Provider, Chart Data Provider — Data flow, Providers setup

Q92: API to obtain the list of strings, but was unsuccessful. I am unsure if this functionality is available in the version I am using.

Error: window.__CHART_REACT_API.internal.getLocalizationJSON(); VM17160:1 Uncaught TypeError: Cannot read properties of undefined (reading 'internal') at <anonymous>:1:26 header: 'Desenhos', buttons: { magnetMode: 'Modo Ímã', drawingMode: 'Modo de Desenho', syncDrawings: 'Sincronizar desenhos', hideDrawings: 'Ocultar todos os desenhos', showDrawings: 'Mostrar todos os desenhos', deleteDrawings: 'Excluir todos os desenhos', }, },

A: getLocalizationJSON() is not a supported API — the user tried __CHART_REACT_API.internal.getLocalizationJSON(), which does not exist. Use api.getLocalization() via onAPICreated to read the current strings, or import DEFAULT_LOCALIZATION and pass a custom localization object to ChartReactApp (spread defaults and override sections such as drawings, toolbar, legend). Use api.updateLocalization() for runtime partial updates.

reference — Localization — Default localization strings, Localization — Reading and updating localization at runtime, API reference

Q93: How to translate drawings legend and other chart core elements

A: Most chart UI strings are translatable via the localization dependency — including the OHLC legend (localization.legend), drawings toolbar and settings (localization.drawings), toolbar, studies menu, and settings popup. On-canvas numeric/date labels (drawing measurements, axis ticks) are formatted values, not locale keys; customize them with xAxisLabelFormat / customFormatter in chart config where needed.

reference — Localization — Common localization sections, X-axis — Custom label formatting

Q94: How to translate X-axis

A: Use customFormatter or conditional xAxisLabelFormat entries in chart config — the formatter can return date strings in any language for the selected aggregation period.

reference — X-axis — Custom label formatting

Q95: Visual Style Adjustments: We would like to ensure that the visual styles of the chart interface are consistent with the rest of our platform. Could you guide us on how we can make these customizations in the library?

A: Depends on what you want to change. Common approaches: palette tokens and CSS for colors/themes, chartReactConfig for layout and feature toggles, component overriding for React UI pieces, and custom drawers for canvas-level rendering.

reference — Ways to customize, Palette, Styling, Component overriding, Custom drawer

Q96: Candle Visualization for Larger Periods: We noticed that when switching to larger aggregation periods, the candles appear large on the screen. Is there any configuration that allows the candles to automatically adjust according to the screen resolution to maintain a standardized view?

A: Yes — use viewportStrategy. With timeframe, the chart keeps the same visible time range, so switching to a larger period shows fewer, wider candles. Set aggregations: 'candles' to keep a fixed number of visible candles instead (the default in DXcharts React). Configure via chartReactConfig.viewportStrategy or api.setAggregationViewportStrategy('candles'). This controls candle density vs time range — not screen resolution.

reference — Scaling — Candles viewport

Q97: Is there a way to change price label colours?

A: Yes. Override palette tokens via dependencies.palette on ChartReactApp. For Y-axis price labels, try chart-label-text and chart-label-text-inverted:

<ChartReactApp dependencies={{
  palette: {
    dark: { object: { 'chart-label-text': '#FFFFFF', 'chart-label-text-inverted': '#000000' } },
    light: { object: { 'chart-label-text': '#000000', 'chart-label-text-inverted': '#FFFFFF' } },
  }
}} />

reference — Y-Axis Price Labels — Label colors, Palette

Q98: I am facing an issue with the candle data generated by the WebSocket and would like to request your assistance. Historical data is being processed correctly, with dates and time zones adjusted by the interface as expected. However, the candle data received via WebSocket is not reflecting the time zone change by the interface.

A: All candle timestamps sent to the chart must be UTC. The chart applies the selected timezone offset only for intraday periods (less than one day). For daily-or-larger aggregations, timestamps stay UTC because day boundaries do not need an offset. Ensure live candles from your WebSocket use the same UTC format as historical data.

reference — Timezones — Timezones and candles timestamps

Q99: It seems that the examples in the documentation assume that the install has been done via npm (as they use import...from..., etc.). Do you have documentation on how to use the library for vanilla usage where we're just using the two files from the zip and then creating the chart using DXChart.createWidget()? For a start, I note that if I write var widget = await DXChart.createWidget(document.getElementById('chart'), {}), I don’t get a reference to the chart; how can we get a reference to the chart in vanilla JS? And how, in general, can the examples be modified for use with vanilla JS?

A: Use DXChart.createWidget() from @dx-private/dxchart5-react-widget. You do not get a chart instance from the return value — pass onAPICreated in the widget config, then use api.onChartCreated((chartId, chart) => …) to access the chart-core instance. Full config options are in widget.config.d.ts in the ZIP. Providers and configuration work the same as in the React/npm setup.

reference — Using DXcharts with Vanilla — Providers and configuration, Using the API, DXcharts widget overview

Q100: Aside from the “How to use dxchart5-react with vanilla apps” page, I can’t see any other documentation on how to get started (with Configuration, Providers, etc.). The HTML file creates the chart successfully, but how can we get a reference to the API? There is only a react based app example.

Regarding the command: DXChart.createWidget(document.getElementById('chart-iframe'), { width: '800px', height: '576px', } ); …is there any documentation for this object parameter? Width and height are documented and working, but I don’t know what else we can specify there or how (in the context of a vanilla app).

A: The second argument to createWidget is ChartReactWidgetProps — see widget.config.d.ts in the ZIP for all options (providers, chartReactConfig, localization, onAPICreated, symbol, chart type, etc.). For providers and configuration guides, follow the same React library docs; wire values into the widget config object. Use onAPICreated to get the chart React API.

reference — Using DXcharts with Vanilla — Providers and configuration, Setting up the widget, Getting started with providers, Getting started with configuration, API reference

Q101: Do you please have examples for how to provide Config and Providers in a vanilla app? (Please note again that we don’t use modules, TypeScript, Node, npm, etc.).

It seems that the examples in the documentation assume that the install has been done via npm (as they use import...from..., etc.). Do you have documentation on how to use the library for vanilla usage where we're just using the two files from the zip and then creating the chart using DXChart.createWidget()? For a start, I note that if I write var widget = await DXChart.createWidget(document.getElementById('chart'), {}), I don’t get a reference to the chart; how can we get a reference to the chart in vanilla JS? And how, in general, can the examples be modified for use with vanilla JS?

A: Same as the npm setup — pass providers and config on the createWidget props object. Use dependencies for chartDataProvider, layoutProvider, chartReactConfig, initialChartConfig, and other providers; see widget.config.d.ts in the ZIP for the full ChartReactWidgetProps shape. createWidget returns only a destroy handle — use onAPICreated and api.onChartCreated((chartId, chart) => …) to access the chart-core instance. React/npm examples map directly: replace ChartReactApp props with the widget config object.

reference — Using DXcharts with Vanilla — Providers and configuration, Getting started with providers, Getting started with configuration, DXcharts widget overview

Q102: The requestHistoryData function does not seem to be providing the expected parameters - As per the DX team's explanation, the requestHistoryData method is invoked with either fromTime or toTime when the user scrolls to the right side of the chart. However, there appears to be a discrepancy in the symbols passed during the initial call to requestHistoryData and subsequent calls. Please refer to the attached video for clarification. While the symbol passed during the initial call seems correct, the symbols passed in subsequent calls are incorrect.

A: fromTime and toTime reflect the chart viewport state — they are hints, not strict API query bounds. You can return as much history as you need. On initial load both are often undefined or 0. Later loads may pass fromTime (leftmost loaded candle, or timeframe presets). Lazy loading when scrolling left into older history passes only toTime (timestamp of the oldest loaded candle). The symbol argument is the instrument for that specific request — in multichart or compare mode, subsequent calls may use compare/secondary symbols, not only the main chart symbol. Use the optional chartId parameter to correlate requests per chart.

reference — Chart Data Provider — fromTime, Chart Data Provider — toTime, Chart Data Provider — symbol and chartId

Q103: How do we display a different name on the chart instead of the symbol we pass to the chart? (about symbol search)

A: Set chartReactConfig.watermark.mode: 'custom' (default is 'instrument', which always shows instrument data and overwrites manual changes). Store chart instances from onChartCreated, then call chart.watermark.setWaterMarkData({ firstRow, secondRow, thirdRow }) — use api.onInstrumentChanged to re-apply your display name when the symbol changes.

reference — Watermark — Custom display name, Watermark component API

Q104: How do we determine classes for styled components? DXChart will investigate whether exploration of components can be enhanced.

A: DXcharts React uses styled-components internally. Override styles by wrapping ChartReactApp in a styled parent and targeting nested components via styled-component selectors — there are no stable public CSS class names to rely on. For simpler changes, prefer palette, CSS override, or config before deep styled-component overrides.

reference — Styling, UI overrides

Q105: Warning upon loading in the React app.

A: Don't pay attention to this warning. It doesn't affect anything. We will try to get rid of it.

Q106: How do we enable crosshair and format labels on the x-axis? What configuration is required? (Meaning that they should be turned on by default when DXcharts is loaded first time

A: Crosshair is enabled by default (cross-and-labels). To set it explicitly on first load, pass initialChartConfig.components.crossTool.type: 'cross-and-labels' in ChartReactApp dependencies (or dependencies.initialChartConfig in the widget). Format X-axis crosshair labels via crossTool.xAxisLabelFormat in the same config — use format strings or customFormatter. Change at runtime on the chart-core instance: chart.crossTool.setVisible(true) and label format via chart.config.

reference — Crosshair, CrossTool, X-Axis label format

The “Quick Start – Vanilla” instructions are under dxcharts-react but seem to pertain to dxcharts-react-widget; I note (from looking at the code) it seems that the items in “Quick Start – Configuration” (e.g. ChartAppInitials and its properties, ChartReactAppConfig and its properties) are not the same as / not available in the properties made available through standalong-config.d.ts. If they are the same, how can we provide the dependencies (initials, configs, providers – as per the documentation) to the standalone chart?

A: Same product, two distributions: @dx-private/dxchart5-react (npm/React) and @dx-private/dxchart5-react-widget (script/ZIP). The widget wraps ChartReactApp — providers and config go in createWidget's dependencies object (chartDataProvider, chartReactConfig, initialChartConfig, etc.), not as top-level React props. Top-level widget props cover display toggles (width, symbol, chartType, feature flags); see widget.config.d.ts. React-only customization (uiOverrides, full component replacement) is also available on the widget via the uiOverrides prop.

reference — Using DXcharts with Vanilla, DXcharts widget overview, Getting started with configuration

Q108: How do we display a different name on the chart instead of the symbol we pass to the chart?

A: Same as Q103 — set chartReactConfig.watermark.mode: 'custom', then chart.watermark.setWaterMarkData({ firstRow, secondRow, thirdRow }) via onInstrumentChanged (and store chart instances from onChartCreated).

reference — Watermark — Custom display name

A: Yes — override uiOverrides.DrawingsSidebar (DrawingsSidebarComponent, DrawingsSidebarHeader, DrawingsSidebarFooter). Your component receives chartReactAPIProps and originalProps. For smaller changes (hide tools, reorder), use drawingsList in chart config instead of a full sidebar rewrite.

reference — Overriding the Sidebar component, UI overrides

A: Yes — override uiOverrides.Footer: replace the whole footer via FooterComponent, or swap individual pieces (TimeframePresetsComponent, TimeZoneComponent, SwitchAxisButtonsProps, etc.). Your component receives chartReactAPIProps and originalProps (including default children).

reference — Overriding the Footer component, UI overrides

A: The built-in studies settings popup is not replaceable as a whole, but you can build your own UI around the public chart API. Hide the default indicators button (chartReactConfig.toolbar.buttons.studies.enabled: false), add a custom toolbar button, then drive studies programmatically: api.setStudies() / api.setStudiesByIds() for built-in studies, api.addCustomStudy() / api.removeCustomStudy() for JavaScript custom studies. Custom study parameters are defined in metainfo.parameters and shown in the default properties dialog unless you manage values entirely from your UI.

reference — Studies — Custom studies UI, Toolbar buttons, Custom Studies overview, API reference

Q112: How can we change the animation of drawing the live candle updating? If we want to tweak the animation of how a candle is drawn when changing.

A: There is no API to customize live-candle animation timing or easing. You can only disable scale/viewport animations via initialChartConfig.scale.disableAnimations: true (affects how the chart pans when the last candle updates, not the candle body draw itself). Fine-grained animation control would require source changes.

reference — Scaling — Scroll limits

Q113: Is it possible to disable short selling in the Trading UI? Can we override the UI of the Trading Labels to use our own elements on the chart?

A: There is no config flag to disable short selling only. Override trading components via uiOverrides.trading (OrderEntry, RegularOrder, Position, etc.) and omit or disable sell actions in your UI, or set chartReactConfig.trading.enabled: false.

reference — Trading, Overriding the Order component, UI overrides

A: Two different UIs — don't confuse them with the sidebar (Q109). Drawings sidebar (tool list on the side): yes, replace via uiOverrides.DrawingsSidebar — same as Q109. Drawing settings menu (toolbar/popup that appears when a drawing is selected — color, line style, fib levels, measure-box toggles, etc.): not replaceable via uiOverrides; those are hardcoded per drawing type in drawing-settings-toolbar / drawing-settings-popups. For parameter UI you can limit tools via drawingsList, override the drawings right-click menu, or build controls outside the chart.

reference — Overriding the Sidebar component, Configuring drawings, Right-click menu elements

Q115: How can we override the style of the Y-Axis Labels? I only see rectangle/badge/plain as the options, is there further customization here? E.g. if we want to change the shape or font type/size

A: labelType supports badge, rectangle, and plain only — no custom shapes. Tune appearance via initialChartConfig.components.yAxis (fontSize, fontFamily, typeConfig for badge/rectangle padding and rounding) and per-label colors in chartCoreConfig.colors.labels or palette tokens. Runtime: chart.yAxis.changeLabelMode() and custom Y-axis label providers for advanced cases.

reference — Y-Axis Price Labels — Label appearance, Y-Axis Price Labels — Label colors

Q116: Can we implement our own Positions UI elements to display on the Chart?

A: Override the built-in position component via uiOverrides.trading.Position (or PositionAlt), or disable built-in trading (chartReactConfig.trading.enabled: false) and render your own UI using PositionProvider

reference — Trading — Custom trading UI, Overriding the Order component

Q117: A positive displace value for an indicator should push the indicator forward, but it's the opposite. Is it possible to modify how displace works in the indicators? Can you set a maximum and minimum on an indicator for the Y-Scale? For example, the RSI overbought and oversold levels have no upper or lower limit and negative values are possible.

What’s the easiest way to include our own custom indicators/studies?

A: Built-in study math (displace direction, RSI Y-scale bounds, overbought/oversold limits) comes from @dx-private/dxstudies and is not configurable via chart API. Easiest path for custom indicators: register JavaScript custom studies with api.addCustomStudy() — you control calculation, parameters, outputs, and pane scaling. To change built-in RSI/displace behavior, modify or extend the dxstudies package.

reference — Custom Studies overview, Custom Studies quick reference, Studies

Q118: Is it possible to prevent a user from scrolling past the left or right side of the chart? Sometimes a user can scroll past where the first candle is drawn and we want to prevent that.

A: By default components.chart.minCandlesOffset (default 2) constrains panning so empty space beyond the first/last candles is limited. Increase it for stricter edges, or add custom rules with chart.scale.addXConstraint() in onChartCreated (the chart already uses candleEdgesConstrait internally when minCandlesOffset > 0).

reference — Scaling — Scroll limits

Q119: Is it possible to modify the content inside the measure box/label box of a drawing? (Example: “-0.31 (-0.80%)”) We want to change this format and content. When we change the color of a drawing, the label on the X and Y axis does not change. How can we update the colors of the Y-Axis and X-Axis Label to be the same color

A: Measure-box numeric format (e.g. -0.31 (-0.80%)) is not customizable via API — only visibility toggles in drawing settings. Drawing X/Y axis projection labels use fixed theme palette tokens (drawing-label-x-text, drawing-label-y-bg, etc.), not the active drawing line color. Override those palette keys in dependencies.palette to align axis label colors with your design.

reference — Configuring drawings — Measure box and axis labels, Palette

Q120: Is it possible for us to make the vertical crosshair snap to the middle of the candle when it moves?

A: Yes — enable discrete: true on components.crossTool in initialChartConfig. This snaps the crosshair X coordinate to the center of the nearest candle (enabled by default). Set magnetTarget ('O' | 'H' | 'L' | 'C' | 'OHLC') to snap the Y coordinate to OHLC values.

reference — CrossTool — Discrete mode, Crosshair

Q121: Can we draw on the main canvas to add our own custom elements and interactions? Is this not recommended? If this is something we can do, is there a specific API function we should use to add elements?

A: Yes — custom canvas overlays are supported and recommended for chart-integrated visuals. Register a custom Drawer on the chart's DrawingManager via addDrawer(drawer, name). Access the chart instance from api.onChartCreated (React) or ChartBootstrap (lite). Use chart.bus.fireDraw([canvasId]) to redraw after updates, and chart.toXFromTimestamp() / ChartModel#toX / ChartModel#toY to bind elements to price/time.

reference — Custom drawer

Q122: I have integrated trading sessions providers as suggested. generateSessions method did not get called for me. please suggest.

A: this is handled via tradingSessionsProvider. Please check if you implemented everything according to the documentation

const tradingSessionsProvider = (() => {

console.log('Creating custom provider');

const defaultProvider = createDefaultTradingSessionsProvider();

return {

...defaultProvider,

generateSessions: (...args) => {

console.log('GENERATE SESSIONS REQUEST');

return defaultProvider.generateSessions(...args);

};

})()

reference — Trading Sessions Provider, Providers setup

Q123: Objective: Trigger drawing through functions provided by dxcharts api. Current Status: We have done the poc on triggering drawing functions through the method mentioned (attachDrawingsComponent) in the documentation.

we are not able to enable the drawing settings toolbar which comes up automatically everytime we select a drawing tool from the sidebar. For this we have also enabled the toolbar boolean from the drawing chartReactConfig.Э

Please, be careful. You looked at the documentation of dxcharts-lite regarding this attachDrawingsComponent.

dxcharts-lite by default doesn't include modules like drawings, studies etc, that's why you can use attachDrawingsComponent to wire it up as a module.

BUT

dxcharts-lite is a part of dxchart5-react. And all the modules like drawings, studies are wired up by default in dxcharts5-react. This means you don't need to wire them up manually.

To draw drawings programmatically, you need to call some methods on drawings module.

To get instance of dxcharts-lite with drawings module attached from chart-react do the following:

const onApiCreated = (chartReactAPI) => {
// for 1st chart `chartId = '0'` and `chartInstance` is the instance of `dxcharts-lite` with `drawings`
chartReactAPI.onChartCreated((chartId, chartInstance) => {
// here's the logic to start drawing
const drawingType = 'arrow'
const configCopy = cloneUnsafe(DEFAULT_DRAWINGS_CONFIG[drawingType])
chartInstance.drawings.startDrawing(configCopy)
// if you want to add a complete drawing
const configCopyWithAllPoints = ...your code;
chartInstance.drawings.setDrawing('AAPL', configCopyWithAllPoints)
// if you want to add a pack of drawings
const drawingsMap = {
'AAPL': [configCopyWithAllPoints, configCopyWithAllPoints, configCopyWithAllPoints]
}
chartInstance.drawings.setDrawings(drawingsMap)
})
}

<ChartReactApp onApiCreated={onAPICreated} />

reference — Configuring drawings, Drawings in DXcharts React, Drawings module (lite)

Q124: Coding tools: Typecript5, FP-TS, React18, StyledComponents5, RxJS7

Building tools: Webpack5, Prettier/EsLint, Testings tools: Jest, Playwright As part of the source code acquisition, is there any tooling available for monitoring or debugging? We found this page available, but we want to make sure it is something we would be receiving, https://devexperts.com/case-studies/how-we-delivered-the-dxcharts-source-cod

A: Full source-code deliveries include in-repo debugging helpers; npm/trial ZIP packages do not. callTracer (dev/non-production builds) records view-model action sequences — access via window.__CHART_DEBUG.callTracer.report(). Dev builds also expose window.__CHART_REACT_API, window.__CHART_INSTANCE_<chartId>, window.__CHART_VIEW_MODELS_<chartId>, and window.__CHART_MULTICHART_VM in the browser console. Set sessionStorage.setItem('FORCED_DEBUG', '1') to expose globals in production-like builds. Monitoring infrastructure described in the Devexperts case-study article (external APM/log pipelines) is not part of the library — only callTracer and console globals ship in source.

no link — debugging tooling lives in the source-code repo (callTracer, chart-window-global.ts), not in public library docs

Q125: What testing suites would we receive with the purchase

A: Full source-code deliveries include three suites: e2e-test (Playwright browser tests), unit tests (*.spec.ts alongside chart-react, chart-core, dx-feed-data-provider, etc., run with Jest), and perf-test (FPS/CPU performance harness). These are not included in npm/trial ZIP library packages.

no link — test suites are part of the source-code delivery (e2e-test/, perf-test/, embedded *.spec.ts), not documented separately

Q126: What framework/dependencies/build process are used in the kotlin library?

A: Built-in indicators live in @dx-private/dxstudies — a Kotlin Multiplatform library (Kotlin source under src/commonMain/kotlin/…), built with Gradle and compiled to JavaScript for the browser. Integrators consume the prebuilt npm package — no Gradle/Kotlin toolchain required at runtime. With full source code, you can extend dxstudies in Kotlin or rebuild the JS artifacts.

no link — dxstudies Kotlin/Gradle build is part of the source-code delivery, not public integration docs

Q127: What is causing the library to violate these Content-Security-Policies enforced by Electron apps? We had to turn this policy off temporarily to make the library work (screenshot attached)

A: Strict Electron CSP can block the chart for two reasons. new Function() is still used, but only for custom JavaScript studies — deserializing persisted study code (mapDTOToCustomStudy) and compiling calculation strings (compileCustomStudyFunction in custom-js-studies.model.ts, custom-studies-calculations.utils.ts). Core chart code, built-in dxstudies indicators, and time-axis formatters do not use new Function(). If you use no custom JS studies, this path may never run. DXScript compiles in the separate dx-script-platform-provider package (may also require unsafe-eval). Timezone parsing can spawn blob Workers — add worker-src blob: if needed.

reference — Quick start (React) — Electron / CSP

Q128: if we want to write our custom InstrumentSuggestComponent, how do we get the data (instruments) from SymbolSuggestProvider? Seems like this data is available in MainInstrumentSelectorContainer, but we cannot override the container, just InstrumentSuggestComponent

A: uiOverrides.InstrumentSuggest replaces only the suggest UI. Override props are onInstrumentChanged and instrument (current symbol) — search results from SymbolSuggestProvider are not passed through. In your custom component, call the same SymbolSuggestProvider instance you pass in dependencies.symbolSuggestProvider (searchInstruments, findInstrument). On selection, call onInstrumentChanged with the chosen instrument so the chart updates.

reference — Symbol Suggest Provider — Custom InstrumentSuggest override, UI overrides

Q129: We have our proprietary programming language that allows users to create their own indicators. Do DX charts allow users to create their own indicators?

A: Yes. JavaScript custom studies via api.addCustomStudy() work in all builds — you define calculation logic, parameters, and outputs client-side. DXScript (Devexperts scripting language) requires @dx-private/dxchart-dx-script-platform-provider, real DxScriptProvider/DxScriptRunner dependencies, and chartReactConfig.dxScriptEnabled: true — trial/npm packages ship mocks only. With source code, you can also extend the Kotlin dxstudies library or wire your own language through a custom calculation path.

reference — Custom studies, DXScript integration

Q130: We have approximately 10 more studies that the DX charts. What is the process for requesting new studies? Also can DXScript allows us to build all our own indicators?

A: Four paths: (1) addCustomStudy() — JavaScript indicators without dxstudies changes; (2) DXScript — user-defined script indicators when the DXScript platform provider is integrated; (3) dxstudies (Kotlin) — add built-in studies in source code; (4) sponsored feature — Devexperts implements and ships the study. DXScript/custom JS can cover most proprietary indicators, but replicating every built-in dxstudies indicator in script may require significant effort.

reference — Custom studies, Studies, DXScript integration

Q131: If there are additional drawing tools we would like added, what is the process for requesting new drawing tools?

A: Two paths: implement a custom drawing in source code (DrawingsComponent + figure/drawer), or request it as a sponsored feature for Devexperts to add to the core drawings module. Existing built-in tools are configured via drawingsList — adding new core tool types requires code changes.

reference — Creating a custom drawing, Configuring drawings

Q132: We allow to trade in the pre and post market. For example, from 8 am eastern to 9:30 eastern. How does a user turn the pre/post market bars on and off?

A: Toggle Extended hours in Settings → Market (or the chart background right-click menu → Data). Works only for intraday aggregations (period < 1 day); disabled for daily and larger periods. Your chartDataProvider must return pre/post-market candles when requestHistoryData / subscribeCandles is called with extendedHours: true. Optional: TradingSessionsProvider highlights session types on the chart.

reference — Extended hours, Chart Data Provider

Q133: Do you have a mobile SDK or do we just use the same charting package? Is there another version that’s more properly formatted for a mobile screen?

A: The web/React package is responsive and used in mobile browsers, but native iOS and Android chart SDKs are separate products (not the same npm package). Contact sales@devexperts.com for native mobile licensing.

no link — native mobile SDKs are separate commercial products, not covered in DXcharts React docs

A: Trading UIs are customizable. Override uiOverrides.Legend.Header to extend the legend (top-left quote/trade area where order-entry quantity lives). Override uiOverrides.trading (OrderEntry, Position, RegularOrder, etc.) for trading panels and chart overlays. There is no single config flag for arbitrary regulatory fields — build them in your override components using your quote data.

reference — UI overrides, Trading — Custom trading UI

Q135: Does the library have limitations on the amount of datasets streaming on the chart.

A: No hard-coded limit on live candle streams — the chart subscribes to the main instrument plus all compare symbols on that pane (subscribeLastCandleUpdates per symbol). Default maxCandlesCount is Number.MAX_SAFE_INTEGER. Practical limits are browser memory and your provider's throughput, not a DXcharts cap.

reference — Chart Data Provider

Q136: How many different symbols can be loaded on the chart?

A: Depends on layout. Per chart pane: one main symbol plus any number of compare symbols on the same pane (addCompareInstrument / setCompareInstruments — no hard-coded compare limit). Multichart: up to 8 main symbols (one per pane in the 2x4 layout). Layouts: 1x1 … 2x4 (multichart.model.ts).

reference — Multichart, Compare charts

Q137: How many studies can be added to a chart?

A: No hard-coded API limit on studies per chart. Practical limits are browser/CPU performance (many studies on one pane can be heavier than several empty multichart panes). Add built-in studies via the UI or api.setStudies() / setStudiesByIds(); add JavaScript custom studies via api.addCustomStudy().

reference — Studies, Custom studies

Q138: Ability to plot one or more symbols on the same chart

A: Supported via compare charts — overlay additional symbols as line/area series on a shared percent Y-axis (api.addCompareInstrument(), api.setCompareInstruments(), or include compare instruments in LayoutProvider). This is separate from multiple scales (extra Y-axes / pane placement for studies).

reference — Compare charts, Multiple scales

Q139: Ability to create custom symbols to display on the charts ( Example (AAPL + GOOG)/2 )

A: No built-in synthetic / formula symbol type. Compute blended values on your backend, expose the result as a regular instrument symbol with OHLCV from chartDataProvider, and chart it like any other symbol. Alternatively, plot constituents separately with compare charts.

reference — Chart Data Provider, Compare charts

Q140: Ability to display options price data on charts

A: Not supported now. Any instrument (including an option contract) works if your chartDataProvider / symbolSuggestProvider supply standard OHLCV candles and metadata (priceIncrements, tradingHours, etc.) like a stock or forex symbol.

reference — Chart Data Provider, Symbol Suggest Provider

Q141: Ability to send a chart & it's configuration to a new user, the new user will own the copy and be able to make changes

A: Use LayoutProvider — createLayout() / updateLayout() persist full chart state (instruments, studies, drawings, appearance per layout). Share a layout ID or serialized layout via your backend; the recipient loads it through getLayouts() / updateSelectedLayout(). chartSharingProvider uploads image snapshots only, not editable configuration.

reference — Layout Provider

Q142: Ability to send a read-only version of a chart to a 3rd party user that when the owner makes changes it's reflected in the 3rd party view of the chart.

A: No built-in live read-only mirror. Implement in your host app: persist layout state server-side, push updates over WebSocket/SSE to viewers, and call layoutProvider.updateLayoutData() / chart API on subscribers. Snapshot sharing (chartSharingProvider) is static images only.

no link — live collaborative viewing is a host-application pattern, not a chart library feature

A: Export/import: LayoutProvider (getLayouts, updateLayout, updateLayoutData) stores the full layout snapshot to your DB or localStorage. Share with users: assign layout IDs per user/account in your backend; recipient selects or is assigned that layout on login. URL sharing: encode a layout ID or token in your app URL and load the matching layout in getLayouts() — the chart has no built-in URL serializer for full state (Widget query params cover only a few init flags).

reference — Layout Provider

Q144: Ability to import chart settings, studies, objects, etc

A: LayoutProvider — chart settings, studies instances, drawings, multichart state, compare instruments (per layout snapshot). UserDataProvider — favorites, UI preferences, drawing toolbar positions, etc. CustomStudiesProvider — persist/share custom study definitions (not just instances). Wire import/export buttons via uiOverrides or your app shell calling provider APIs.

reference — Layout Provider, User Data Provider, Custom Studies Provider

Q145: Are custom indicators supported client side or cloud based? build and run client side. ability to sync requires server side

A: JavaScript custom studies (api.addCustomStudy()) — calculated client-side in the browser; persist/sync definitions via CustomStudiesProvider (your server/DB). DXScript — execution runs through DxScriptRunner; trial builds use mocks/demo infrastructure, production requires your own dx-script-platform-provider backend instance. Built-in dxstudies indicators run client-side via the compiled Kotlin/JS bundle. Sync across users/devices always needs your persistence layer — not built into the chart alone.

reference — Custom studies, Custom Studies Provider, DXScript integration

Q146: Ability to view your custom studies on any chart instance?

A: Yes. Register a study with api.addCustomStudy() or load definitions through CustomStudiesProvider — on chart init the provider calls getAllStudies() and registers each study globally via dxStudiesProvider.registerStudy(). Once registered, the study appears in the indicators picker on any chart pane or multichart instance. Adding a study to one pane does not automatically apply it to others unless multichart studies sync is enabled.

reference — Custom studies, Custom Studies Provider — Loading studies

Q147: Ability to create studies that create/control drawing objects on the chart

A: Partially. Custom studies render indicator output plots (lines, histograms, markers, candle coloring) defined in metainfo.lines — they do not create or control user drawing tools (trend lines, Fibonacci, shapes, etc.). Use the drawings API separately if you need interactive shapes on the chart.

reference — Custom studies — Output lines (plots)

Q148: Ability to write studies using different programming languages and import into DX charts? natural language?

A: Supported paths: JavaScript custom studies (addCustomStudy()), DXScript (with the DXScript platform provider integrated), and Kotlin dxstudies (source-code builds). There is no natural-language indicator authoring — you implement calculation logic in one of those languages. Import user-defined studies via CustomStudiesProvider (serialized JS) or DXScript runner integration.

reference — Custom studies, DXScript integration, Custom Studies Provider

Q149: Ability to create/set/manage alerts with your custom studies & have them running while platform is offline

A: Not in the current release. As of June 2026, study and indicator alerts (including custom studies) are planned for the next minor version — UI to create, set, and manage alerts from the chart. Offline alerting (notifications while the platform is closed) will still depend on your backend or notification service; the chart evaluates conditions when the client is connected. Until that release ships, implement alerting in your host application if you need it today.

no link — planned for next minor version; not yet in library or docs

Q150: What is the process for requesting new indicators?

A: Same options as adding missing built-in studies: (1) addCustomStudy() — JavaScript indicators without dxstudies changes; (2) DXScript when the platform provider is integrated; (3) dxstudies (Kotlin) in source-code builds; (4) sponsored feature — Devexperts implements and ships the study (contact sales@devexperts.com or your sales manager). DXScript/JS can cover most proprietary indicators; replicating every built-in dxstudies study in script may require significant effort.

reference — Custom studies, Studies, DXScript integration

Q151: Can we have indicators renamed to other names?

A: Yes. Built-in studies: override display names in localization.studies (e.g. macd.title) and pass the same dictionary to DEFAULT_STUDIES_LIST(yourStudiesDictionary) when wiring dxStudiesProvider — no source-code changes required. Custom studies: set metainfo.title / shortTitle when registering.

reference — Localization — Renaming built-in indicators, Custom studies — Study configuration

Q152: If studies are created for TS, do all DX chart clients get the them?

A: No — not automatically. Studies you add via CustomStudiesProvider or addCustomStudy() are distributed only to chart instances that load them (your backend, localStorage, or in-memory registration). DXcharts does not push custom studies to other clients. Kotlin dxstudies changes shipped as a sponsored feature depend on your contract (npm package update vs. source delivery).

reference — Custom Studies Provider

Q153: Can we set alerts on drawing tools? Are they available if the platform is offline? This is for price/volume alerts

A: No. DXcharts has no built-in drawing or price/volume alerts, and nothing runs while the platform is offline. Implement alerts in your host application if needed.

no link — no alert feature in the chart library; host-app responsibility

Q154: Activation Rules - can trades be generated based upon indicator triggers?

A: No — not out of the box. The chart can display orders and positions via OrderProvider / PositionProvider, but rule-based or indicator-triggered trade generation is handled by your trading platform/backend, not by DXcharts.

no link — indicator-triggered trading is a host-platform concern

Q155: Ability to display open orders on chart

A: Yes. Implement OrderProvider.observeOrders() and push the current list of open orders for the active symbol — the chart renders them as draggable order lines (market, limit, stop, and protection orders). Use createOrder / updateOrder / deleteOrder for user interactions from the chart UI.

reference — Trading, Order Provider

Q156: Ability to display filled orders on chart

A: Yes

Q157: Ability to create new single orders and TP/SL, prefably with estimated profit and loss shading visualization

A: TP/SL are in place

Q158: Ability to cancel/replace the order via drag and drop

A: TP/SL can be changed via drag and drop

Q159: DX Offers market data and cloud running of the scripts/stratgies etc... -> we need to understand if we can use our own market data with the DX Cloud tools.

A: not out of the box

Q160: Do DX charts support data tables? display results of the indicator in a data table on the chart

A: Tables can not be shown on charts

Q161: Can back testing be done?

A: Not now

Q162: Does the mobile package include all the same functionality as the web based charting?

A: Yes, but with the different UI - no custom scripts

Q163: Does the library support accessibility standards (e.g., WCAG) to accommodate users with disabilities.

A: Yes, hotkeys and screen readers support

Q164: Localization capabilities, including support for multiple languages, date/time formats, price formats, enhance usability for global audiences.

A: Yes you will be able to localise the library on your language including Arabic

Q165: Which operating systems does the library support? MAC, PC, Linux

A: no limitations

Q166: Are there browser limitations?

A: no limitations but we test on Chrome, Firefox, Safari

Q167: Ability to save drawing tools settings (color, thickness, etc)

A: On users level - yes, per drawing tool

Q168: Set right margin and set vertical scaling

A: Yes

Q169: Automatic scaling (horizontal and vertical): Double click automatic scale, and set chart to automatic scaling default

A: Yes

Q170: Zoom in/out and reset

A: Zoom in/zoom out in place, reset via double click on timescale

Q171: Smart scaling - as prices move off screen will the screen auto adjust to display

A: If the latest candel is on the screen the viewport will move

Q172: Ability to display correct formatting for futures - fractional and exotic

A: Not out of the box

A: UiOverrides only available via library. In Widget there's no way to use that API.

Q174: we've found this links in the library code. Our concern is, whether if some data would be send by that link or whether it would cause redirect issue.

https://webdev.prosp.devexperts.com:8095/api/lib-alive https://devexperts.com/dxcharts/kb/docs https://webdev.prosp.devexperts.com:8095/api/snapshot https://devexperts.com/dxcharts https://webdev.prosp.devexperts.com:8095/docs/chart/x-axis https://webdev.prosp.devexperts.com:8095/schedule-view

A: https://webdev.prosp.devexperts.com:8095/api/lib-alive

This URL is used by us to check if library is being used or not.

https://devexperts.com/dxcharts/kb/docs

Link to our knowledge base. This link is used in studies config to give some information about study. You can replace studies config with your own, or map through ours default and delete this line if you don't like it.

https://webdev.prosp.devexperts.com:8095/api/snapshot

We have default chartSharingProvider implementation that wired up to our server and this link is a part of it. This provider is responsible for snapshot functionality. Please make sure that you need to implement your own chartSharingProvider

https://devexperts.com/dxcharts

This is a promo link for web crawlers that attaches to DOM.

You can disable it via

https://webdev.prosp.devexperts.com:8095/docs/chart/x-axis

That's a link to our documentation if you as a developer provided wrong format for XAxis labels format configuration.

https://webdev.prosp.devexperts.com:8095/schedule-view

We have default implementation of tradingSessionsProvider and this link is a part of it. This provider is responsible for sessions. Please make sure that you need to implement your own tradingSessionsProvider

Q175: If I run DXChart.destroy(), on a page with one chart it destroys that chart, but on a page with 2 charts it destroys only the second chart. Is this the expected behaviour?

A: you either need to call chartReactAPI.internal.destroy()

Q176: I notice there are two places I where can obtain the api:

[1] props.onAPICreated() (with API in capitals) [2] props.dependencies.onApiCreated() If I specify it in both places (as an experiment), only [1] gets called, seemingly preventing the other one from being run. I am wondering why this similarly-named callback is in two places, do they do they have identical functionality, and which version do you recommend we use?

A: They are exactly the same, the only difference, that props.onAPICreated() was lifted one layer up for a simplicity while using widget.

props.dependencies.onApiCreated() is default dxcharts-react library callback, we didn't modify type declarations dependencies, but props.onAPICreated() has priority over props.dependencies.onApiCreated() in widget.

Q177: We are able to change the colors in the "Most important colors" and "Chart-core colors" palettes. However, we are not able to change the palettes under "Other colors" in our project. We are following the same structure that works for the others.

Example below: // palette.ts

export const customPalette = {

light: { object: { 'main_chart-bg': 'rgb(226, 238, 255)', // Most important colors 'dropdown-list_item-selected-text': 'rgba(0, 0, 255, 1)' // Blue - Other colors } }, dark: { object: { 'main_chart-bg': '#1e1e1e', 'button-border-bg': '#000000', 'button-buy-default-bg': '#ffffff', 'button-buy-default-color': '#000000', 'button-buy-hovered-bg': '#f0f0f0', 'button-focus-border': '#ff0000', 'button-primary-border-default': '#0000ff', 'axis-text': '#ff0000', } } };

A: Regarding custom palette colors. Piece of code provided looks right and should work as well.

Please check these things:

dev-tools eg HMR/hot-reload updates the code correctly;
appropriate theme selected (for example, default theme is dark, but color has changed only in light theme);
palette object is passed via dependencies.palette prop of ChartReactApp:

const deps = { ... }; const palette = { dark: { ... }, light: { ... }, }; <ChartReactApp dependencies={{ ...deps, palette, }} />

Q178: We are running into some issues while lazy loading our candlestick data. Our API takes 3 params -> from_time, to_time and intervalOn the initial chart load in the method requestHistoryData - the from_time comes as 0, this means that data will be fetched since the beginning of that instrument. This results in a high API response time and payload for us. Can we initially fetch data for a certain timeframe without us hardcoding the initial from_time? The ideal scenario would be - we only fetch the data that is required to render the candles in the initial viewport - and then lazily load the previous data as the user scrolls back. We could not find any such callback/method in the documentation for implementing this

A: Something goes wrong, if on initial chart load requestHistoryData receives fromTime = 0. Actually, fromTime is optional argument and not passed to options argument in most of the cases at all. I must have confused the undefined and 0 value. When fromTime is undefined (in most of the cases) it shouldn't be interpreted by the provider code as this means that data will be fetched since the beginning of that instrument. It's not.

fromTime usually used from timeframe presets, so in cases of lazy-loading, provider's code can ignore it at all. For lazy loading only toTime is important because it identifies the oldest candle already loaded and passed to provider to determine to which time stamp additional candles need to be loaded. Number of additionally loaded candles can be defined by the provider itself. If API takes 3 params described above, probably, from_time parameter can be calculated like this (pseudo-code):

requestHistoryData(symbol, aggregation, { toTime, fromTime }) { const interval = ...; return apiCall({ symbol, aggregation, to_time: toTime, from_time: fromTime ?? (toTime - interval) }) }

Most important thing, that both options (fromTime/toTime) is OPTIONAL and can be undefined.

One of the cases where fromTime can be = 0 - on very-very first chart load when there's no any layout and user data. It's looks like a mistake and value should be just undefined, but it's not changing the main behaviour. So, looks like there's several possible cases:

chart loaded very first time: fromTime = 0 (possibly will be changed in future) and toTime = undefined
chart loaded first time after page reload: fromTime = <timestamp> and toTime = undefined
chart scrolled to the left in history and new data needs to be lazy-loaded: fromTime = undefined and toTime = <timestamp>
timeframe preset selected: fromTime = <timestamp> and toTime = <timestamp>

Q179: concerning lazy loading, thank you for the detailed explanation about the internals! However, there is still some lack of understanding at our end. The issue with fromTime and toTime coming as undefined / 0 in most cases is that our api expects timestamps in the payload, according to which it fetches the candles within the timeframe provided. So to fetch the candles in the initial viewport, we need the latest timestamp, as well as the first timestamp corresponding to the leftmost candle in the viewport, which is where we are running into issues since the library is not giving us a fixed timestamp on initial load.How can we possibly pre-select a timeframe preset to get the fromTime and toTime timestamps?

As DXcharts is data-source agnostic library any arguments we provide to data provider methods are not query parameters to the data source in most cases. These arguments, eg. fromTime/toTime simply reflect the current state of the chart, not the chart request to load additional data. Therefore, you can either use the current state of the chart to calculate the necessary query parameters, or completely ignore them.

On very first load, when user didn't perform any scrolling actions and there's no any user-related/layout-related data form previous chart usage, you can just load latest dataset. In this case, the rightmost candle will be the newest by current moment (Date.now()) and the leftmost candle will be any interval in the past from current moment you want to be loaded in your data provider. On the second load, when chart was already loaded with some date (after very first load), you'll receive fromTime argument which is the leftmost candle timestamps of previously loaded data. If user will scroll the chart on right, in history data, your provider will receive toTime argument which will be a timestamp of rightmost candle in viewport and leftmost candle in already loaded candles. So, to load additional set of candles you can use toTime as a rightmost cut-off of data, and leftmost cut-off you can calculate based on the desired data interval, eg (pseudo-code):

requestHistoryData(symbol, aggregation, { toTime, fromTime }) {

if ( ! toTime) toTime = Date.now();
if ( ! fromTime) fromTime = toTime - periodToMinutes(aggregation) * 60 * 1000 * COUNT_OF_CANDLES;

return apiCall(symbol, aggregation, fromTime, toTime);
}

const chartWithDrawings = attachDrawingsComponent(localChart.current) const configCopy = DEFAULT_DRAWINGS_CONFIG['path'] chartWithDrawings.drawings.startDrawing(configCopy) The above code initiates the ‘path’ drawing, however, it does not completely replicate the functionality on clicking the original sidebar, eg. the popup for the drawing settings/line color /lock-unlock isn’t visible. What could we be missing out here?

A: If you're using chart-react library and just want to make your own drawings toolbar, basically. you don't need to call attachDrawingsComponent at all, because chart instance from chart-react already has drawing attached to it. Moreover, an additional call to this function can lead to unpredictable effects

Q181: Just to understand is there a feasibility to do our custom automatic drawings with the android/iOS sdk like web?

A: Not as of now unfortunately, but we are looking to extend mobile library possibilities.

Q182: The requestHistoryData function does not seem to provide the expected parameters

A: requestHistoryData receives all necessary arguments, eg. symbol, aggregation period and optional arguments eg. toTime/fromTime. The last arguments are needed for things like previous candles retrieving, additional candles lazy-loading and timeframe presets. There's several possible cases are associated with them:

chart loaded very first time: fromTime = 0 (possibly will be changed in future to undefined as well) and toTime = undefined
chart loaded first time after page reload: fromTime = <timestamp> and toTime = undefined
chart scrolled to the left in history and new data needs to be lazy-loaded: fromTime = undefined and toTime = <timestamp>
timeframe preset selected: fromTime = <timestamp> and toTime = <timestamp>

Q183: Configuring an image as part of a custom button instead of text was discussed

A: you just need to use ChartToolbarButtonWithTooltip component to it like this:

import { ChartToolbarButtonWithTooltip } from '@dx-private/dxchart5-react/dist/chart/components/chart-toolbar/chart-toolbar-button-with-tooltip.component'; export const CustomToolbarButton = memo(() => { .... return ( <ChartToolbarButtonWithTooltip icon={icon} label={'Tooltip'} /> ); }); const toolbarButtons = addCustomToolbarButtons({ button: CustomToolbarButton, index: 21 }); <ChartReactApp {...props} uiOverrides={{ Toolbar: { ...DEFAULT_TOOLBAR_BUTTONS, ToolbarButtons: toolbarButtons }, }} dependencies={deps} />

Q184: The generateSessions method in the Trading session provider is not being called

A: In codebase, generateSessions call happens as an effect to new candles loaded. So, probably, you need to complete your implementation of ChartDataProvider and make sure that this part is completely finished.

Q185: Additionally, guidance is sought on the logic expected for the onInstrumentChanged method.

A: This is your provider custom callback which can be just empty function if you don't need it. Basically, it's created to notify SuggestProvider when instrument changed in specific chart (multichart feature) to make some side-effect on this action.

A: There's no any requirements except compliance with data types. To provide holidays and any other non-trading days just put TradingSession object with type NO_TRADING. To get Market State widget working, you need to successfully implement TradingSessionsProvider. The main thing, for this widget, is to provide the next trading session to chart be able to calculate when market will open.

Q187: dependencies.initialChartConfig: please see my comments there; it seemed like the items I needed to put in there are from the dxcharts-lite config section, and I couldn’t find any of that by following the TypeScript definitions as I had with all other sections of the config. Should this section follow the structure here: https://devexperts.com/dxcharts/documentation-for-developers/dxcharts-lite/Chart%20Config ?

A: this is config for our canvas library dxcharts-lite which is open source, and you can find on github https://github.com/devexperts/dxcharts-lite.Config you're interested in can be found here https://github.com/devexperts/dxcharts-lite/blob/master/src/chart/chart.config.ts

Q188: Chart crashes when background colour is picked (whether the values are RGB or RGBA)

These are fixed background colours that can be picked in the colour picker. #FF0000", "#00FF00", "#0000FF", "#999999

A: Regarding colorPalette - please, provide colors in the next format rgba(1, 1, 1, 1). Alpha channel is crucial

Q189: I see warning about URL, what should I do?

A: Its because we use webworkers under the hood to do some things in a more performant way. The thing is that chart can't create workers in your environment obviously, that's why you see this error. Soon we are going to introduce a fix for this errors

Q190: Please also let us know how we can hide the bottom bar which shows the timeframe selection and how we can change timeframe and intervals through code

A: ### Hiding the Bottom Bar

To hide the bottom bar, you can use the chartReactConfig to disable the timeframe selection UI component.

javascript const chartReactConfig = { timeframePresets: { mode: 'none' } }; <ChartReactApp dependencies={{ chartReactConfig }} />

Changing Period Through Code

To change the timeframe and intervals programmatically, you can use the changePeriod methods provided by the chartReactAPI.Here is an example of how to change Period :

javascript const onApiCreated = (chartReactAPI) => { chartReactAPI.onChartCreated((chartId, chartInstance) => { // Change the aggregation period chartReactAPI.changePeriod({ duration: 30, durationType: 'm' // 'm' for minutes, 'h' for hours, etc. }); }); }; <ChartReactApp onApiCreated={onApiCreated} />

A: separate parts of application uses their own config, i.e if you need something to configure on canvas - use initialChartConfig

Q192: on web workers – our product is already a PWA and uses a service worker; as far as I’m aware, there is no environmental reason that standard web workers should not operate.

A: For now our recommendation is to stick to disabled workers.

Q193: could you also let us know how to change the time frame of the graph? eg. 1D, 1W, 1M, 1Y etc

const initialTimeframePresets: {
presets: [
{
timeframe: { label: '1D', value: 60 * 60 * 24 // day in sec },
aggregation: {
duration: 1,
durationType: 'm',
},
},
...
],
};

<ChartReactApp dependencies={{ initialTimeframePresets }} />

Q194: how can we hide this bottom bar which shows % and log?

A: chartReactAPI.changeInstrument('GOOG', chartReactAPI.getSelectedChartId());

Q195: Do we need to implement any provider specific to handle multi charts ?

A: There's no separate provider for multi-charts.

Q196: I have a question regarding resetting the chart candles data when the symbol changes.When the instrument changes, I call the changeInstrument method on the chartReactAPI from my component.After changing the instrument, I also need to reset the chartCandlesData stored in the provider. I can't expose a new method like resetCandlesData directly to the provider due to potential type errors. This seems like a common scenario to me. Could you please advise on the ideal approach for handling this situation?

A: Could you try to use use updateCallback function which is the last argument of chartDataProvider.requestHistoryData. Read more https://devexperts.com/dxcharts/documentation-for-developers/dxcharts-react/API%20Reference%20-%20Providers

A: about duplicating candles after switching between multichart/singlechart layouts. The only reason chart can draw duplicated candles is when candles data is duplicating. Which data chart receives from provider, that data will be displayed. Actually, we can see it on video, when data count doubles at each action, it's wrong behavior and probably should be fixed on data provider side. Client should make sure that provider return the correct data to the chart.

Q198: Regarding the trading session provider, could you please provide a sample TradingSession object that I need to return in the generateSessions method for the following scenarios:

Regular trading sessions are from Monday to Friday, starting at 9:15 a.m. and ending at 3:30 p.m. There are no trading sessions on weekends. There is a special trading session on May 18, 2024, which is a Saturday. There is a trading holiday on August 2, 2024, which falls on a Wednesday.

A: here's an example of trading sessions array

[

{

"from": 1720569600000,

"to": 1720598400000,

"type": "NO_TRADING"

{

"from": 1720598400000,

"to": 1720612800000,

"type": "PRE_MARKET"

{

"from": 1720616400000,

"to": 1720641600000,

"type": "REGULAR"

{

"from": 1720641600000,

"to": 1720656000000,

"type": "AFTER_MARKET"

{

"from": 1720656000000,

"to": 1720684800000,

"type": "NO_TRADING"

{

"from": 1720684800000,

"to": 1720699200000,

"type": "PRE_MARKET"

{

"from": 1720702800000,

"to": 1720728000000,

"type": "REGULAR"

{

"from": 1720728000000,

"to": 1720742400000,

"type": "AFTER_MARKET"

{

"from": 1720742400000,

"to": 1720771200000,

"type": "NO_TRADING"

{

"from": 1720771200000,

"to": 1720785600000,

"type": "PRE_MARKET"

{

"from": 1720789200000,

"to": 1720814400000,

"type": "REGULAR"

{

"from": 1720814400000,

"to": 1720828800000,

"type": "AFTER_MARKET"

}

]

NOTE: timestamps are mocked. Please, change timestamps to what you need

Q199: I am currently testing our requestHistoryData() implementation, and have noticed that options.fromTime is 0 and there is no options.toTime.

A: fromTime and toTime is not exactly the date range that you should request data for, it's more like a viewport state. So it's not strict actually and you can change range the way you like.

When chart loads, especially for the first time, there's no date range actually - we don't know how much data to request. That's why we send fromTime as 0 and toTime as undefined. You can provide any amount of data you want.

toTime always provided when lazy loading was triggered. toTime indicates the leftmost candle you have on chart. That means that you can provide any amount of data to the left with the right bound pointed to toTime.

When fromTime is provided it doesn't mean that you strictly should provide data in the range fromTime - Date.now, it only tells you - look, user's left viewport bound is fromTime, please provide at least data from fromTime, but you can provide more or less in case you have fewer data for that instrument.

Q200: I have some test bars which display fine on our chart if I return Promise.resolve(arr). However, I need to be able to send the bars array to the chart at any time (and not just at the end of the requestHistoryData function), and that’s what I assume the updateCallback is for.

A: updateCallback should only be used on subsequent calls. What it means? When chart asks you a data (for example on load or when you change aggregation/instrument) via requestHistoryData you should provide him history data via return value, pretty simple. BUT, there are some cases when you want to change data after some time, for example when some part of candles changes in the middle, then you should store this updateCallback somewhere and call it providing ALL THE CANDLES, including new ones. Please, be careful, because this method don't support partial updates, it updates all the history.

Q201: One other thing I’ve noticed is that when I scroll backwards in the chart, the library is not requesting further historic data. Should I expect the requestHistoryData() function to be called by the library to request previous historic data as I scroll?

A: Yes, you should expect the requestHistoryData function to be called by the library to request previous historic data as you scroll backwards in the chart. This is part of the lazy loading mechanism in DXcharts. Here’s how it works:

Lazy Loading Mechanism

Initial Load:

On the initial chart load, requestHistoryData may receive fromTime as 0 or undefined, indicating that it should fetch the latest dataset required to render the initial viewport.

Scrolling Backwards:

When you scroll backwards in the chart, the library will call requestHistoryData with the toTime parameter, which identifies the oldest candle already loaded. This allows you to fetch older data.

Example Implementation

javascript const requestHistoryData = (symbol, aggregation, { fromTime, toTime }) => { const interval = ...; // Define your interval here if (!toTime) toTime = Date.now(); if (!fromTime) fromTime = toTime - interval * 60 * 1000 * COUNT_OF_CANDLES; return apiCall({ symbol, aggregation, to_time: toTime, from_time: fromTime }); };

Detailed Steps:

Initial Load:

javascript if (!toTime) toTime = Date.now(); if (!fromTime) fromTime = toTime - interval * 60 * 1000 * COUNT_OF_CANDLES;

Lazy Loading:

javascript // Use toTime to determine the timestamp for additional candles

Documentation Links

For more detailed information, you can refer to the DXcharts documentation:

DXcharts Documentation - Providers.

This approach ensures that you fetch only the data required to render the initial viewport and then lazily load additional data as needed.

Q202: The above clarification is for setting the initial timeframe presets if I'm not wrong – We need to select one of these presets through one of the callback functions - which is what we need to know, please help out here!

A: There is no callback functions for selecting one of these presets. Initial timeframe presets pass through decencies dependencies.initialTimeframePreset

Q203: Is changing the font family of the chart feasible?

A: You can change fonts in canvas (example will be posted below). We will create a guide in our documentation on how to change fonts for React components. This will take time so please not be blocked for your potential launch by this change:

Example on how to change for canvas:

You can achieve this by configuring the fontFamily property in the chart configuration. Here is an example of how to change the font family:

Example Implementation

javascript import { ChartReactApp } from '@dx-private/dxchart5-react'; const initialChartConfig = { components: { xAxis: { fontFamily: 'Open Sans, sans-serif', fontSize: 10, }, yAxis: { fontFamily: 'Open Sans, sans-serif', fontSize: 10, }, watermark: { fontFamily: 'Open Sans, sans-serif', } } }; <ChartReactApp dependencies={{ initialChartConfig }} />

Detailed Steps:

Set Font Family for X-Axis:

javascript components: { xAxis: { fontFamily: 'Open Sans, sans-serif', fontSize: 10, }, }

Set Font Family for Y-Axis:

javascript components: { yAxis: { fontFamily: 'Open Sans, sans-serif', fontSize: 10, }, }

Set Font Family for Watermark:

javascript components: { watermark: { fontFamily: 'Open Sans, sans-serif', } }

Documentation Links

For more detailed information, you can refer to the DXcharts documentation:

DXcharts Documentation - Chart Config.

Q204: On adding indicators, they are added to the viewport and the chart is shrunk. How can we avoid changing the height of the chart and add the indicators below the viewport?

A: How can we change the default icons for event the event bubbles on charts (the default icons being rhombus)? We wanted to use custom initials for the icons which we receive on the client through an API

We will create a guide in our documentation on how to change fonts for React components. This will take time so please not be blocked for your potential launch

Q205: Our backend currently supports data time frames of 1 minute, 30 minutes, and 1 day. For intervals like 15 minutes (which fall between 1 minute and 30 minutes), we would like the chart to use 1 minute data to plot candles for 15 minutes. We use requestHistoryData and subscription to provide 1 minute data, expecting the chart to aggregate this data for 15 minute candles. Could you please advise on how to configure this?

A: You would need to paste these 15 candles together on you custom data provider side and then pass them to the chart. Charts expects to receive 15 minutes candles data when 15 minutes aggregation option is selected in the UI.

Code sample for you data provider:

const aggregateToFifteenMinutes = (oneMinuteData) => {

const fifteenMinuteData = [];

for (let i = 0; i < oneMinuteData.length; i += 15) {

const chunk = oneMinuteData.slice(i, i + 15);

const aggregatedCandle = {

time: chunk[0].time,

open: chunk[0].open,

high: Math.max(...chunk.map(c => c.high)),

low: Math.min(...chunk.map(c => c.low)),

close: chunk[chunk.length - 1].close,

volume: chunk.reduce((sum, c) => sum + c.volume, 0),

};

fifteenMinuteData.push(aggregatedCandle);

}

return fifteenMinuteData;

};

Q206: I would like to provide different loading states to the chart by using initialLoading property on the ChartReactAppConfig. From the typings below, I could not figure out how to configure these. Can you please provide an example on how to show our own loading states for symbol loading and candle loading etc.

A: Unfortunately we don't have a guide or quick solution for this customisation. Will take into account for the next DXcharts releases

Q207: I have reviewed the trading sessions attached in the previous email. I’m unsure how they are configured for Monday to Friday, as the JSON file only contains epoch timestamps which seem specific to particular days or weeks. Additionally, I am unsure how to incorporate special trading sessions on specific Saturdays or trading holidays on weekdays. On the Android DX build, we use the Schedule object to define days (Monday to Friday) and specify sessions for those days. Is there a similar configuration available for the web bundle?

A: Web and Android works differently in case of trading sessions. I have attached the same file with additional comments on top. DXcharts interface consumes data in this format (like in attached exampl). In your provider you can use the preferable session format and then convert it to what DXcharts understands.

[

{

// as you can see here, you define NO_TRADING session from 12:00 AM to 8:00 AM on 10 Jul

"from": 1720569600000, // GMT: Wednesday, July 10, 2024 12:00:00 AM

"to": 1720598400000, // GMT: Wednesday, July 10, 2024 8:00:00 AM

"type": "NO_TRADING"

{

// after that obviously PRE_MARKET sessions starts from 8:00 AM to 12:00 PM

"from": 1720598400000, // GMT: Wednesday, July 10, 2024 8:00:00 AM

"to": 1720612800000, // GMT: Wednesday, July 10, 2024 12:00:00 PM

"type": "PRE_MARKET"

{

// then REGULAR session starts from 12:00 PM to 8:00 PM

"from": 1720612800000, // GMT: Wednesday, July 10, 2024 12:00:00 PM

"to": 1720641600000, // GMT: Wednesday, July 10, 2024 8:00:00 PM

"type": "REGULAR"

{

// and AFTER_MARKET then starts from 8:00 PM Jul 10 to 12:00 AM Jul 11

"from": 1720641600000, // GMT: Wednesday, July 10, 2024 8:00:00 PM

"to": 1720656000000, // GMT: Thursday, July 11, 2024 12:00:00 AM

"type": "AFTER_MARKET"

}

]

Q208: To update the watermark, When I implement below code, the custom watermark I apply only appears briefly before reverting back to the default watermark on the charts. I am calling this method once api is created. Please review my code below and let me know how to update the watermark on initial load, change instruments, switch between layouts on multi charts etc. Please refer to the attached video for my current issue i am facing.

A: Unfortunately there is no way to use custom watermark now, it is always linked to the instrument.

Q209: API methods like changeTheme do not work when uiOverrides dependencies are added to the chart. Without uiOverrides, methods such as changeTheme and changePeriod function as expected. Please review the code below and let me know if any adjustments are necessary:

A: Since ChartReactApp is a React component. And you pass {} to property called uiOverrides . It means, that ChartReactApp component will receive new object every rerender, which will lead to ChartReactApp rerender too. We will fix it, so ChartReactApp will not be rerendered in that case, because we don’t support runtime prop changes.

To unblock you, simply wrap your uiOverrides object with useMemo

const uiOverrides = useMemo(() => ({Toolbar}), [])

and pass it to ChartReactApp uiOverrides prop

Q210: We want to be able to change the timeframe through our UI. How can we achieve this if there is no callback function available for the same?

A: You can change the present in runtime via api.changeTimeframe

Q211: How can we find if an indicator on the chart is turned off/on? Ideally, on clicking the close button of an indicator on the chart, we want to find out which indicator is closed

We tried the following approach but the subscription to the observeStudiesConfigChanged method logs undefined on any changes in indicators - ChartWithModules.studies.observeStudiesConfigChanged().subscribe((config) => { console.info(config) })

There's no special API or event to notify user-land code about studies changes, but we can try to implement such kind of interaction for different ways with varying degrees of convenience. First of all, provided example of subscription doesn't contain config argument in callback function. It works mostly like plain notification notifying that some changes have occurred in the studies config. Determining which exact changes occurred, for example, which studies was removed or added, should be handled by user-land code:

instance.studies.observeStudiesConfigChanged().subscribe(() => {
const studies = instance.studies.model.studies;
// determining which changes happened
});

For us the most appropriate way to handle such cases - implementing custom LayoutProvider which will track which changes happened using the layout config, in which studies are present as well:

// LayoutProvider

export function createLayoutProvider(): LayoutProvider {
...
const updateLayout = (layout: ChartLayoutWithId): Promise<void> => {
// layout.charts[i].studies[j] - current state of studies on all charts of layout
// determining which changes in studies happened
};
...

return {
...
updateLayout,
};
}

Q212: Regarding the trading sessions provider, could you please be more specific? Does DX need timestamps for only the current and next trading day, or does it require additional days as well?

We recommend to to provide timestamps for 14 days ahead from the current day

It seems this omission from the api-side and a great opportunity to improve it. Probably, we'll add ability to set these fields separately and optional. For now client can use such workaround:

import { DEFAULT_LIST_OF_TIME_ZONES } from '@dx-private/dxchart5-react/dist/utils/timezones/timezones';

const timezones = { currentTimezone, listOfTimezones: DEFAULT_LIST_OF_TIME_ZONES };

To localize xAxis labels client may define these configs in order of days in week and months in year:

const dependencies = {
initialChartConfig: {
shortMonths: [],
shortDays: [],
}
};

Q213: Price type settings:In the price type settings, I see four options: Last, Market, Bid, and Ask.

A: This is responsibility of ChartDataProvider, equestHistoryData. In options there is priceType: ‘last’ | ‘mark’ | ‘bid’ | ‘ask’. Chart will request market data with the type specified in the UI, while provider should give candles with the necessary type.

A: You can use ChartReactSupportedAPI.setAggregationRestrictionRule api method to filter superfluous timeframe periods. In this particular case, it can be done like this:

api.setAggregationRestrictionRule((aggregation: AggregationPeriod) => aggregation.durationType !== 's');

Q215: Is there a way to add validations to aggregation periods, like: 300 minutes for minutes, 24 hours for hours, 365 days for days, 54 weeks for weeks, 12 months for months, and 30 years for years.

A: Pls take a look at this example

api.setAggregationRestrictionRule((aggregation: AggregationPeriod) => { if (aggregation.durationType === 'h' && aggregation.duration !== 24) { return false; } // any other restrictions and conditions return true; });

Q216: Wanted to hide a few options on the settings tab. For example, we do not want to display the "Conference Calls" option in the Event settings. Please let me know if this is possible.

A: We don't have official api for this yet, but it can be done on client-side using css styling

Q217: How can we set the Y axis bounds to keep the chart's Y scale within the stock's all time low and all time high values?

A: For runtime you can use setYScale/setXScale functions, while to change that during initialisation subscribe to chartInstance.data.observeCandlesChanged after candles are set. Use instance.scale.setYScale / instance.scale.setXScale to manually specify range and scale right after initialization. And then set Autoscale to false initialChartConfig: { scale: { auto: false } }

Q218: I am encountering an issue with the generateSessions method in the TradingSessions provider. I have configured the from and to options to span from the provided epoch time to 14+ days ahead. The timezone is set to 'Asia/Kolkata' using the getTimeZone method in the TradingSessions provider.

However, the trading hours displayed on the chart are incorrect. Expected trading hours: 09:15 to 15:30 Displayed on the chart: 15:30 to 23:59 Note: I was asked to pass the tradingHours parameter as an optional string in the findInstrument method within the SymbolSuggestProvider. I tried passing the following value to denote market hours from 09:15 to 15:30 in IST: MumbaiIN(rt=0530;0=p00000000r09150915a09150915) However, the issue still persists regardless of whether I include this data or not.

A: Please check how tradingSessionsProvider.getTimeZone is implemented. It should receive and process options argument which contains instrument's symbol and instrument's tradingHours. If tradingHours of specific instrument is undefined, it means what UTC should be returned form this function. If specific instrument has declared tradingHours in format NewYorkETH(....), getTimeZone should return timezone based of instrument's tradingHours field in format America/New_York. Important that getTimeZone returns not just any timezone but transform instrument tradingHours to timezone format. Small example of implementation:

Q219: Wanted to hide a few options on the settings tab

A: For example (disclaimer: its bad approach and not recommended), for me this CSS selector is working fine:

#events-tab :nth-child(5) { display: none;}

The also way to do that is to create fully custom setting tab for events from scratch. It's not very convenient and probably will require many internal API usage, but it's also possible and as I know, this approach also used by some of our clients. Please check this article for more details: https://devexperts.com/dxcharts/documentation-for-developers/dxcharts-react/Component%20Overriding/Settings%20Tabs/settings-popup-tabs

Q220: How can I make Crosshair initialised by default in the default graph, so there wont be a need for users to manually set it.

A: const dependencies = { initialChartConfig: { components: { crossTool: { type: 'cross-and-labels', // 'cross-and-labels' | 'only-labels' | 'none' ... }, ... }, }, }; <ChartReactApp dependencies={dependencies} />

Q221: How do I change the default color of the drawing line (by default it is yellow)?

A: const palette = { dark: { object: { 'drawing-line-default-bg': '#ff5b24', } }, light: { object: { 'drawing-line-default-bg': '#ff5b24', } }, }; <ChartReactApp dependencies={{ palette, ... }} />

Q222: how to lock Y-scale?

A: const onApiCreated = (api: ChartReactAPI) => {

api.onChartCreated((chartId, chart) => {

chart.chartPanComponent.setChartPanningOptions(true, false);

});

};

A: const subscription = chart.chartModel.observeCandlesChanged().subscribe(() => {

if (chart.chartModel.getCandles().length) {

console.log('Chart with candles is ready');

subscription.unsubscribe();

}

});

Q224: How to limit max/min width of the chart?

A: const dependencies = { initialChartConfig: { components: { chart: { minCandles: <number>, // for max zoom - minimum number of candles should be on viewport minWidth: <number>, // for min zoom - minimum width of the chart } } }

A: Right now we don't have any way to hide close button or override drawing toolbar component.

Q226: During runtime, we want to check if a particular candle at a timestamp is available/fetched, if the candle at that timestamp doesn't exist/hasn't been fetched yet, we want to fetch candles till that particular timestamp. Do you know how we can do this?

A: Looks like the question is about lazy-loading of additional candles when moving to the history. If so, then the chart will call requestHistoryData() callback with { toTime } timestamp. This timestamp can be used to "fetch candles till that particular timestamp.".

This is how to get currently loaded candles:

const candles = chart.chartModel.getCandles(); const isCandleExist = candles.some(candle => candle.timestamp === timestamp);

Q227: Aggregations / Calculations etc. on the most granular (tick level) data is done in the library or client browser/app?

A: From the standpoint of DXcharts aggregation is a parameter that is send to data provider, which in case return the requested data. No calculations happen on DXcharts side

Q228: Could you explain how I can pass WaterMark to the graph?

Find these two links https://devexperts.com/dxcharts/documentation-for-developers/dxcharts-lite/Watermark https://devexperts.com/dxcharts/documentation-for-developers/dxcharts-lite/API%20Reference/WaterMarkComponent I carried out some tests, but I was unable to move to the graph, by default loading WaterMark Note: We are using reactjs with typescript.

A: Two links you have provided are related to DXcharts-lite (you can see it in URL), that is open source data visualisation tool, this works differently from DXcharts Library.

For the library this functionality is reserved for displaying symbol name and currently there is no way to change this behaviour.

Q229: In runtime, how do we get the current aggregation period applied on the chart?

const onApiCreated = (api: ChartReactAPI) => {
console.log(api.getSelectedChartInfo().period); // eg: { duration:1, durationType:"h" }
};

Q230: Is there any way to call requestHistoryData on runtime without it being called on it's own in the provider?

To give the most useful answer, quick 101 - requestHistoryData calling by chart internal logic any time then initial or additional historical data are needed. The result of this function applying to the chart automatically and you don't need to do anything more in most of the cases. But, for some reasons, you want to apply additional data candles to the chart at some logical point of your application, you able to use third argument of requestHistoryData function called updateCallback. You can store this callback anywhere you want and call it at any moment you need and provide any ChartCandleData array which should be applied to the chart after this call. Note, that new ChartCandleData array you provided as an argument of updateCallback function will fully re-write current data in chart and you should control the data flow by yourself. Possible code example:

let updateChartData;

export function createChartDataProvider() {
...
return {
...
async requestHistoryData(symbol, aggregation, options, updateCallback) {
updateChartData = updateCallback;
...
}
};
}

// any other place in you code

updateChartData(data); // will apply new data series to the chart

Q231: This is the documentation that we are using. https://devexperts.com/dxcharts/documentation-for-developers/About

Is there more detailed documentation that gives detailed instructions how functionality is supposed to be implemented? The documentation seems to only describe the function name. It does not give more complete examples of how to integrate the function.

A: We constantly updating the documentation, currently everything we have available is add to our website. We hope that that function naming and descriptions together with full typing coverage should help out to determine the purpose of a particular APIs. Let us know if there is anything specific that you are looking for and we'll add this to documentation.

Q232: We provide users the ability to set the default quantity and quantity step/increment by asset class. We will eventually allow users to set defaults by symbol.

We do not see how to update the quantity when a new symbol is entered in the chart. When we attempt to reset the values when the symbol is changed, the quantity and increment are ignored. Can this be done?

A: To understand a moment when instrument has changed you can implement SymbolSuggestProvider.onInstrumentChanged callback (https://devexperts.com/dxcharts/documentation-for-developers/dxcharts-react/API%20Reference%20-%20Providers). This callback will be triggered by chart when user changes an instrument. In that moment we can somehow check the instrument group and apply appropriate values to Order entry input. Possible code example:

onInstrumentChanged(symbol: string) { switch(symbol) { case 'GOOG': case 'GOOGL': chartReactAPI.setTradingQuantity(1000); // etc break; case 'AAPL': chartReactAPI.setTradingQuantity(10); // etc break; } }

Q233: On our current chart, if you have Orders or Positions off screen, there is an order flag/positions flag that points off screen. This lets the user know that they have open order and positions when they are off screen.

Does your chart have this functionality?

A: Orders/positions are completely on corresponding providers side, under full control of the client-side code. So, we think it shouldn't be difficult to implement such labels using regular user-land React components on-top of dxChart widget.

.kkYXyj // Zoom in/out magnifying glass icons { display: none !important; } This works on different browsers on my desktop, but doesn’t work on my mobile because the classname is different (in this case, “kkZJLK”). I am therefore wondering if this class is different for each device.

A: all those classes will be different on each build, so it's definitely not reliable way.

Q235: I need some help understanding how extended hours, session breaks, and events work. Could you explain these concepts or provide a link with more information about them?

The term “extended hours” in our React application refers to a feature that allows you to retrieve candle data beyond the regular trading session. When enabled, it triggers a request to the candleDataProvider for candles that fall outside the primary trading hours. This functionality helps your application distinguish between candles from the main trading session and those from other times. To make it work, you’ll need to provide trading schedules for the instrument in the tradingSessionsProvider and ensure that the candleDataProvider includes the extendedHours field in its history requests.

A: Sure thing. Let me start with the following.

Session breaks - Highlights the time breaks on the chart if the aggregation period is less than 1 day. The session breaks can also be toggled on/off by right-clicking on the chart area.

Extended hours - Displays extended hours volume on the chart if the chosen instrument supports extended hours trading and aggregation period is less than 1 day. Pre-market and Post-market sessions

Events - Displays info markers about upcoming events on the time axis.

Events and news

Q236: Is there a way to add title to the chart headline? Title should change depending on the chart type

A: The only way to subscribe to chart type changes right now is via layoutProvider.updateLayout method. layoutProvider.updateLayout will be called by dxcharts-react every time something layout related changes and chart type is a part of it. When layoutProvider.updateLayout is called you can unpack new selected chart type and notify your components somehow (via global storage or some kind of eventbus implementation).

Q237: is there a way to make symbol suggest input wider?

A: If you don't like our default symbol selector - you can implement your own via uiOverrides.InstrumentSuggest. If you want to change only width of input - there's no native way. You can hack it somehow with CSS but it's not recommended.

Q238: I'm working on implementing extended hours and have a few questions:

Does the tradingSessionsProvider control how the candles from the chartDataProvider will be rendered on the chart? I created a TradingSessionsProvider.ts file and integrated it into the dependencies with tradingSessionsProvider: customBovespaTradingSessionsProvider. Is this the correct approach?

A: To make extendedHours functionality work correct you need to support it correctly in ChartDataProvider

When extendedHours is enabled - it means that all the candles will be displayed on chart, including those from different trading sessions like PRE_MARKET and so on.

When extendedHours is disabled - it means that only candles from REGULAR trading session will be displayed

The thing is, that it is up to you which candles to show. When user clicks extendedHours and enable it, then ChartDataProvider.requestHistoryData will be called with extendedHours option provided with true like ChartDataProvider.requestHistoryData('AAPL', '1h', { extendedHours: true }). It means, that in return dxchart will wait for all the candles from all trading sessions to be provided by you and chart will be completely redrawn. In other words it is your business to provide all the candles.

When user clicks extendedHours and disable it, the same this happens, but with extendedHours: false provided - therefore your should return candles only from REGULAR trading session.

One of TradingSessionsProvider responsibilities is to cover sessionBreaks functionality. When user enables Session Breaks (NOTE: it only available with extended hours enabled) they will see vertical lines on chart that indicate the start and end of different trading sessions. And to know where to draw which line, chart will ask trading sessions schedule via TradingSessionsProvider.generateSessions.

Q239: Is it possible to place orders through dxscript in an automated manner? If so, could you please provide some insights on how to achieve this?

A: Currently there are no such capabilities in DXscript, but pls discuss this with DXfeed team they might have it in a roadmap or planned for future releases

Q240: Following up on a previous question, I wanted to hide certain options on the settings tab. For example, we don't want to display the "Conference Calls" option under Event settings. You mentioned that one approach would be to completely rewrite the content of the Events tab and retain only the options we need.

A: You can refer to https://devexperts.com/dxcharts/documentation-for-developers/dxcharts-react/Component%20Overriding/Settings%20Tabs/settings-popup-tabsor https://devexperts.com/dxcharts/documentation-for-developers/dxcharts-react/Component%20Overriding/Settings%20Tabs/settings-popup-content to accomplish this

Q241: Our data feed provides only 1-minute, 30-minute, and 1-day data, and we aggregate these to generate all other intervals. For example, we use 1-minute data to create a 15-minute candle.

Our APIs deliver live data for the previous completed minute (n-1 candles). For instance, if the current time is 10:01 a.m., the APIs will provide data up until 10:00 a.m., and the socket will provide the data for 10:01 a.m. We receive this live data through sockets and update it using the subscribeCandles callback method from ChartDataProvider. Consider the following scenario: The current interval is from 10:00 to 10:15 a.m., and a user enters the chart at 10:11 a.m. By calling our APIs, we can form the 10:00 a.m. candle using the data up to that time. Now, we need to update this candle with live data from the socket. However, the socket will only provide data for 10:11 a.m., which includes the OHLC values for that specific minute. Therefore, I need to retrieve the last candle plotted on the chart, apply aggregation logic, and then use the subscribeCandles callback to plot the correct live data. Is there a way to access the last plotted candle data to accomplish this? Additionally, in the case of multiple charts, how can I ensure that I'm only updating the data for the intended chart? I believe I need to use the subscriptionId to retrieve the last plotted candle data. Could you please suggest how to handle this scenario?

A: As far as I understand, you need to retrieve the last candle plotted on the canvas. The thing is, the chart only draws what you provide, so you can easily get the last candle on your end.

Regarding how to identify which chart you send updates to via the provider, there's no native way to determine that directly. However, you can try comparing data from chartReactAPI.getChartInfo with the data provided via subscribeCandles to identify which specific chart is requesting candles.

The subscriptionId is our internal subscription ID, and it is only useful for passing to unsubscribeCandles to clear any unnecessary subscriptions.

Q242: We would like to know if it's possible to change the "Learn More" link for "Indicators" as shown in the screenshot below. If it is feasible, could you please let us know where we can make this change?

To change link to KB in indicator you should follow this link https://devexperts.com/dxcharts/documentation-for-developers/dxcharts-react/Studies

here you'll find how to change default list of indicators

Along the way you can change indicators settings too. You can find DEFAULT_STUDIES_LIST() - it is an array that stores all the predefined indicators with its default settings. link is one of that settings.

So you just need to map link setting to link you want like

export const dxStudiesProviderWithCustomList = createDxStudiesProvider(
// here in `DEFAULT_STUDIES_LIST` function you can pass your localization for studies as an argument
DEFAULT_STUDIES_LIST()
.filter(study => listOfStudies.includes(study.id))
// like this for example
.map(s => {
s.link = `_link_to_your_resource_/${s.id}`
})
.map(fromRawStudiesSettings)
)

Then pass that newly created provider to dependencies.

Q243: All our chart data is in UTC. So, I would like to configure the chart to recognise this.

Please can you advise how to configure this in our case? I have tried specifying it in dependencies like so: timezones: currentTimezone: "Etc/UTC", listOfTimezones: ["Etc/UTC"] } But that doesn’t seem to work. I’ve also tried specifying it under ChartSettingsDefaults: timezone: "Etc/UTC" But no luck. I have tried specifying it at just “UTC” as well.

We store utc timezone identifier in a different format like UTC. So to make it work. So you can either specify it via props like timezone: 'UTC' or via dependencies

timezones: { currentTimezone: 'UTC' }

NOTE: UTC and Exchange are predefined and you cannot exclude them from the list. If you want to have only then in list of timezone then pass empty array to the listOfTimezones like

timezones: {
currentTimezone: 'UTC',
listOfTimezones: []
}

If you don't want to see timezone controls at all you can disable it via dependencies:

{
chartReactConfig: {
timezoneControls: {
enabled: false
}
}
}

Q244: There are certain typings that I can only import from the folder provided by the DX team.

However, I want to export them from node_modules, but it doesn’t work. The reason is that I don’t want to include the files provided by the DX team in my build process. Instead, I want to reference all typings from the installed packages. Please guide on how to achieve. For example: Imported from a local folder—this works:

import { LogoProps } from 'packages/dxChart/dxchart5-react/dist/chart/ui-overrides/logo/Logo';

Imported from node_modules—this doesn’t work:

import { LogoProps } from 'dxchart/dxchart5-react/dist/chart/ui-overrides/logo/Logo';

Listing out few more imports which I am only able to import from local folder:

import { AggregationPeriod } from 'packages/dxChart/dxchart5-react/dist/chart/model/aggregation.model';

import { ChartCandleData } from 'packages/dxChart/dxchart5-react/dist/providers/chart-data-provider';

in our project we use npm workspaces to managing multiple packages. I'm not completely sure I understand whole question, but looks like it will be enough to use correct packages naming with workspace and it should importing from node_modules in client's project, eg example above:

// somewhere in host-application code

import { LogoProps } from '@dx-private/dxchart5-react/dist/chart/ui-overrides/logo/Logo';
import { AggregationPeriod } from '@dx-private/dxchart5-react/dist/chart/model/aggregation.model';
import { ChartCandleData } from '@dx-private/dxchart5-react/dist/providers/chart-data-provider';

Q245: After a break in internet connection or server connection, I now send the chart a completely fresh set of data (so that there are no gaps), and to do this I call the updateCallback provided by requestHistoryData.

The update of the data on the chart seems to work fine. But the chart’s view of the data remains at the same time as before. For example, I load a 1-minute chart and the right-most bar is at 14:00. We have a break in internet connection for 3 hours, then it reconnects. The chart’s data gets updated, but is still showing up to a time of 14:00, and I have to manually scroll the chart from right to left in order to reveal the new candles from 14:00 to 17:00. Please can you let me know how we can programmatically reposition the chart’s view to show the end portion of data?

For example, we can incapsulate this stuff in a class-manner like this:

class DxChartsDecorator {
charts = new Map(); // or just a single value if multi-chart not needed

onApiCreated(api) {
api.onChartCreated((chartId, chart) => {
this.charts.set(chartId, chart);
});
}

scrollToLastCandle(chartId) {
if (this.charts.has(chartId)) {
const chart = this.charts.get(chartId);
const { startUnit } = chart.chartModel.getLastVisualCandle();
chart.setXScale(startUnit);
}
}
}
...
// somewhere in the code
const myDxChart = new DxChartsDecorator();

...
<ChartReactApp
onApiCreated={myDxChart.onApiCreated.bind(myDxChart)}
/>
...
// somewhere in the code
myDxChart.scrollToLastCandle(1);

Q246: We need a callback after calling setDrawing function, for example we are using the following code: chartRef.current?.drawings.setDrawing(symbol, custConfig).

We need the callback once this function is done or the drawing has been formed.

A: chart-react, right now, not supported styling Events via its API, but you can configure it using chart-lite directly. Please read this article:

https://devexperts.com/dxcharts/documentation-for-developers/dxcharts-lite/Events/Economic%20Events

chart instance can be obtained using chartReactAPI.onChartCreated callback.

Q247: We are facing this issue while setting the viewport for a particular AI Driven pattern.

Issue: the viewport is shifting automatically to the default view after setting the viewport for a few milliseconds. Please try to help us in this issue as this is a production issue for us

A: turn off auto scale feature:

const dependencies: ChartAppDependencies = {

initialChartConfig: {

scale: {

auto: false,

};

Q248: News bubbles are not customizable with an icon like the events are?

A: Currently, no. But this is being developed in DXCF-5676 - [Web] add ability to customize news bubbles Waiting for review

Q249: Multiple events on the same candle or a timestamp doesn't show multiple icons

Current Behaviour: multiple events get hovered one by one with each interaction on the same icon.

A: Correct. Can be improved in future after re-design this part.

Q250: Can we make events hovered line dashed? Also for the last price label line, can we make the line dashed?

A: Currently no. But a development DXCF-5677 - [web] allow events hover customization In development was created to resolve this.

Q251: Can we extend this list of supported events?

earnings dividends splits conference calls

A: Unfortunately, still no, we can't. Full re-design of our providers planned in v6 only.

Q252: Can we customize buy/sell Icons using svg or other formats like event icons?

A: We can change only color of these icons right now

Q253: An extra call for the candles data is happening with the aggregation duration of 1 hour at requestHistoryData. There is no logic or code written for this particular call. What can be the issue? is it the default behaviour for a particular use case?

start_time=1726004074642&end_time=1729604074642&interval=60minute
Required call: start_time=1728104074861&end_time=1729604074861&interval=5minute

A: There is no specific behavior coded to trigger a 1-hour aggregation period by default in requestHistoryData. If additional calls for data occur, they are likely due to the current layout or the X-axis position, which may require additional data chunks to ensure all necessary candles are displayed on the chart. However, these additional calls should align with the chosen aggregation period.

Q254: How can we set the default color for the color palette? currently that is set to yellow. Do we need to manually set the colors on whenever we need to call the drawing component?

A: If questions about default color for color picker on drawing in drawing settings popover, when client can change it via palette config of ChartReactApp. Specific color variable called drawing-line-default-bg. Note: color should be in rgba format.

Q255: My call to getLastVisualCandle() is now working and returning 1999 in my case, but there doesn’t appears to be a function chart.setXScale(). Please see below screenshot for further details.

A: The best way (and even easier) will be:

chart.chartModel.doBasicScale();

Less manual work, shorter code.

Q256: About previous question "My call to getLastVisualCandle() is now working and returning 1999 in my case, but there doesn’t appears to be a function chart.setXScale().", the solution does not work on mobile (Samsung galaxy s9): It works in desktop mode, and in Chrome’s emulator for “Samsung Galaxy S8+” (I haven’t tried the other devices there). However, on my actual Samsung Galaxy S9, the chart does not move to the end – I still have to manually scroll it.

A: requires support adaptive. Solution being worked on DXC-289 - Switching to using candle identifiers Under implementation

Q257: SpreadCO send volume data to chart for equities, indices and commodities, but not for forex.

In the legend data box they want to show the ‘volume’ field for those markets that have volume. On initial chart load they are achieving this as follows: Result:: If they then change the instrument (on the same chart instance) to a forex instrument, They would like to be able to tell the legend data box to not show the volume field for this instrument. Please would you advise how to do this? (The config setting only seems to apply to the initial value.)

A: if they wants to completely hide volume in cases when selected instrument hasn't volume value - right now it's not possible. Current behaviour is to show dash sign if value not provided for current instrument. There's no API to change this behaviour or set showVolume config property on-fly.

Q258: Please would you advise how we can change the formatting of the positions PnL amount?

We only need to show 2 decimal places, and need to be able to change the currency symbol. Ideally, I need to display the above example as +£528.10.

A: Order price precision equals to instrument price precision which is used on Y-scale for instance. When you change price precision, order precision will be changed along with it.

Q259: This is more a confirmation than a question:

It’s not clear to me from the documentation how to save and restore various aspects of chart state, so I’m approaching you for your advice on how best to do this.

A: All current state of the chart can be saved/restored using LayoutProvider. If you select some instrument, aggregation period, adds some indicators or drawings to the chart or even to the multi-chart, and after that reloads the page, you'll see all your selections restored. This feature is implemented using the LayoutProvider and you don't need to manually listen/observe/subscribe to each specific part of the state of the chart - just implement LayoutProvider and work with whole state in one place.

Q260: I should be able to take care of saving the current frequency whenever it’s changed (using onPeriodChanged event to obtain the new AggregationPeriod) and restoring it using api.ChangePeriod() (although please advise if there is a different recommended way). Buy I currently don’t know how to query the chart for the current AggregationPeriod.

How to obtain the current frequency (AggregationPeriod) from the chart How to obtain the data on the open studies with their config How to re-apply those studies (with their config) to the chart

A: Obtain current frequency (AggregationPeriod):

api.getChartInfo().period

Obtain studies with their config:

api.getChartgInfo().studies

Re-apply saved studies to a chart:

api.setStudies(studies)

(But please let me know if there is a better recommended way!)

Q261: I do have one further question: Is there a way to know when a study has been added, or deleted, or a study’s config changed? I ask this because whenever such a thing happens, I need to re-save the current state to our server.

A: You don't need to worry about it as well, because it also can be handled by LayoutProvider - its state already contains all currently applied studies. Check our example implementation for LocalStorage and implement the same approach but for you server-side API.

Q262: For observePositions(), I am calling its dataCallback and providing it with an array of Position obects to add to the chart. Am I expected to call dataCallback every time there is a change to the data in those positions, or should the charting library automatically pick up on changes to the data in the array initially provided?

A: Yes, you can use dataCallback to set new positions array to the chart.

Q263: Executed order is showing a triangle for the order, but when hovering over the triangle, no label/bubble appears (but a dot appears on the chart canvas where perhaps the label/bubble should be)

A: Ensure that tooltip functionality is correctly enabled for order markers. If you see a dot, this may indicate the label is positioned incorrectly, possibly due to alignment or styling settings. If that's not the case, another possibility is if by any means you had to remove or override the mb component, the label could be overwritten (but we believe that just the settings could be the cause).

Q264: UpdateOrder() callback is not being called for take profit / stop loss amendments (i.e. after dragging)

A: This is the current behavior, yes (a possibility would be for the event handling setup explicitly includes drag actions for take profit/stop loss orders).

Q265: Added take profit / stop loss orders remain on the chart even if our back-end has not confirmed these orders

A: This should be made with implementation in orders-provider.

Q266: Sometimes there are what seem to be z-index issues breaking interaction with position / order UI elements on the chart canvas, especially when there is more than one element (e.g. a position element, and an order element, or more than one position element)

A: Potential bug as Z-index conflicts can occur with overlapping UI elements (under analysis)

Q267: Should there be a facility to edit / remove the existing stop loss / take profit of a position / order?

A: Same as updateOrder() callback, I need to check as one of the requirements for an update on the trading component. I will keep you posted about it.

Q268: It’s possible to add several Take Profits / Stop Losses to an order – is this by design? And if so, should there be an amount associated with each one?

A: There's no specific configuration for the action as we cover on our library just the toolset, so it may depend on your trading implementation to configure the behavior for one or more than one take/stop.

Q269: I am calling dataCallback whenever the PnL of a position changes, so that the position PnL updates on the chart in real time.

What I am finding, though, is that when I have several positions for an instrument, and I hover the mouse over the collapsed position UI in the chart to see all positions like this: …when the position price changes and dataCallback is called as a result, the UI redraws from scratch, resulting in a not-ideal user experience; sometimes the panel collapses down to the single view, but otherwise the redraw of all the positions is not instant. Is there any way to update the positions on the chart without it redrawing them like this?

A: There are no specific configurations to avoid the charts to keep redrawing like this, but a few options over the callback itself and the state management may help.

Debounce Updates: Implement a debounce or throttle mechanism on the dataCallback to limit the frequency of updates.

Selective Re-rendering: Instead of redrawing the entire position panel, see if there’s a way to update only the PnL values themselves. This would require modifying the dataCallback function to refresh only specific parts of the UI (such as PnL text) without affecting the entire position structure.

State Management Optimization: If possible, store and track each position’s state (expanded/collapsed) separately.

Q270: Would you please be able to advise how to default the amount fields to a value of our choosing?

A: Currently default order quantity can be changed in runtime with chartReactAPI.setTradingQuantity.

Q271: I’d like to understand if trading from the chart supports partial exits. For example, if I buy 100 lots, can I set a take profit divided into multiple parts? Do you have a simulation environment available for testing?

A: This can be set up in your Order Provider or Position Provider. By a certain event that you can set up chart can start showing 50 lots instead of 100 lots in your open position.

Q272: What's the purpose of updateLayoutData function? Its not explained in the docs

Also, there is already a function of updateLayout(which I use to sync layout data with MongoDB)so why the provider expect to get both?

A: updateLayoutData – this method is called every time the state of the selected chart changes (aggregation, selected instrument, timeframe, studies) so that this state is saved.

getLayouts – this method returns the saved state that was sent using updateLayoutData.

Q273: Do you have an example of using the Layout Provider?

A: Currently we don't have examples to share, every client's requirements on that is very different so we allow every to create something that will solely cover the need of your product.

Q274: Executed order is showing a triangle for the order, but when hovering over the triangle, no label/bubble appears (but a dot appears on the chart canvas where perhaps the label/bubble should be).

A: Ensure that tooltip functionality is correctly enabled for order markers. If you see a dot, this may indicate the label is positioned incorrectly, possibly due to alignment or styling settings. If that's not the case, another possibility is if by any means you had to remove or override the MB component, the label could be overwritten. Ensure settings are correctly applied. If this persists, it should be checked by QA and designer review.

Q275: updateOrder() callback is not being called for take profit/stop loss amendments (i.e., after dragging).

A: This callback is called in two cases: 1) when drag from group is finished; 2) on drag stop but only if the order has a real ID provided by the order provider. There shouldn’t be differences in behavior between orders and protection orders.

Q276: Added take profit/stop loss orders remain on the chart even if our back-end has not confirmed these orders.

A: This depends on the integration side. If the back-end does not confirm any order/position/etc., you can simply not apply them to the chart by removing them from the orders list in dataCallback. They will then disappear from the UI.

Q277: Sometimes there seem to be z-index issues breaking interaction with position/order UI elements on the chart canvas, especially when there is more than one element (e.g., a position element and an order element, or more than one position element).

A: It’s possible in some edge cases. Please provide exact steps to reproduce this, and our QA team will check these steps and create an issue based on the results. Creating a support ticket on our support board is recommended.

Q278: Should there be a facility to edit/remove the existing stop loss/take profit of a position/order?

A: Since all data on orders and positions are in the corresponding providers under your control, you can do whatever you want with the list of orders/positions and apply these changes to the chart through dataCallback. The chart doesn't control this data; it just renders it and provides user controls.

Q279: It’s possible to add several Take Profits/Stop Losses to an order – is this by design? And if so, should there be an amount associated with each one?

A: It’s possible to do that on the integration level because the chart trusts the data provider and doesn’t check the applied data. However, on our latest version, you cannot add multiple Take Profits/Stop Losses to a single specific order via UI because the button disappears after adding the first

Q280: I am calling dataCallback whenever the PnL of a position changes, so that the position PnL updates on the chart in real time. Is there any way to update the positions on the chart without it redrawing them like this?

A: No, right now this is the only way to do that, but it could be a good improvement for the future. Thanks for the suggestion!

Q281: When I make changes to the chart, I can see that LayoutProvider.updateLayout(chartLayoutWithId) is being called; in this function, I create a chartLayoutData object with a selectedLayoutId always set to “1” (as we only have one layout per instrument) and save it out to our back-end. Please can you tell me in what circumstances the updateLayoutData(ChartLayoutData) function is called by DXCharts, and how it differs from updateLayout()? Do I need to implement it for our use case?

A: The main difference between updateLayoutData and updateLayout lies in the type of the function argument. updateLayout is used to update the data of a specific layout. In contrast, updateLayoutData can be used to store/update the full list of layouts and other top-level properties, such as theme and selectedLayoutId. Implementing it depends on whether you need to update the full layout data for your use case.

Q282: I have noticed that getLayouts() is being called more than once (in quick succession) when I load a chart. Why does this happen?

A: The two calls are due to different purposes: one is for applying layout migrations, and the other is for the direct use of the final layout. If a layout migration is needed, you’ll see an additional updateLayout call during the initial chart loading.

Q283: How can we programmatically ask the charting library to load the layout for a new instrument when we change the instrument?

A: This is not a common behavior for the chart. However, as a workaround, you can try using ChartReactSupportedAPI.syncLayoutParts to set the layout manually at runtime. This isn’t officially recommended but could be a good workaround.

Q284: In the LayoutProvider implementation, when we open a chart for a particular instrument, we fetch a ChartLayoutData object from our back end containing only one layout (the default one). However, in our app's “quick-chart” mode, we change the market by calling chart.api.changeInstrument(newInstrument). How can we handle layouts for this scenario?

A: You should have a dictionary of default/pre-defined layouts for each symbol on your server side. When changing the instrument, use ChartReactSupportedAPI.syncLayoutParts to set this pre-defined layout. Alternatively, we could explore adding an API method like generateLayout() to create a layout skeleton for customization. Let us know if this is a viable option for your case.

Q285: Added take profit/stop loss orders remain on the chart even if our back-end has not confirmed these orders. Why does this happen?

A: The chart employs an “optimistic UI” approach. When the user creates an item, it instantly appears on the UI, assuming a successful outcome. If the back-end does not confirm the item, you need to handle this fail state in your provider and call dataCallback to remove the failed item from the chart. This is designed for a seamless user experience.

Q286: Is there a way to turn off the trade controls that display in the upper left of the chart? We would still want the user to be able to trade from the price axis.

A: You can hide the trade controls displayed in the upper left of the chart by customizing the chart's configuration. However, if you still want users to trade from the price axis, you can selectively disable or hide specific UI components related to trading controls while keeping the price axis functionality intact.

Q287: Do you have the ability to hide orders and positions on the chart while still displaying the trade controls?

A: You can hide orders and positions on the chart while still displaying the trade controls. This can be done by configuring the chart settings to not display orders and positions, which are typically controlled by the orderProvider and positionProvider settings.

Q288: The current date format is DDMMYYYY. Do we have the ability to change this to MMDDYYYY?

A: To change the date format from DDMMYYYY to MMDDYYYY, you can configure the chart's date settings. This is typically done through the chart's configuration options, where you can specify the desired date format for display.

Q289: Executed order shows a triangle but no label/bubble appears when hovering.

A: Ensure tooltip functionality is enabled and correctly configured. Misalignment in the label or overridden MB components could cause this issue.

Q290: Z-index issues affecting interaction with position/order UI elements.

A: Provide reproduction steps to QA for further investigation. Support tickets are encouraged for complex issues.

Q291: Can we hide orders and positions on the chart while keeping trade controls?

A: Configure orderProvider and positionProvider settings to hide orders/positions while retaining trade controls.

Q292: Callback for updateOrder() not triggered for take profit/stop loss amendments.

A: Ensure the order has a real ID and verify the expected behavior when drag actions are completed.

Q293: Added take profit/stop loss orders persist without back-end confirmation.

A: Use dataCallback to remove unconfirmed orders from the UI.

Q294: Facility to edit/remove existing stop loss/take profit orders.

A: Modify the dataCallback to update the list of orders/positions based on back-end updates.

Q295: I have noticed that when calling api.changeInstrument(newInstrument), the callback SymbolSuggestProvider.onInstrumentChanged() is not called. I was wondering if this is by design or not.

A: This is by design. These are two different functionalities, SymbolSuggest is component and it’s provider is part of searching for instrument component, not part of API

Q296: I see the following WARNING in . /d×/dstudies-esm/kotlin-kotlin-stdlib-js-ir.mjs

A: DXstudies build have a problem with source map generation, that's why one of the erros occurred during the build process. Temporary fix is added to your setup which is available under the link above. Reach out to DXcharts support team for solution

A: This error might occur on React 19, which is officially not supported and on some of the versions of React 18 https://github.com/facebook/react/issues/28947. Reach out to DXcharts support team for solution

Q298: I see an error from using npx create-react-app

A: It is known issue related to CRA https://github.com/facebook/create-react-app/issues/13721. If it is a blocker for you reach out to DXcharts support team for solution

Q299: Is there a way to off the trade controls that display in the upper left of the chart? We would still want the user to be able to trade from the price axis.

A: You can use:

uiOverrides={{ Legend: { Header: () => null, } }}

this will remove OrderEntry compomnent from Legend

Q300: Do you have the ability to hide orders and positions on the chart while still displaying the trade controls?

A: yes, you can manage positions and orders state inside order-provider and position-provider https://devexperts.com/dxcharts/documentation-for-developers/dxcharts-react/API%20Reference%20-%20Providers

see OrderProvider section:

observeOrders and observerExecutionOrders, that have to subscribed with ordersSubject

Q301: The current date format is DDMMYYYY. Do we have the ability to change this to MMDDYYYY?

A: 3. Date time format can be changed. Described on this page https://devexperts.com/dxcharts/documentation-for-developers/dxcharts-react/Date%20Format

Example for crosstool

crossTool: {

xAxisLabelFormat: [

{

format: 'YYYY-MM-dd',

showWhen:

{ periodMoreThen: 84600, }

{

format: 'YYYY-MM-dd HH:mm',

showWhen:

{ periodLessThen: 84600, periodMoreThen: 6, }

{

format: 'YYYY-MM-dd HH:mm:ss',

showWhen:

{ periodLessThen: 6, }

Q302: Original question: Executed order is showing a triangle for the order, but when hovering over the triangle, no label/bubble appears (but a dot appears on the chart canvas where perhaps the label/bubble should be)

Our answer: is there label or bubble in settings turned on? Ensure that tooltip functionality is correctly enabled for order markers. If you see a dot, this may indicate the label is positioned incorrectly, possibly due to alignment or styling settings. If that's not the case, another possibility is if by any means you had to remove or override the mb component, the label could be overwritten (but we believe that just the settings could be the cause). Reply: Here are my trading settings. (Please note my enableTrading variable is set to true.) Until today, I was seeing a dot whether displayMode was set to “labels” or “bubbles”. However, the “labels” option now appears to be working: …but the “bubbles” option still isn’t showing anything (other than the green triangle).

A: This may be a defect - added to the backlog for analysis and solution

Q303: Original question: Added take profit / stop loss orders remain on the chart even if our back end has not confirmed these orders

Our answer: This should be made with implementation in orders-provider. Reply: I don’t understand what you mean here, so I think I need to explain this one in more detail. We use observeOrders() and observeExecutedOrders() to show these on the chart. When I add a new limit/stop order via the chart using the chart UI, currently we don’t yet pass this order ‘request’ to our system (as we are still in development), so, when I click on buy or sell on this UI: …it just disappears, as expected, as we don’t add a new order to the system, and therefore there is no new order to observe. However, if I have a position, like this: …and I click on it to show the options: …and here I click on “Add Take Profit” and drag it somewhere: …once I have finished dragging, DXCharts calls the createOrder() callback where eventually I will ask our app to actually create an order (that can be observed) but for now only does this: …I am expecting that as our app is not creating an order (until I implement that), the “Take Profit” UI will disappear as there is nothing new to observe. Instead, it stays on the chart (until I reload the app), implying that there is a take profit order there. I have tried returning Promise.resolve(null), Promise.resolve(), and Promise.reject(), all with the same result. A related question is: once I have implemented creating the order in our app, what should I return if order creation has failed?

A: Actually, there's no any feedback loop between current UI state of trading items and provider's state (which represents actually created orders/positions in your app). Another words, when chart calling provider.createOrder() methods returned value is not taken in further logic. Chart just notifies the providers code about new item was created by the user and appears in UI. We suppose, that if something goes wrong and actual order won't be created in your system than you'll receive and process this fail state in your provider and call dataCallback to provide actual state to the chart, without failed item. It's some kind of optimistic UI approach, I would say. When we're giving quick UI feedback to the user (item is appears instantly, hoping for a successful outcome, but if something goes wrong we fallback these UI changes.

Q304: Original question:

It’s possible to add several Take Profits / Stop Losses to an order – is this by design? And if so, should there be an amount associated with each one? Our answer: We don't have a specific configuration for the action as we cover on our library just the toolset, so it may depend on your trading implementation to configure the behavior for one or more than one take/stop. Reply: Okay. Will we be able to limit the number of take profits / stop losses (that can be added via the chart) to just 1 (i.e. per order), for example? Currently our trading platform does not support multiple take profits / stop losses on an order.

A: Yes, you can check our demo https://webdev.prosp.devexperts.com:8095/ - you won't be able to create multiple tp/sl orders for a each single order, because the button just disappeared after first is created.

Q305: Original question:

How can we, at that point, programmatically ask the charting library to load the layout for that new instrument? When first opening a chart, the library calls LayoutProvider.getLayouts() and we provide it with the layout for that instrument via Promise.resolve(). So for example, is there any way to cause getLayouts() to ask for a layout when we change the instrument? Our answer: Actually, this is not very common behaviour for our chart and if we formally answer a specific question, then no, there's no way to cause getLayout() to ask a layout when instrument has changed. But as a workaround you can try to use ChartReactSupportedAPI.syncLayoutParts to set layout manually in runtime. I'm not absolutely sure it would help you to do what you needed, but it's a good chance to try to do that. Disclaimer: it's not an officially recommended way for such things. Reply: Thank you for your suggestion; I have been having a think about this, and I don’t think this workaround is going to work for us. This is because we rely on DXCharts’ call of LayoutProvider.createLayout() to provide us with a “chartLayoutNamed” default layout object for an instrument, from which we create a chartLayoutWithId and then from this a chartLayoutData object that we save to our back-end so that an instrument has a stored default layout. Currently createLayout() is called by DXCharts when in getLayouts() we return Promise.reject() when there is no stored layout for an instrument. And of course, this relies on getLayouts() being called in the first place. So, in our case, when we set a new instrument on the chart instance, it would be okay only if our back end already has a stored layout for that instrument for that user – then we could try calling syncLayoutParts() off the back of that. But if there is no stored layout, we have no way (that I know of) of creating a default layout for this newly selected instrument (as createLayout() would normally provide us, and as required by a call to syncLayoutParts()).

A: Probably, in you case, you should have some dictionary of default/pre-defined layouts for each symbol on your server side. After, you'll be able to try to set this pre-defined layout using ChartReactSupportedAPI.syncLayoutParts(). But yea, personally, I think it will be too complicated to handle it. We may think about how we can help to solve your case with additional API. Probably, we can add something like generateLayout() method to create and return some layout "skeleton" and after that you'll be able manipulate it as you needed. WDYT?

Q306: In our mini-chart, we have drop-down menus for Aggregation and Date Range, but we are not validating the combinations thereof, so the user is able to select invalid combinations. I'm noticing on the main chart component, the Date Range and Aggregation sliders only allow certain combinations - how can I get a map of the acceptable combinations?

I am working on this mini-chart, where we implement our own controls for selecting aggregation and date range. I need to validate the inputs on my component to only allow valid combinations the logic I need to replicate is in timeframe-and-aggregation-selector but I only have the minified version

A: This is a very deep logic and it is not related only to timeframe-and-aggregation-selector component. To partially control this logic for our built-in UI elements from outside, we've introduced a special method that allows you to add rules for aggregation periods: ChartReactSupportedAPI.setAggregationRestrictionRule. However, since you want to create your own UI elements, than there's no official way to use these things, but you can try to use these functions (is not an official api, can be changed at any version):

import { DEFAULT_TIMEFRAME_PRESET, DEFAULT_AGGREGATION_TIMEFRAME_RULE, timeframePeriods, getTimeframeBasedOnPeriod, timeframePeriods, } from '@dx-private/dxchart5-react/dist/chart/model/timeframe-presets.model';

Q307: Is there a way to change price label style?

A: There is a way to add new and update existing price labels, inside of the object there is field labelType: 'badge'. Following options are available: badge, rectangle, plain. Detail about y axis labels available here https://devexperts.com/dxcharts/documentation-for-developers/dxcharts-lite/HowTo/Create%20Y-Labels%20Provider

Q308: When I add DXscript as a dependency to DXcharts it get stuck in an infinite loop

A: DXscript doesn't support mock provider for now. LayoutProvider can be implemented like in this article but in real application it should be custom and connected to project-specific persistence storage. Example how to use it:

Q309: We’d like to be able to set our own text for interfaces and buttons on the chart, is this possible?

A: You should be able to achieve that via localization functionality https://devexperts.com/dxcharts/documentation-for-developers/dxcharts-react/Localization

Q310: On your demo chart at https://devexperts.com/dxcharts-demo/, when I create or modify a Take Profit / Stop Loss order, the UI element shows and updates the price while dragging

A: Yep, showPriceAsLabels , should be set to false

Q311: how can I override the UI based on a different chart or chartId.

A: Legend component basically is a shared component between all charts, but I think it's possible to implement similar behaviour if to use `chartReactAPI.

getSelectedChartId()` in Legend custom component and somehow switch its visualisation according currently selected chart.

Q312: Getting an error while synchronizing the crosshair across multichart, other syncs are working. Attached screenshot for your reference. Please help us resolve this issue.

Yes, chartReactAPI, can be used as single instance for all charts in single chart instance. All methods/callbacks where it matters to specify exact chart to be applied, you can use optional argument chartId to specify this chart.

Legend component basically is a shared component between all charts, but I think it's possible to implement similar behavior if to use `chartReactAPI.

getSelectedChartId()` in Legend custom component and somehow switch its visualization according currently selected chart.

For example, you can call chartReactAPI.changeInstrument('<symbol>') to change instruments in all chart, otherwise, chartReactAPI.changeInstrument('< symbol >', 0) to change instrument only in first chart.

You don't need to create a chartReactAPI at no time, because chartReactAPI creating inside the chart and you just receive it via onApiCreated callback:

const onApiCreated = (chartReactAPI: ChartReactAPI) => {
...
chartReactAPI.changeInstrument('< symbol >', 0); // change instrument only in first chart
}
...
<ChartReactApp onApiCreated={onApiCreated}/>

If you mean that onApiCreated calling each time when multi-chart layout changing, it's a the necessary behavior is precisely because when changing the layout, the internal structure of the api is changes to control all that things through single api instance. So, when you select two charts in multichart, chartReactAPI will manage only these two chart. If after you'll add additional two charts (change layout to 2х2) when chartReactAPI should be re-created inside the chart instance to manage new layout, etc.

It's hard to be sure that it's unnecessary calls because it's consistent with the internal chart logic, which is very tricky and complex.

Legend actually a component which is shared between all charts in multi-chart and not related to specific one. But you can respect currently selected chartId to somehow customize it someway. For example, using chartReactAPI.getSelectedChartId() or

chartReactAPI.onChartSelected((chartId) => {
// customize legend in someway using chartId
})

Click functionality on events was added to the backlog, targeted for 5.16.0 release

Q313: We are facing an issue with trend line and other drawing interaction on mobile apps where the taps get drawn on the same point resulting in a point size (hardly visible) drawing.

Please help us resolve this issue as it is a critical interaction. Attaching video for your reference. Screenrecorder-2025-02-24-12-16-49-91 (1).mp4

A: Drawing line bug is reported as SUPDXCF-131

Q314: We tried adding a layout provider which Denis recommended, but still the dxscript code is not running properly, although the infinite loop is not happening now after this change.

Please help in unblocking. DxScript is now working and we are able to add custom indicators coming from DxScript BE, although dxScript is sending api calls on every tick which we cannot productionize (as mentioned by you guys as well). Ideally it should calculate based on the aggregation level selected by the user, 1min, 5 min , etc and api call should go only at these intervals. Let us know, how soon can you fix this issue and create a productionize version, as we are stuck on many indicators and its impacting our users heavily.

A: what exactly work unproperly? because your second screenshot look well. I see chart, and selected dxscript indicator also looks properly above main chart series. There's not enough information to understand what is wrong. In the previous case, we solved the problem of an error in the console and a completely inoperative chart because of that. Adding a layout provider helped solve this problem, isn't ?

Code got stuck in an infinite loop, after adding dxscript dependencies.. Please check this Video. Screen Recording 2025-02-07 at 4.04.24 PM (1).mov Charts team have provided a Trial build with DXscript provider looking into charts backend (that's the typical way of providing trials of DXscript)

regarding using dxScript, please, ask client to use real, not mock, LayoutProvider with dxScript providers. Looks like mock layout provider have an issue on working together dxScript. LayoutProvider can be implemented like in this article but in real application it should be custom and connected to project-specific persistence storage. Example how to use it:

<ChartReactApp dependencies={{
// other providers
layoutProvider: createLocalStorageLayoutProvider('dxchartLayout'),
dxScriptProvider: createDxScriptDemoProvider({
endpointUrl: 'https://webdev.prosp.devexperts.com:8095/api/script',
}),
dxScriptRunner: createDxScriptRunner({ endpointUrl: 'https://webdev.prosp.devexperts.com:8095/api/script' }),
}}/>

Q316: 1. Is there any way we can configure the default colors of the indicators on the chart?

Can we give spaces/margin between volume bars? PFA required design image!

A: 1- Not sure, looks like, I missed some context, but I feels like I'm not fully understand this question. Initial aggregation periods fully controlled by the client-side code with dependencies.initialAggregationPeriods property. All aggregation periods including added by the user itself are stored in UserDataProvider in customPeriods property (which is array of concatenated strings ${duration}${durationType}). Probably, they asking about something also then could you please specify the exact case?

2 - I'm not familiar with the term "automatic drawing", could you please specify what is it and how it was implemented. Is it our Custom Drawings?

Q317: Regarding an old issue, we have asked you about the default color of the palette for all the drawings and you answered that setting drawing-line-default-bg with an rgba format value can solve the problem.

This isn't working as expected. Also the theme property in initialChartConfig also doesn't have such an option. Please provide some insights for this issue as we are also targeting theming changes for our next release. Please find attached the code snippet we are using and a snapshot of the chart for your reference. Adding a detail: could this answer be applied for this case as well? https://jira.in.devexperts.com/browse/DXCFWEB-23?focusedId=3504276&page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#comment-3504276

You can organize your code in any way you want. For example, naive implementation might look something like this:

export const createChartDataProvider = () => {
...
const lastCandleSubscriptions = new Map();

function subscribeCandles(symbol, aggregation, subscriptionId, callback) {
const ws = new WebSocket(...);

ws.onopen = () => { .... };

ws.onmessage = (e) => {
....
dataCallback(e.data);
};

ws.onclose = (e) => {
console.log('Socket is closed. Reconnect will be attempted in 1 second.', e.reason);
lastCandleSubscriptions.delete(subscriptionId);
setTimeout(function() {
subscribeCandles(symbol, aggregation, subscriptionId, callback);
}, 1000);
};

lastCandleSubscriptions.set(subscriptionId, ws);
}

const unsubscribeCandles = (subscriptionId) => {
const ws = lastCandleSubscriptions.get(subscriptionId);
if (ws) {
ws.close();
}
lastCandleSubscriptions.delete(subscriptionId);
}

return {
...
subscribeCandles,
unsubscribeCandles,
}
}

Q318: "Facing a severe issue, despite changing the duration type for the aggregation, candles fromTime are not getting changed for different types of candle intervals.Like for 1min, 2min or 5min candles, we are getting the same time stamp for fromTime. similarly for 1day and 1week. Also the fromTime timestamp is too close for the candle aggregation resulting in very few candles in the start"

A: This statement doesn't make sense for me. fromTime argument is just indicate left bound of viewport. It's not directly related to aggregation. And looks like there can we a case when it equals on different aggregations but the same viewport position on timeline. To load correct set of the candles data, you need to use both things - aggregation period and offsets (fromTime/toTime). In some corner-cases, toTime will be empty which means it basically equals Date.now() and fromTime can be empty as well in initial request and you need to calculate it manually because you can give any initial amount of candles data you want.

Q319: I didn't understand the usage of TradingSessionsProvider. According to your previous response in this:

The vwap field in the ChartCandleData interface is available to be used by the chart, but the chart doesn't calculate VWAP by itself. Instead, the VWAP value must come from your data source (like dxFeed) or be calculated within the data provider that you're using. In your case, if your data source provides VWAP directly, you can use it as-is. If not, you will need to calculate VWAP internally and pass the calculated value to the chart.

We are already providing calculated vwap values to the chart data. Then where is the use of TradingSessions ? And if yes, could you please state with proper example, since in documentation it's not clear. Currently our Trading Sessions are not managed on frontend it is managed by our BE data provider itself, therefore not point in creating one on FE. Please help us in finding a middle way here to fix vwap asap.

A: Easiest way would be to implement TradingSessionsProvider.

We know its not right and correct on how VWAP works right now and our team will fix that (or already fixed that for 6.0.0)

Q320: Regarding vwap, since vwap is also another type of indicator, why do you want vwap value inside ChartCandleData and how should we get it ? It should be calculated by the library itself just like other indicators, same is being calculated by trading view itself. As charting library consumers, we should just provide ohlc and volume data to the candles data and indicator logic should be on the library.

Also, we tried adding vwap values by creating the logic and adding it in candles data by code, but still it is not applied. You can check our code and candles data that we are passing to DX in the below screenshots. Please help in exactly what all keys are required in adding this. indicator, this is highly critical for our users. Kindly check the code we are using to add vwap indicator. Also, if this can be out of the box, that would be great.

A: Actually, all existing chart types already available in list, but technically there's no problem to implement additional chart types in future if some product request will be approved and capacity planned.

Q321: We have checked that TV has the same behavior:

https://seafile.in.devexperts.com/f/20c973a8d00a4583b7cc/?dl=1 Drawings on Chart Synchronization When synchronization is enabled, all drawings are correctly synced across charts, which works as expected. However, when synchronization is turned off and we attempt to delete a drawing in one of the containers, the drawings are removed from all charts, despite synchronization being disabled. This does not seem to be the correct behavior. Please advise. Test with Different Sync States • Test drawing deletion with sync enabled and disabled to confirm that: o With sync enabled, deletions apply to all charts. o With sync disabled, deletions apply only to the specific chart instance. It seems it does not work so in the dxChart lin 5.13.x https://seafile.in.devexperts.com/f/20c973a8d00a4583b7cc/?dl=1

A: 1. the video that client has attached shows the same behavior between DXcharts and TV. There seem to be nothing wrong

Sync state continue to affects drawings that were added under this state to the chart even if it is turned off in the interface, there are no issues or bugs related to that

Q322: Selected drawing tools get deselected when JavaScript code adds drawings

To reproduce * Run the demo with yarn install and yarn run dev and open the link in the browser Select any drawing tool on the side Before you can draw anything it will get deselected This is happening when our JavaScript code is adding drawings. When new drawings are added, the selection of drawing tools are reset. This is making it impossible for us to draw anything as price line gets updates every few seconds [^dx-testing.zip]

A: The issue is related to the drawings.removeDrawing() call, which, in addition to removing the specified drawing, also resets the user-added drawing. This behavior is incorrect, and we have already created a task to fix it.Currently, there is no simple way to fully work around this issue when using drawing. However, after analyzing your code, I noticed that you are using drawing to display Ask and Bid prices, as well as order positions. Drawing is not the best tool for these purposes since it can be moved and customized via the toolbar, which appears when clicking on the element.For drawing lines on the price axis, it is better to use the custom labels mechanism, which is described in the documentation: Creating a Y-Labels Provider.Additionally, please note that dxChart has built-in support for displaying AskPrice and BidPrice, as well as trading functionality that allows you to create and display orders and positions.If you provide more details about what you’re trying to achieve, we may be able to suggest the best tools for your needs.

drawings.removeDrawing() fix will go to the nearest possible patch version,

Q323: We haven’t explicitly configured any layout or user providers—we’ve just been using the out-of-the-box settings, and everything worked properly in the previous version.

Could you let us know how to obtain or generate the current provider JSON so that we can share it with you?

A: was implemented LayoutProvider/UserDataProvider? Using, for example, LocalStorageProviders described here in docs, they need to open browser devtools and search it in localStorage.

Could you confirm if this change is expected or if we need to adjust any settings? Here is the dxChart version we are using "@dx-private/dxchart5-react": "5.13.4", "@dx-private/dxstudies": "53.0.0-esm",

A: If by rabge dropdown, it means the aggregation period dropdown, there's not any changes in this in 5.13.4 itself, also you can check our demo . 5.13.4 already installed there - all aggregation periods on their places.

But probably, some changes could be in previous versions. Which version client use before?

Q325: Error:

Failed to create studies webworker Error: Workers disabled
at createDxStudiesWebWorkerProvider (dx-studies-webworker-provider.js:6:585)
...

A: Issue created for Error:

TypeError: Cannot read properties of undefined (reading 'com')

at b (dx-studies-studies-data-provider.js:6:607)

at DxStudiesDataProvider.initStudiesCalculators (dx-studies-studies-data-provider.js:6:1925)

at async Object.calculateSafe (mutex.js:6:350)

https://jira.in.devexperts.com/browse/DXCF-5754

Q326: Listening to Changes in Drawings

We would like to listen to events triggered by changes in drawings, specifically for horizontal rays (drawing type: horizontal_ray). For example, when users drag position lines representing stop-loss or take-profit boundaries, we need to capture these events. How can we set up a listener for such interactions to dynamically update these values? Also are the horizontal lines draggable?

Actually, we don't have official public api for this, because for us it's not very common case, but you can try to use few reactive streams to listen drawings manipulations (at your own risks and this internal api and can be changed in future):

const { unsubscribe } = chart.drawings.observeDrawingMoved().subscribe(() => { ... });
const { unsubscribe } = chart.drawings.observeDrawingFinished().subscribe(() => { ... });
// the same for
// observeDrawingRemoved
// observeDrawingsUpdated
// observeDrawingModified

Q327: Duplicate Callbacks for Historical Data Fetching

Occasionally, the chart makes two identical callbacks for fetching historical time series data. The only difference between the requests is that the option.priceType changes from 'last' to 'mark'. Both requests are for the same symbol and date range. Is this expected behavior? Interestingly, this behavior is not consistent across all tradable symbols. Could you clarify why this might be happening? Data Type Switching Notification From time to time, the chart displays a message stating: "The type of data has been switched: Last → Market." However, this does not occur consistently when switching between trading instruments or symbols. There is no documentation explaining this behavior. Could you elaborate on what this message means and under what conditions it is triggered?

A: Not sure is it normal or note. Both cases basically can happens if or when priceType have changed for some reasons. So, if priceType in some candles data has changed than yes, will be performed historical data fetching and also you'll see such notification.

Q328: Listening to Graph Events

Is there a way to listen to specific events in the graph, such as when historical candlestick data has finished rendering? This would help us manage other operations dependent on graph readiness.

A: Most likely, you can subscribe to internal candles data set using chart.chartModel.observeCandlesChanged().subscribe(...), but it's internal api and can be changed in future without prior notice.

Q329: API for Checking Current Graph Data

Is there an API to check what data is currently available inside the graph? Like can I get all the candle stick values inside the current chart. For instance, if a data disconnection occurs, we would prefer to reload only the missing candles instead of re-rendering the entire graph. Is it possible to achieve this, or does the graph need to be fully reloaded after reconnection?

You can use chart.setData() to directly set all data to the chart and chart.updateData() to make more efficient update without resetting all existed data. This is also the use of api bypassing the chart react itself.

To get chart instance you'll need to use ChartReactSupportedAPI.onChartCreated callback first.

Q330: We have implemented the dxStudies (new build and old build) based on the documentation using Vite, keeping the setup minimal. Unfortunately, we encountered the same problem with dxStudies.

It shows the indicators to be selected in the graph, however nothing is drawn in the indicator section. Here is the link for the minimal implementation. Please replace the dxCharts distribution files in the relevant folder (inside dxchart.lib) to review our setup. We would appreciate any guidance or recommendations you might have to resolve this issue, as this have turned into a blocker for now"

I understand that provided code is a minimal implementation, but I still expect that the mandatory providers described here should be implemented even in it. The second thought, as far as I can see in the code, the list of available studies is manually limited to 3: 'Aroon', 'SROC', 'MACD'

If I remove that limiting than I see all available studies in list:

I can't check how these studies drawings on the chart because no mandatory providers eg. ChartDataProvider, are implemented. Studies are calculating based on candle data that does not exist. Please, ask client to provide more complete implementation, together with all mandatory providers implementation.

Also, as I know, Vite bundler have an issues (1, 2) with webworkers and probably, it will be better to disable this feature if client wants to use VIte:

<div className="App" style={{ height: 576, width: 800 }}>
<DXChart dependencies={{
...
chartReactConfig: { disableWorkers: true },
}} />
</div>

Q331: When creating financial indicators. dxStudies module isn't available: TypeError: Cannot read properties of undefined (reading 'kotlin-kotlin-stdlib-js-ir') << Here is the problem, according to documentation we have followed.

However in production build, the above file is missing.

A: 1) check that @dx-private/dxstudies package is a direct dependency in the project.

check that modules @dx-private/dxstudies/dxstudies.js and @dx-private/dxstudies/kotlin-kotlin-stdlib-js-ir.js is available to import and path or module name correctly resolving by bundler/build system.
check that bundler/build system supports ES6 imports and ES6 dynamic imports

Q332: The graph does not load in normal mode, but works in incognito (because ad blocker is not installed there).

I think this is the root cause. DXChart is making a call to firebase_anallytics. This is blocked by the Add blocker. because when I disable add blocker the site works as expected. Graph In Normal mode Graph in Incognito mode I think this is the root cause. DXChart is making a call to firebase_anallytics. This is blocked by the Add blocker. because when I disable add blocker the site works as expected.

A: if their assumption is correct, then most likely it'll be enough just to generate a new ZIP delivery for them with analytics disabled and check if this is so. It's a most quicker way to check and correct the problem. New build for this client https://seafile.in.devexperts.com/f/afe60d273078421f85e9/

Q333: Regarding YAxisLabelsProvider.

I have tried it to show bid and ask lines. I am unregistering and registering new provider every time price changes. Is that the right way to do it to respond to changing prices? What do you think of the code. function updateYLabels(bidPrice: number, askPrice: number) { if (!chartRef.current) { return; } console.log('Updating Y labels', bidPrice, askPrice); const bidLabel: VisualYAxisLabel = { y: bidPrice, labelText: 'Bid: ' + bidPrice.toFixed(4), mode: 'line-label', bgColor: 'red', textColor: 'white' }; const askLabel: VisualYAxisLabel = { y: askPrice, labelText: 'Ask: ' + askPrice.toFixed(4), mode: 'line-label', bgColor: 'green', textColor: 'white' }; const labelGroup: LabelGroup = { labels: [ askLabel, bidLabel, ] }; const yLabelsProvider: YAxisLabelsProvider = { getUnorderedLabels() { return [ labelGroup ] } } if (yLabelsProviderIdRef.current !== '') { chartRef.current?.yAxis.unregisterYAxisLabelsProvider('latest', yLabelsProviderIdRef.current); } const id = chartRef.current?.yAxis.registerYAxisLabelsProvider(yLabelsProvider, 'latest'); yLabelsProviderIdRef.current = id; // chartRef.current.yAxis.deleteSimpleYAxisLabel('bid'); // chartRef.current.yAxis.deleteSimpleYAxisLabel('ask'); // chartRef.current.yAxis.addSimpleYAxisLabel('bid2', bidLabel); // chartRef.current.yAxis.addSimpleYAxisLabel('ask2', askLabel); } There are issues with this. The lines are not in the right place and only one of the two lines is shown.

A: Follow this: https://devexperts.com/dxcharts/documentation-for-developers/dxcharts-react/Providers/Chart%20Data%20Providerhttps://devexperts.com/dxcharts/documentation-for-developers/Chart%20for%20Android/C[…]ion%20and%20implementation%20of%20providers/Quotes%20Provider

when you'll feed this data in the chart you'll see additional options in right click menu (on Y axis)

Q334: I am implementing min / max trade size using dependencies.chartReactConfig.trading.defaultOrderQuantity (for min trade size) and .maxOrderQuantity (for max trade size).This works fine for initial chart load, but I need to be able to set these values dynamically when I change instrument on the chart instance. I can see that you have api.setTradingQuantity(), but nothing like api.setMinTradingQuantity() or api.setMaxTradingQuantity(). Can I achieve this in some other way at the moment?

A: Nope, there's no way to set defaultOrderQuantity and maxOrderQuantity dynamically. But, there are client requests to add some callback handler to listen current quantity changes. Maybe these two questions/requests could be joined to some kind of improvement and implemented in future releases.

A: Not fully sure, be maybe client uses chart's versions less than 5.13.5. This callback was added only in this version and didn't exist before.

Q336: Regarding our suggestion / request for additional callbacks, the main reason we’re asking for these callbacks is that, as things stand, the user actions I listed happen entirely within the chart and remain invisible to our application until the action finishes. That means we have no way to “mirror” those interactions in our UI or ticket system as they happen.

I’m open to exploring an override (if that’s feasible with the plain JS version of the library?), but are there recommended best practices for capturing these interactions without adding more callbacks to your core API?

A: Thank you for describing the case. After further discussion with the development team, we have decided to consider API changes for our backlog. We believe it would be beneficial to have a callback that allows tracking of price changes. We won't be specifically listening for UI changes, but rather for order price changes. This approach will prevent us from being tied to a specific UI, as it may vary between clients.

Task DXCF-5976 is added to 5.15.0

For take profit / stop loss, i.e.: “Add take profit” / “Add stop loss” start (this would be triggered when the user has clicked on the position or order UI element to show the “Add take profit” / “Add stop loss” label and has also clicked on one of those so that the ‘drag’ (without left mouse click in this case) can start, but before moving the mouse “Add take profit” / “Add stop loss” move (or ‘during’, or ‘change’) (this would follow the start callback whenever the user moves the UI element and before they click the left mouse button to set it; we would like to see the price level passed to the callback function so that we can mirror it in our trade ticket) “Add take profit” / “Add stop loss” end (this would happen once the user has clicked the left mouse button to set it) For LMT / STP order drag-start (we could then use this to, for example, display our trade ticket in preparation for updates to the values on the ticket while the chart UI element is being dragged) drag-during drag-end (although we can probably use the existing updateOrder callback to determine drag-end otherwise) These are just ideas for the callbacks, of course, but in summary, it would be useful for us to know when these things start happening, are in the process of happening, and stop happening (along with related values) so that we can hook the rest of our UI into them and make it dynamic.

A: When interacting deeply with the interface, we usually recommend creating your own trading UI via an override. Although we are not opposed to adding this callback, there is a chance that such features could make our API enormous and difficult to maintain. We have to find a balance between flexibility and maintainability.

Q338: Background: As your library’s observePositions / observeOrders data callback functions expect the full set of positions / orders when called, this is what we do whenever market price updates happen, but in reality there are a variety of different reasons that we would want to (and do) send the current set of positions / orders to the chart, depending on what our back-end is telling us about the state of the positions / orders.

The issue: I have noticed that when we start dragging an order on the chart, if our app sends the chart the updated set of orders as part of one of the various updates it might be doing, the chart redraws the being-dragged order UI element back at its current price. I have attached a video showing what I mean. I appreciate that we could avoid re-sending the orders to the chart if it’s just a market price update, as the current price is not related to the order and is not shown by the order UI element – but as I mentioned, there are various other reasons we might need to refresh the orders on the chart from time to time.

A: The redraw of the order being dragged is something we need to fix and investigate; I will add it to the backlog. I'll create a task right away since it is pretty straightforward. Could you provide us with a video? I couldn't find it in any of the previous emails. It was mentioned, but no attachments were included.

As for observePositions/observeOrders, your approach and idea are clear. Trading is crucial for many of our existing clients, so it is difficult to decide to change the current way the callback works, as it could disrupt trading for others.

On your demo chart at https://devexperts.com/dxcharts-demo, a price sometimes shows on the shortcut menu for market orders, but sometimes is zero. E.g. if it’s showing AAPL and I show the shortcut menu, there are figures there. If I then change the market to USD/CHF, the shortcut menu figures seem to be the same as the AAPL ones, and if I then refresh the page (still on USD/CHF), the shortcut menu figures show as zero. On https://devexperts.com/dxcharts-demo/trading-platform, a price on the shortcut menu for market orders always shows, but both figures are the same (the SELL price, I believe). Going back to our chart: When I select one of buy market / sell market, a price does come through in the limitPrice and stopPrice fields: …but this is the price showing on the “order menu” (right-hand-side axis) when the shortcut menu was opened. Being a market order (orderType: “market”), am I correct in saying that it’s expected that we will simply ignore the limitPrice and stopPrice fields, as our system will fill this order at whatever the current price is?

A: we need additional improvement for the API. We will develop an update for a future release.

Note: resolveApiCreated is the resolve function provided by a Promise surrounding our call to DXChart.createWidget() that we await when the user opens a chart. As I now understand that onApiCreated() is not called only once, I now null the resolveApiCreated function once called, so that it’s not called again when we change layouts. Originally, our code to add the maximise icon and the custom toolbar buttons was elsewhere, to run as a one-off. But since discovering that changing layouts causes the toolbar to reset, I have moved this code into our onChartCreated() callback so that our custom icon / buttons are re-applied when changing layouts. This all works. However, onApiCreated() is being called three times when changing the layout from the layout menu. This results in our custom toolbar icon / buttons to be added multiple times upon layout change. Your demo at https://devexperts.com/dxcharts-demo behaves in the same way: onApiCreated() is called three times (when changing layout), as shown below: From what you have said, it’s my understanding that the expected behavior when changing layout is that onApiCreated() should be called only once by the library.

A: Could be a bug. We will investigate it.

Q341: I resolved the first issue where onApiCreated() was being called multiple times; this was due to an error in my code causing createLayout() to fail.

However, I am still seeing onApiCreated() called three times every time I go to the layout menu and change to a different layout. I’m not expecting onApiCreated() to be called at all as a result of changing the layout, and this is causing other problems; I have checked for any other errors/warnings in our code and can’t see any. I am also seeing that when I change layout, any buttons that I have added to the top toolbar are no longer there and I have to re-add them; is this expected behavior?"

A: Actually, onApiCreated() should be called every time when layout is changing, because api is construct their dependencies which are related to layout data, but I expect it should be called only once, honestly.

If you mean UIOverrides.Toolbar.ToolbarButtons (docs) than it's not expected, no. Btw, Chart Assistant button on our public demo is added using this override. As I can see it's not disappearing during layout change.

Nope, it's not expected behaviour and I can't reproduce this behaviour on our demo apps. Please, make sure that getLayouts() return appropriate data with correct type. It should return a promise with ChartLayoutData value in it.

getLayouts(): Promise<ChartLayoutData>;

Q343: I have noticed that when calling api.changeInstrument(newInstrument), the callback SymbolSuggestProvider.onInstrumentChanged() is not called. I was wondering if this is by design or not.

A: yes, it's designed, because onInstrumentChanged is a callback which is designed to be called from UI (user input) to inform host-application code about this change. If it's manual instrument change via api call changeInstrument, looks like caller already knows that instrument is changing.

Q344: The issue here is that only one point from the scatter is plotted per candlestick width on the x-axis. This means that we may have many points within a 1 hour candle be reduced down to a single point, through some unknown method. I have attached two screenshots, one of another libraries method of candle+scatter charting (which has it's own issues) and the dxcharts.

Additionally, we can see that on the left-most candle in the dxcharts screenshot, we have points plotted for the red and yellow series, despite there being no data in those series for the hour around that candle. I believe this is because it draws a line between the last datapoint (around 11am) and the next available point (around 2pm) and then plots the interpolated value. This can lead to false conclusions about the data in that series. Here are two more screenshots showing how the the scatter series has interpolated plots for many hours when there is no data in the series, but there is data in the primary candle series Hopefully there is a way around this in the API?

A: Regarding scatter points – I'm not sure if that is possible without adjustments from our side, but if these are minor, we will definitely consider it for our backlog.

Can you please provide us with the logic to remove it? When we comment it out in the code, the area where the icon should be still displays as an empty space.

A: Unfortunately, there's no official way to hide/remove these buttons.

A: I think default one is #chart-react-wrapper, I'm not sure how it would work, but you can try

Q347: We are implementing a non-React version of DX Charts. How do we remove the logo with the vanilla js DX chart library. See the screenshot below

in widget we don't have uiOverrides at all, because uiOverrides based on React components but widget is a pure/vanilla JS API. We can add logo internally (as we did right now) or remove it at all and it couldn't be added outside via widget API.

Try this to hide logo using pure css (as temporary workaround):

#dxcharts_logo_container {
display: none;
}

Q348: How to enable cropping of candles with the option to extend them into the future?

From what I see, they would like to update the candles on demand and during our call we said that there isn't an official way to do it, but that a client had implemented something similar using a workaround. Please, if you have this, can you share how-to?

A: Basically, ChartDataProvider decides how many candles it returns for every requestHistoryData call. That number of candles could be different for first call (initial chart candles set) and all the subsequent calls (lazy-loading).

As I said before, to reset candles in chart at any moment of client's application life-cycle, they could use updateCallback. As I can see you wrote before that updatecallback is now working for the client. Anything has changed in here?

Q349: Our use case is to trigger fetch for candles until current date - a replay button which will generate all the candles until today.

I use ChartDataProvider.requestHistoryData but we also use updateCallback because as you said, we need to use it to manual updating of ALL historical chart data. updatecallback is now working, but a new issue came up. As this was covered by DXfeed and they couldn't find the issue, The other hypothesis is to be Dxcharts bug.

A: Defect created with high priority, as this is a showstopper for the client: DXCF-5930 - [Web] RequestHistoryData function changing paremeters Resolved

Q350: I’m encountering an issue with updating the chart data in our implementation. Specifically, when the chart initially loads (e.g., displaying data from 01.01.2024 to 10.01.2024), triggering the updateCallback function successfully fetches and updates the candles up to the current date.

However, if we scroll back in time (e.g., before 01.01.2024) and then trigger the updateCallback, the update does not work as expected. This behavior suggests a potential issue with the chart’s handling of historical data updates.

A: They shouldn't use updateCallback in case of lazy-loading on scrolling. For that is more proper to use just ChartDataProvider.requestHistoryData itself and simply return Promise<ChartCandleData[]> from it. updateCallback usually used in extremely rare cases of manual updating of ALL historical chart data. When the data passing to updateCallback it's completely reset all the all historical data loaded before. Please, just use ChartDataProvider.requestHistoryData and its arguments, eg. symbol, aggregation, options.fromTime and options.toTime to load additional chunk of historical chart data on scroll. Actually ChartDataProvider.requestHistoryData will be called by chart itself at the right moment.

A: You can override individual icons for all menus. For instance to drawings menu footer is available at useUIOverrideComponent(['DrawingsSidebar', 'DrawingsSidebarFooter'], props)

Q352: Are fractional price increments supported?

A: Yes, fractional increments (Such as 1/32)are supported starting 5.15.0

Q353: Is it possible to increase font size

A: It is possible to change font size via CSS https://devexperts.com/dxcharts/documentation-for-developers/dxcharts-react/Fonts

Q354: is there a method we can call from to tell the graph to refresh?

A: we don’t have such a method. But if you say that changing the symbol helps, then you can try to programmatically change the symbol via the method: api.changeInstrument .

Q355: How to accesses React state from provider callbacks

A: There may be many possible solutions, the main thing is that they solve your problem and are convenient.You gave Redux as an example. Redux itself is an abstract JS library that is not tied to React. The react-redux library makes the connection with React. The inconvenience in this case arises when data from Redux needs to be used in the Chart and React is used to transfer it (i.e. useSelector is used). Although it is possible to directly connect chart providers with Redux.

const store = useStore() const chartDeps = useMemo(() => { // .... return { chartDataProvider: { // .... subscribeServiceData: (symbol, callback) => { const subscription = store.subscribe(() => { const newServiceData = selectServiceData(store.getState()) if (newServiceData !== oldServiceData) { callback(newServiceData) } }) } } } }, [store])

But if you have a state defined via useState. Then of course the easiest way is to pass it via ref.

In this case, it is not necessary to use Effect, you can simply assign the ref value directly in the body of the react component.

Q356: Is onApiCreated called once for one render of the graph? Am I right in assuming there is one ChartReactAPI and many ChartWithModules?

A: onApiCreated is called every time you change the multichart mode. For example, when you switch from 1 chart to 4.onChartCreated will be called as many times as there are charts selected within the current ChartReactAPI.When you change the number of charts (from 1 to 4), onApiCreated will be called first and you will get a new ChartReactAPI. Then onChartCreated will be called for new ChartReactAPI instance, according to the number of selected charts.An important point is that new chart instances are created each time and are not shared between ChartReactAPI instances.

Q357: What are the consequences of turning workers off?

A: Workers are used to calculate Indicators. If you disable them, their calculations will be performed in the main thread, which may affect performance.

Q358: Why is this happening? “Failed to create studies webworker Error: Workers disabled”

A: Perhaps you have disabled Workers and this message is about it. If you have explicitly disabled them, then you can ignore this message.

Q359: We see this often in the console. Why? “Warning: findDOMNode is deprecated”.

A: Our code uses the deprecated findDOMNode method. We are currently working on getting rid of methods like findDOMNode so that such messages no longer bother you.PS. This message is written by React itself and will not appear in the production build.

Q360: Why do we get this, “The type of data has been switched: Last → Market”?

A: the initial instrument you set for the chart have type=“FOREX” in SymbolSuggestProvider

Q361: How can I make charts updates faster for live candles?

A: There is a parameter called acceptAggregationPeriod. It is supported for dxchart-dx-feed-data-provider version 0.7.0 and higher. The issue was due to the version—@dx-private/dxchart-dx-feed-data-provider@0.7.0

2025-04-24 14:50 [SUPDXCF-176] Q&A - requestHistoryData called without changing Instrument, aggregation or candle type

Question: There might be some critical issue where in createChartDataProvider requestHistoryData is called without any change Instrument or aggregation or candle type. This is called with the initial symbol which we provided in the initial configuration of ChartReactApp. This is causing incorrect history candles rendering on the chart. platform: web version: 5.12.1

Answer:

2025-04-25 09:26 [SUPDXCF-171] Q&A - chart unsubscribe function errors

Question: 1. When I change multi chart for example from 4 charts to 1 chart unsubscribe function doesn't call 3 times, but logically should 2. Unsubscribing in case of multi chart provides wrong id, without symbol and with wrong timeframe 3. Charts are freezing when browser in bg, maybe we have some method to call it to provoke data refetching? [^Screen Recording 2025-04-22 at 22.44.41.mov] [^Screen Recording 2025-04-22 at 22.45.36.mov] [^NewChart.tsx] [^CandleDataProvider.ts]

Answer: investigating this

2025-04-25 12:30 [SUPDXCF-176] Q&A - requestHistoryData called without changing Instrument, aggregation or candle type

Answer: [~dpelovski] [~rsantos] following details are provided by client: Here is the followed flow 1. On the initial load, we load an url with slug, where this slug is the initial instrument for the chartReactApp. 2. We are running this charting in a hybrid manner where we get a bridge function via our app, where we get the new instrument slug/symbol. 3. Then, we change the instrument with this new slug through chartReactAPI.changeInstrument method. 4. findInstrument is called in symbolSuggestProvider where we fetch necessary details of the symbol, then we resolve it. 5. After that, requestHistoryData is called for candles followed by {}subscibeCandles{}. {color:#6aa84f}Till this flow is correct{color}

2025-04-25 15:08 [SUPDXCF-176] Q&A - requestHistoryData called without changing Instrument, aggregation or candle type

Answer: looking into this. Client reports that wrong instrument is loaded based on the URL or SLUG as they call it is provided. This can be seen by visiting the page they have created with these 2 urls [https://phoenix.indmoney.com/charts/dx/nifty-50?symbol=nifty-50] [https://phoenix.indmoney.com/charts/dx/nifty-50?symbol=sensex] In both cases they have nifty-50 but in reality only what is after that "?symbol=" is the instrument that loads. From what I understand from them, they do try to change the symbol by using the API, but it gets called twice once for the first portion "nifty-50" and then another time for the "symbol=" query param. I am currently investigating why this is the case and if this is normal behaviour, because from what I can see if they don't include the symbol [https://phoenix.indmoney.com/charts/dx/sensex] and [https://phoenix.indmoney.com/charts/dx/nifty-50] it works as expected. So I need more time to understand why this is the case - we either have some sort of overriding mechanism build in based on this specific query param "symbol=" or something else

2025-04-28 08:43 [SUPDXCF-176] Q&A - requestHistoryData called without changing Instrument, aggregation or candle type

Answer: I was able to reproduce this locally by doing the following. Run the demo project and add a query param [http://localhost:3000/?symbol=IBM] This would call 'requestHistoryData' once, however if I called "api.changeInstrument('AAPL');" somewhere in the initialisation of the application the 'requestHistoryData' func will be called twice since we are forcing an instrument change. This is the same as the clients issue. The thing is I cannot find any code related to "symbol=" query param OUTSIDE the demo. Inside the demo there is this function called "requestIPFSinglePromise" that has logic for fetching based on the query param. But it does look like even if I don't call "requestIPFSinglePromise" I can still add "?symbol="SOMETHING"" and I would get fetched data for that so I am investigating where is that happening as it looks like it's a part of the product itself

2025-04-28 08:58 [SUPDXCF-176] Q&A - requestHistoryData called without changing Instrument, aggregation or candle type

Answer: ok, the issue is as expected part of the product itself inside of chart-react. "const symbol = option.toUndefined(getQueryParam('symbol')) ?? chartLayout.symbol;" inside of "dxchart5/chart-react/src/chart/view-models/layout/layout-to-multichart.mapper.ts" So it's not an issue, more like a hidden "feature" for clients to get their data loaded with a query param. [~rsantos] can you please answer back to the client the following or similar :) We've investigated the issue and this appears because of the usage of "?symbol=" query param. In our react wrapper package we have internal logic which takes into consideration the query parameter and if there is one we fetch it for the client. This is a feature that we provide our clients in order to save them time in writing custom logic for this scenario. This is also the case why you are seeing the "requestHistoryData" function call twice. In order to use your own custom logic for fetching data for a symbol through the query param - you can use a query param name different than "symbol". In that case you can use your original suggestion "https://phoenix.indmoney.com/charts/dx/nifty-50" for "nifty-50" without the "?symbol=" query param and parse it yourself, or add a query param with a different name "symbolName=nifty-50" and again parse it yourself. Let me know if that answers your question.

2025-04-28 10:01 [SUPDXCF-176] Q&A - requestHistoryData called without changing Instrument, aggregation or candle type

Answer: [~dpelovski] client answer: Thanks for the clarification here. But this is not the actual issue here as we already noticed this and removed all the symbols related handling from the query param. Despite this, we are getting some random symbol requestHistoryData calls in between. Please check for any other case for this issue.

2025-04-28 10:03 [SUPDXCF-176] Q&A - requestHistoryData called without changing Instrument, aggregation or candle type

Answer: [~rsantos] I've already checked in our demo chart app this is not reproducible. Can the client maybe check 5.14.* version locally and let us know if this is still reproducible?

2025-04-28 10:04 [SUPDXCF-170] Q&A - add increment and decrement to order-entry component

Question: Original client Q&A: does {{api.setTradingQuantityStep(number, chartId)}} from {{ChartReactAPI}} support precision lower than 1e-8 or in decimal form 0.00000001? i set step to 1e-8, click on increment qty button on the chart and nothing happens I there a {{getTradingQuantity(chartId)}} in {{{}ChartReactAPI{}}}? !Screenshot 2025-04-21 at 3.19.17 PM (1).png! Answer: The {{api.setTradingQuantityStep(number, chartId)}} from {{ChartReactAPI}} does support precision down to 1e-8. I will check if that is generating this issue on qty click, but most likely is something on the configuration[https://devexperts.com/dxcharts/documentation-for-developers/dxcharts-react/Component%20Overriding/Trading/order-entry-component] Additional question: could you provide sample code to add increment and decrement to order-entry component?

Answer: [~vpoddubskii] can you confirm after Anton's comments here that we need a defect or improvement on our side? If yes, may you create the ticket and send it to me?

2025-04-28 10:14 [SUPDXCF-176] Q&A - requestHistoryData called without changing Instrument, aggregation or candle type

Answer: [~rsantos] can they also try to use one of our mocked providers and let us know if the issue is still reproducible?

2025-04-28 10:25 [SUPDXCF-170] Q&A - add increment and decrement to order-entry component

Answer: [~rsantos] i've created a ticket: https://jira.in.devexperts.com/browse/DXCF-6078

2025-04-28 14:23 [SUPDXCF-171] Q&A - chart unsubscribe function errors

Answer: [~rsantos] first two are most likely bugs. Can we create a defect with the info from the first 2 points and ask tell the customer we will look into them in the future -> maybe for 5.15. And also ask them for a video of the 3rd point because I can't reproduce it. Thanks :)

2025-04-29 08:17 [SUPDXCF-171] Q&A - chart unsubscribe function errors

Answer: Created defect for first 2 issues https://jira.in.devexperts.com/browse/DXCF-6079 cc [~rsantos]

2025-04-30 09:59 [SUPDXCF-176] Q&A - requestHistoryData called without changing Instrument, aggregation or candle type

Answer: Client answered: Currently, we are not using mock providers. attaching the file of our implementation of createChartDataProvider. [^ChartDataProvider.ts] Our reply to the client: Try to reproduce this issue with the latest version that I sent yesterday (5.14.6). If is still happening, also you can try to reproduce with a mock provider (here's the configuration of the mock provider [https://devexperts.com/dxcharts/documentation-for-developers/dxcharts-react/Providers/Chart%20Data%20Provider]). If in both cases this issue still persists, then we will keep analyzing your code (but not to lose time, I have already shared the details with the team to investigate).

2025-05-05 12:20 [SUPDXCF-180] Q&A - questions regarding instrument switching on the chart

Question: Questions: Does the changeInstrument function maintain any internal queue or stack to handle rapid or consecutive calls? Similarly, does requestHistoryData handle such scenarios sequentially or in parallel? What is the recommended way to ensure that data from the previously loaded instrument is completely cleared from the chart, preventing any overlap or artifacts? We are currently maintaining a single chart instance and switching instruments using {}chartReactAPI.current?.changeInstrument(dataObj.slug, "0") (with chartId "0" as default){}. Are there any known limitations or potential issues with this approach? Attaching a code snippet which is responsible for changing instruments and this is called via app through bridges (Native bridge functions). Platform: web Version 5.14.6 Devexa's answers: 1. The {{changeInstrument}} function does not maintain an internal queue or stack to handle rapid or consecutive calls. It changes the instrument directly based on the provided parameters. 2. The {{requestHistoryData}} function is designed to handle data requests sequentially. It is part of the lazy loading mechanism, which means it will request additional data as needed when you scroll backwards in the chart. 3. To ensure that data from the previously loaded instrument is completely cleared from the chart, you can use the {{updateCallback}} function, which is the last argument of {{{}requestHistoryData{}}}. This function allows you to reset the chart data by providing a new set of data that will overwrite the existing data.4. Using a single chart instance and switching instruments with {{chartReactAPI.current?.changeInstrument(dataObj.slug, "0")}} is generally supported. However, you should be aware that if you have multiple charts, you need to specify the {{chartId}} to ensure the instrument is changed only for the intended chart. There are no specific limitations mentioned, but it's important to manage the data flow correctly to avoid issues like data duplication.

Answer: > Does the changeInstrument function maintain any internal queue or stack to handle rapid or consecutive calls? Similarly, does requestHistoryData handle such scenarios sequentially or in parallel? Unfortunately no, currently there is no queue or any sort of stop mechanics available in current chart version. > What is the recommended way to ensure that data from the previously loaded instrument is completely cleared from the chart, preventing any overlap or artifacts? yeah, i see potential issues here. It looks like the only way to solve it is to override Instrument Suggest component and put some sort of queue or block until success logic there. You can read about overriding in our docs: https://devexperts.com/dxcharts/documentation-for-developers/dxcharts-react/Component%20Overriding/Overview > We are currently maintaining a single chart instance and switching instruments .... Are there any known limitations or potential issues with this approach? only those you mentioned, to not use it too often to prevent any overlaps and wait for the updateCallback after changeInstrument used.

2025-05-06 09:04 [SUPDXCF-181] Q&A - possible bug chart freeze in an unusual state while drawing.

Question: Client faced an issue in the latest build while testing where the chart got frozen and stuck in an unusual state while drawing. Probable Steps to reproduce 1. Start any drawing 2. Scroll the chart in x axis while drawing 3. Chart got stuck PFA a sample video with stuck stage and image of console error while drawing. Platform: web Version: 5.14.6 [^ScreenRecording_05-06-2025 11-48-20_1.MP4] !Screenshot 2025-05-06 at 12.32.54 PM.png|thumbnail!

Answer: couldn't reproduce, can we get more information about certain drawing and certain moment when and how chart was scrolled? mb it is wrong video in ticket?

2025-05-13 13:44 [SUPDXCF-177] Q&A - bug with the pre and post market shading of bars

Question: I may have found a bug with the pre and post market shading of bars and also have 2 questions. The screenshots below are from the DX chart demo site. I have a 1 minute chart with extended sessions turned on. You can see that the 8:30 bar (the market open in my time zone is 8:30 AM) is shaded with the green color that indicates the pre-market session. The second screenshot show the same issue with the last bar of the regular trading session. It is colored with the post market shading. We can replicate the issue with the chart in our application. !thumbnail_image001 (5).png! !thumbnail_image002 (5).png! When do you plan to have the next build ready for production? The previous release build broke the ability to lazy load chart data. If it is not ready within a week, we will need to revert to the previous chart version. Is there a way to easily hide items in the settings menu that are not functional? For example, we are not using your News service. When we click on the News icon, it only shows the word “News”. When you click on it, you are taken to a blank Google search page. We need to hide this from the settings. !thumbnail_image003 (1).png! !thumbnail_image004 (1).png!

Answer: 1. about trading hours bug, it looks like it will be fixed with one of ticket that already done. I don't remember which one exactly. So we just need to new build in production 2. when this build ready i can't give this answer, probably [~dpelovski] can answer. 3. if i understand correct, they can provide a news-data-provider with empty data massive. Or we can do it in our our mock news data provider. But i not sure is it a good solution or not, because i don't know why our default mock provider used by default with this mock data.

2025-05-13 14:28 [SUPDXCF-177] Q&A - bug with the pre and post market shading of bars

Answer: Judging by the commnet "When do you plan to have the next build ready for production? The previous release build broke the ability to lazy load chart data. If it is not ready within a week, we will need to revert to the previous chart version." They mention broken lazy loading, which was fixed in a previous build. So either this question is old, or the client uses a version before 5.14.5(or 6 can't remember). Latest build needs to be sent to client with the lazy loading fix.

2025-05-16 11:58 [SUPDXCF-181] Q&A - possible bug chart freeze in an unusual state while drawing.

Answer: I asked for any additional info for the client, but had no response. I will close this ticket and if needed, I will create a new one

2025-05-16 11:59 [SUPDXCF-177] Q&A - bug with the pre and post market shading of bars

Answer: Updated by client - lazy loading was fixed on last release

2025-05-20 10:12 [SUPDXCF-185] Q&A - Layout issues

Question: Platform: web Fix version: 5.14.6 [1] When I create a “New layout…” from the layouts dropdown, the new layout gets added to the dropdown of that chat instance only. So, if I have another already-opened chart instance (which we do in our mobile app) and I open the Layouts dropdown, the newly created layout is missing from that instance. We have our own in-house event “onLayoutCreated” that all chart instances have visibility of, but how can we ask the charting library to update its Layouts menu so that all chart instances will show the same list of layouts (without having to close the chart and re-open it)? [2] How can we programmatically change the layout to a different layout (as if the user had done this themselves by choosing a different layout from the layouts dropdown menu)? The reason we need to do this is because we are implementing functionality where the user can “set this layout as the default layout for this instrument” and “set this layout as the default layout for this browser”, and this relies on being able to “set layout” in code. Until recently, I had understood that we were to use syncLayoutParts() for this, however this syncs parts from the specified layout into this currently-selected layout; it does not change to a different layout, which is what we need. (We need to be able to do this when the chart initially loads, and also at any point during the lifetime of that chart instance – e.g. when we change instruments.) Devexa answers: 1. To ensure that a new layout is visible across all chart instances, you need to update the Layouts menu for all instances. This can be done by using our in-house event "onLayoutCreated" to notify all chart instances of the new layout. However, the charting library itself does not automatically update the Layouts menu across instances. You might need to implement a mechanism to broadcast the new layout to all instances and refresh their Layouts menu accordingly. 2. To programmatically change the layout to a different one, you can use the {{ChartReactSupportedAPI.syncLayoutParts}} method. This method allows you to manually set the layout during runtime. However, this approach isn't officially recommended for changing layouts, as it is primarily used for syncing parts of a layout. For setting a layout as the default for an instrument or browser, you might need to maintain a dictionary of default/pre-defined layouts on your server side and apply them using this method.

Answer: Thanks Anton [~dpelovski] based on #2, may you please create a ticket to address this improvement in the future? I will link to this ticket and close it.

2025-05-20 16:56 [SUPDXCF-183] Q&A - persist positioning/placement chart studies

Question: Original Q&A thread: https://devexperts.slack.com/archives/C049R2SSW05/p1747318254103199 A user reached out and noticed the positioning/placement of his chart studies revert back to default placement after signing out/back in. Is it possible for the chart to remember these settings after logging out? [^Screen Recording 2025-05-15 at 8.43.41 AM.mov] Platform: web Version: 5.14.6 Devexa answer: Yes, it's possible for our DXcharts to remember chart settings, including the positioning of chart studies, after logging out. Users can save their current chart settings as a "user default," which will be applied whenever they log back in. If a user has saved a "user default," these settings will be applied to the chart. If not, the system default settings will be used.

Answer: should be fixed with DXCF-6105

2025-05-23 14:14 [SUPDXCF-185] Q&A - Layout issues

Answer: [~avorobev] client reply: Thanks for your response. By “chart instances” I was referring to 2 or more separate instances of a chart on one screen at the same time. Please note that we have useLocalStorageForLayout set to false. This is because our requirement is that layouts are stored on our back end per user, meaning that whichever device they use to log in to our platform (mobile, desktop browser, tablet, etc., possibly at the same time), the same list of layouts will be available. I temporarily set useLocalStorageForLayout to true, and can see that a newly-added layout is immediately listed in the layouts menu of all chart instances on that browser. I think that’s why you were unable to reproduce the issue your side. In our case, the value needs to be false. When I add a layout via the layouts dropdown menu, I write it out to our back end. As a result of this, an event “onLayoutAdded” is triggered, and this is picked up by all chart instances – and not just locally; all chart instances across all tabs / browsers / devices for this user get to hear about this event. The event payload contains the chartLayoutWithId object, and the following is the function that runs off the back of it: !image-2025-05-23-15-11-36-219.png|width=739,height=278,id=x__x0000_i1029! As you can see, I add the layout to the layouts array belonging to that chart instance. But when I open the layouts dropdown for that chart instance, the new layout is not part of the list. It seems that the list of layouts in the dropdown remains as it was when the chart instance was created, and thereafter any change to layoutData.layouts is not picked up by the charting library when the layouts dropdown is next opened. Is there a way to ask the library to re-evaluate the list of layouts so that the layouts dropdown reflects the most up-to-date list of layouts and not just the initial list? Regarding setting {{selectedLayoutId}} via the API: We are successfully using syncLayoutParts() to reflect changes made to layouts. If I have two charts open, one in Chrome and the other in Firefox, both on the same layout, and I change the candle type in one of the charts, the other chart will automatically update to show that change. So this aspect is already working quite well. But we do need a way to say (e.g.) api.setLayout(layoutId), so that we can implement the “defaults” functionality I mentioned. However, you mentioned that we could combine syncLayoutParts() with the layoutProvider methods to manually set the selectedLayoutId. If you are saying that such a custom solution would be expected to change the chart’s layout to another one specified, this would be of interest to me. I note that just changing layoutData.selectedLayoutId does not cause the layout to change to a different one. Would you be able to provide an example of how to programmatically change the layout (if this is possible) until you have an official API solution for this?

2025-05-26 10:07 [SUPDXCF-185] Q&A - Layout issues

Answer: Hello, 1. On our demo development environment useLocalStorageForLayout is also set to false for debugging reasons, the only thing this flag does is to provide a mock local storage provider if it's true and the one passed as a dependency if it's false. However we pass a local storage provider manually (with this flag being false), so there is a possibility there is something with layout provider implementation 2. I agree we should add a possibility to change selectedLayoutId and select it right after with API, and not update everything. By provider methods I meant that it has a method called updateLayoutData, It might currently be the only way to update selectedLayoutId s ChartLayoutData contains everything: selectedLayoutId, theme and all layouts as an array

2025-05-26 14:52 [SUPDXCF-185] Q&A - Layout issues

Answer: Thanks [~avorobev] Can you please create a ticket about the possibility to change selectedLayoutId and select it right after with API? As soon as you have created, you can relate to this ticket and close this one. Then, you can discuss about this implementation with [~dpelovski]

2025-05-26 15:28 [SUPDXCF-185] Q&A - Layout issues

Answer: [~rsantos] [~dpelovski] Created an improvement - https://jira.in.devexperts.com/browse/DXCF-6124

2025-05-28 08:21 [SUPDXCF-192] Q&A - rates not updating /updating with delay

Question: We've observed that the candles and rates on our platform appear to be stuck or not updating smoothly. When comparing our charts to platforms like TradingView, the rates seem to be moving significantly faster there. For instance, as you can see in the attached image, the EUR/USD SAXO <1 MIN> rate is currently not updating at all. This needs to be resolved quickly as we cannot have this displayed on our hub in its current state. Looking forward to your prompt response. !image.png|thumbnail!

Answer: well, we need more information, is there a candles information comes from backend in time? Any console errors mb? what the difference between our demo chart? what config did they used? can they reproduce it with our env? probably we would have to make a debug session with them...

2025-05-28 08:42 [SUPDXCF-192] Q&A - rates not updating /updating with delay

Answer: hey [~rsantos] we have a few questions, [~vpoddubskii] wrote them down. Can you please ask the client this, and we can later decide if we need to jump on a call with them?

2025-05-29 10:19 [SUPDXCF-191] Q&A - update aggregation dropdown list

Question: Platform: web Version: 5.14.7 Having some doubt regarding updating the aggregation dropdown update as it is not getting updated despite passing an update aggregation period config. How can we update this list with our provided aggregation configuration? !Screenshot 2025-05-26 at 3.13.53 PM.png|thumbnail! !Screenshot 2025-05-26 at 3.07.48 PM.png|thumbnail! !Screenshot 2025-05-26 at 3.07.29 PM.png|thumbnail!

Answer: Hello [~rsantos] The way periods are set is correct, I tried to push a big object of periods locally (plesae see three new attachments, DEFAULT_AGGREGATION_PERIODS_LIST is a copy of InitialAggregationPeriods) and it appeared just as described, so not sure what the problem is, the only assumption so far is that the mock implementation of user-data-provider.ts if its used instead of custom can break dropdown period list since we synchronize it with custom periods there Also, a little reminder, that updating ChartReactApp dependencies requires local storage layout and user data to be reset to apply the new configuration: !Code_eMEqoBK2U1.png|thumbnail! !Code_Jjx9bQAcbQ.png|thumbnail! !chrome_5AQBDwDqwt.png|thumbnail!

2025-05-29 11:22 [SUPDXCF-195] Q&A - layout issues

Question: Platform: web Version: 5.14.7 If I temporarily set useLocalStorageForLayout to true, I could see that a newly-added layout is immediately listed in the layouts menu of all chart instances on that browser. However, it appears I was mistaken. This is only the case if the other chart instances are opened afresh. If those chart instances are already open, any new layout added using one of the chart instances will not show in any of the other chart instances’ layouts dropdown menu. Only if I open a brand new instance will the layouts menu include the newly added layout. To clarify, here is a test sequence: [1] Open chart instance 1 [2] Open chart instance 2 [3] On existing chart instance 1, open Layouts dropdown menu and add new layout “test” [4] On existing chart instance 2, open Layouts dropdown and see that newly added layout “test” is missing Please would you see if you can reproduce this on your side using the above sequence? It seems to me that the items in the layouts dropdown menu are populated only on initial chart load and are not updated in other (already-open) chart instances when I create / delete / rename layouts in the chart instance I’m working with. I think the action of opening the layouts menu needs to run a re-evaluation each time of what layouts are available to be shown on that list (e.g. looking at layoutData.layouts for the current list). Of course, it would be up to me to ensure that layoutData.layouts is kept current for all chart instances, and as I mentioned yesterday, our system already does this; if your layouts dropdown can be made to look at layoutData.layouts, it will always see the latest list of layouts, regardless of which chart instance it is.

Answer: [~rsantos] basically client suggest us to add a new feature, to somehow sync chart state between different browser tabs. He asking only about layout, but it’s an open question should we and how to do it.there is a settings that saves layout to localstorage, and if user opens second tab and after that in one tab adds layout, he need to update second tab to see changes from previous tab.in theory we can add date for chart state and a mechanism that will for example on tab activate look into local storage and if date in storage is new compare to current chart state - update chart state.but there is lots to think about, lots of cases and nuances, so this is not pure dev decision and needs a req for this.

2025-05-29 12:22 [SUPDXCF-195] Q&A - layout issues

Answer: [~dpelovski] can you check on this item with Vlad and [~dkrivolapov]? If you guys agree on adding this to the BL, please create a ticket and relate to this one (then you can close it). I will let the client know that we will evaluate about adding this functionality and if we have a forecast about it, I'll share with them

2025-05-29 13:28 [SUPDXCF-195] Q&A - layout issues

Answer: I personally don't think we should add this, as [~vpoddubskii] mentioned we expose and save to localStorage, what the client does is up to them. They can save this layout data in the backend or pass it to another chart somewhere or pass it to another tab. I wouldn't suggest this as a new feature, wdyt [~dkrivolapov]

2025-05-29 13:31 [SUPDXCF-195] Q&A - layout issues

Answer: [https://devexperts.slack.com/archives/C012CUVUVSS/p1748517747371569] sorry guys i've made a topic in slack, and here, and now we discuss it in both, so probably we should use only one of it

2025-05-29 14:02 [SUPDXCF-195] Q&A - layout issues

Answer: [~vpoddubskii] [~dpelovski] Can we provide a good tech answer in such case and guide client on how to achieve that on their side? This can later go to our documentation as another example as well.

2025-05-29 15:11 [SUPDXCF-191] Q&A - update aggregation dropdown list

Answer: Thanks. I have provided the answer for the client and I will wait for their feedback

2025-05-30 07:56 [SUPDXCF-195] Q&A - layout issues

Answer: [~dkrivolapov] as they said above: "Of course, it would be up to me to ensure that layoutData.layouts is kept current for all chart instances, and as I mentioned yesterday, {}our system already does this{};...." it seems like they already did it, on their side. But lets do it: In future we might add this feature, but right now you can use layout-provider to add this logic: there is a chart dependency layoutProvider, with this API: {code:java} { updateSelectedLayout, createLayout, updateLayout, getLayouts, deleteLayout, updateLayoutData, }{code} where you can use getLayouts to compare it with current localStorage, and then updateLayout for example using {code:java} document.addEventListener and visibilitychange to check if current tab is active or not. {code}

2025-05-30 08:52 [SUPDXCF-195] Q&A - layout issues

Answer: thanks [~vpoddubskii] I got it. [~rsantos] As a summary. We wont be able to introduce this feature right away, but in case client is looking for guidance on how to make it on their side it is in Vlad's last comment

2025-05-30 09:12 [SUPDXCF-186] Q&A - install Dxcharts modules in an Angular built app

Question: I have one question from our developers. Our application is built with Angular, and we were able to install your Lite version. Next, we need to connect the modules, and this is where we’re encountering difficulties. We need instructions on how to install modules for the Lite version (dxcharts-lite + dxcharts-modules). Could you please help us with it? Devexa answer: 1. {}Install Packages Locally{}: Use npm or yarn to install the necessary packages from a local directory. Assuming you have the unzipped chart package in a directory, run the following commands in your project root: bash npm install ../dxchart.lib/dxchart5-modules npm install ../dxchart.lib/dxstudies npm install ../dxchart.lib/dxchart5-react Or, if you prefer yarn: bash yarn add ../dxchart.lib/dxchart5-modules yarn add ../dxchart.lib/dxstudies yarn add ../dxchart.lib/dxchart5-react This will add the modules to your project locally.2. {}Update {{package.json}}{}: Ensure your {{package.json}} reflects these dependencies correctly: json {code:java} { "name": "your-package", "dependencies": { "@dx-private/dxchart5-modules": "5.14.0", "@dx-private/dxchart5-react": "^5.14.0", "@dx-private/dxstudies": "58.0.0" //... } } {code} 3. {}Install Peer Dependencies{}: DXcharts requires {{react}} and {{react-dom}} as peer dependencies. Make sure they are installed: bash npm install --save react react-dom Or with yarn: bash yarn add react react-dom Note that {{dxchart5-react}} works with {{react}} and {{react-dom}} version 17.x.x or higher.By following these steps, you should be able to connect the necessary modules for DXcharts Lite in your Angular application. If you encounter any issues, ensure that the paths are correct and that all dependencies are properly installed.

Answer: [~dpelovski] is that document that you made a final version? Can we close this ticket then?

2025-05-30 09:23 [SUPDXCF-191] Q&A - update aggregation dropdown list

Answer: Client confirmed that resetting the user-data-provider's custom periods resolved the issue. Thanks for the update.

2025-05-30 09:30 [SUPDXCF-186] Q&A - install Dxcharts modules in an Angular built app

Answer: yes, document is final, we can close

2025-06-02 08:20 [SUPDXCF-194] Q&A - user was unable to see updated chart data despite successful completion of the changeInstrument method and the candles API call.

Question: Platform: web Version: 5.14.7 We recently encountered an issue where a user was unable to see updated chart data despite successful completion of the changeInstrument method and the candles API call. Our logs show no anomalies, and the API response confirms that the new instrument data was fetched successfully. However, the chart continues to display data from the previously loaded instrument, while other parts of the mobile application reflect the correct pricing (above the legend component). Please refer to the attached image for reference. We suspect this may be due to DXcharts caching the previous instrument in case of a failure during rendering. Could you confirm if such a caching mechanism exists or if there could be another underlying reason for this behavior? Additionally, we would greatly benefit from a callback or confirmation from changeInstrument indicating that the new instrument has been fully rendered on the chart. This issue is critical for our user experience, and we appreciate your prompt support in resolving it. !Screenshot_2025-05-28-14-21-26-18_8733eabc5489046586ad8c6f3efd7459.jpg|thumbnail! !Screenshot_2025-05-28-14-25-49-05_8733eabc5489046586ad8c6f3efd7459.jpg|thumbnail!

Answer: Hello [~rsantos], the way chart updates candles is based on a bunch of subjects (changing instrument is one of them, the others are changing period, enabling extended hours and enabling align data in settings) and, if it changed, it calls chart.setData, this method belongs to chart core and is public. Please, confirm two things: 1. The same happens if change period or make some other way of recalculating data 2. chart.setData shows the correct data passed to chart core instance Also, about changing instrument callback, waitForCandlesSet function inside chart-react which could be imported and possibly help to detect when new candles data is loaded

2025-06-03 12:30 [SUPDXCF-192] Q&A - rates not updating /updating with delay

Answer: [~dpelovski] [~vpoddubskii] the HAR file is attached here [^localhost (1).har]

2025-06-03 14:06 [SUPDXCF-192] Q&A - rates not updating /updating with delay

Answer: [~rsantos] issue looks like backend at this time, maybe [~nlukashevich] will find the HAR file more useful :)

2025-06-03 17:30 [SUPDXCF-192] Q&A - rates not updating /updating with delay

Answer: Guys looks like there are some issues in our current implementation of data provider which prevent clients from using our default provider with dxfeed. And which causes incorrect behaviour of live data stream. Lets see tomorrow of that is something we can quickly fix or give some quick tips/recommendation on how this can be fixes from clients sidefollowing problems: • The outdated dxLink JS API is being used • There are no reconnect mechanisms • The default aggregation period is set to 10 seconds[https://www.npmjs.com/package/@dxfeed/dxlink-api] switch to the latest version of the API; it should be fairly easy. Additionally, remove the auto-setting of acceptAggregationPeriod for the channel—it should be on-demand.

2025-06-04 08:44 [SUPDXCF-192] Q&A - rates not updating /updating with delay

Answer: so to solve the issue client should using comments section from this docs: [https://devexperts.com/dxcharts/documentation-for-developers/dxFeed%20Integration] {code:java} // you can pass options object as an argument // { // endpointUrl: 'dxfeed-endpoint-url', // authToken: 'dxfeed-auth-token', // acceptAggregationPeriod: 1, // } {code} pass the config object to the {_}createDxLinkAdapter{_}(), all parameters is unnecessary, so any of it could be added. {code:java} createDxLinkAdapter({ acceptAggregationPeriod: 1 }).then(dxLinkAdapter => { const dxFeedProvider = createDxFeedProvider(dxLinkAdapter); setChartDataProvider(dxFeedProvider); }); {code} default value for acceptAggregationPeriod is 10, that is why client feels long time update rates [~dkrivolapov]

2025-06-04 10:21 [SUPDXCF-192] Q&A - rates not updating /updating with delay

Answer: [~rsantos] I've sent Vlad's comment myself since im in touch with Amir about other feature requests he had. Please don't close ticket yet.

2025-06-05 09:19 [SUPDXCF-214] Q&A- SpreadCO layout issue

Question: Last client update: We have already made a complete LayoutProvider implementation which stores layouts to our own back end (not localStorage) and syncs any layoutData changes to all other chart instances, whether they be on the same screen, on different tabs in the same browser, or in a different browser, or different device. To the specific issue I detailed (in my suggested test sequence) I don’t believe there is any temporary solution unless the layout menu renderer can be made to re-read the current set of layouts each time it’s opened in a chart instance. Either that, or a way to ask the library to refresh its internal list of layouts for a chart instance associated with that dropdown. It sounds like there is currently no way to do this, so please accept this as a feature request. Many thanks. The original issue and our answer: We won't be able to introduce this feature right away due to other priorities, but meanwhile that can be made on your side (in case you still haven't): You can use layout-provider to add this logic - there is a chart dependency layoutProvider, with this API: { updateSelectedLayout, createLayout, updateLayout, getLayouts, deleteLayout, updateLayoutData, } Where you can use getLayouts to compare it with current localStorage, and then updateLayout for example using document.addEventListener and visibilitychange to check if current tab is active or not. Client questions about layouts I previously reported that if I temporarily set useLocalStorageForLayout to true, I could see that a newly-added layout is immediately listed in the layouts menu of all chart instances on that browser. However, it appears I was mistaken. This is only the case if the other chart instances are opened afresh. If those chart instances are already open, any new layout added using one of the chart instances will not show in any of the other chart instances’ layouts dropdown menu. Only if I open a brand new instance will the layouts menu include the newly added layout. To clarify, here is a test sequence: [1] Open chart instance 1 [2] Open chart instance 2 [3] On existing chart instance 1, open Layouts dropdown menu and add new layout “test” [4] On existing chart instance 2, open Layouts dropdown and see that newly added layout “test” is missing Please would you see if you can reproduce this on your side using the above sequence? It seems to me that the items in the layouts dropdown menu are populated only on initial chart load and are not updated in other (already-open) chart instances when I create / delete / rename layouts in the chart instance I’m working with. I think the action of opening the layouts menu needs to run a re-evaluation each time of what layouts are available to be shown on that list (e.g. looking at layoutData.layouts for the current list). Of course, it would be up to me to ensure that layoutData.layouts is kept current for all chart instances, and as I mentioned yesterday, our system already does this; if your layouts dropdown can be made to look at layoutData.layouts, it will always see the latest list of layouts, regardless of which chart instance it is.

Answer: Hello, [~rsantos] >It sounds like there is currently no way to do this, so please accept this as a feature request. Many thanks. This was discussed in a previous ticket between [~vpoddubskii] and [~dkrivolapov], I'm not in a context, but it's possible to do from our side

2025-06-05 09:32 [SUPDXCF-214] Q&A- SpreadCO layout issue

Answer: [~avorobev] [~vpoddubskii] [~rsantos] But what exactly we need to do from our side? What feature should be done?

2025-06-05 09:35 [SUPDXCF-214] Q&A- SpreadCO layout issue

Answer: [~dkrivolapov] we discussed it here: https://devexperts.slack.com/archives/C012CUVUVSS/p1748517747371569

2025-06-05 09:47 [SUPDXCF-214] Q&A- SpreadCO layout issue

Answer: A little update: it's possible to do for the "different browser tabs" case, but not devices, chart is a web (pc browser) project, and without auth mechanism which is implemented on backend it's impossible to do

2025-06-05 11:17 [SUPDXCF-195] Q&A - layout issues

Answer: Hey [~rsantos] I see ticket is assigned to me, looks like it was answered by Vlad and Denis, anything else that's needed?

2025-06-05 12:31 [SUPDXCF-214] Q&A- SpreadCO layout issue

Answer: [~rsantos] here is next attempt to help Spreadco, Please make sure that Devexa will learn from it cause other clients will have this or similar question 100% 1. Call getLayouts from the layout provider after making changes. There’s also a function called exportLayout in the API that might be suitable. 2. Send it to the backend. 3. Receive it from the backend in another chart instance. 4. Use the syncLayoutParts API to apply it in another chart application or provider.

2025-06-06 11:31 [SUPDXCF-216] Q&A - DxScript runtime isn't available

Question: we are seeing an error for a few of our users “DxScript runtime isn't available”. I don’t believe we are provided a dependency for DxScripts. Are users accessing a feature that we are not provisioned for, or do you have any more info on this error? Thank you. We were able to determine where the error originated from. A user tried to add a custom study. We will hide the button so that it does not display.

Answer: !image002.png|thumbnail!

2025-06-06 11:32 [SUPDXCF-216] Q&A - DxScript runtime isn't available

Answer: [~dpelovski] this workflow is new, so still have some restrictions that will be changes. I couldn't assign this ticket to you, but can you take a look to check if there's any actions required from us? Thx

2025-06-06 13:41 [SUPDXCF-216] Q&A - DxScript runtime isn't available

Answer: Hey, "DxScript runtime isn't available" is an error that we display when the user uses a mock of dx-script instead of the real one. Maybe UX is not perfect and it should say something else, but that's the issue they are facing. [~rsantos]

2025-06-09 11:41 [SUPDXCF-217] Q&A - call to reload / refresh chart

Question: Is there any call that we can make to tell the chart to reload / refresh? An example of when the chart currently reloads / refreshes is when we create a new layout in the layouts dropdown – in this case, the chart reloads from scratch, redraws all the top toolbar icons, etc. (My question is nothing to do with creating a layout – just about how to trigger this reload mechanism ourselves.)

Answer: [~dpelovski] [~avorobev] [~vpoddubskii]

2025-06-09 11:46 [SUPDXCF-214] Q&A- SpreadCO layout issue

Answer: [~dpelovski] [~avorobev] [~vpoddubskii] FYI - Orel managed to find issue it is Hi All, I’ve found a solution for using the {{acceptAggregationPeriod}} parameter. The issue was due to the version—{{{}@dx-private/dxchart-dx-feed-data-provider@0.7.0{}}} is required, as the parameter doesn’t exist in version {{{}0.6.0{}}}. It would have saved quite a bit of time if we had known this earlier, so just flagging that for future reference. Could someone help me validate that it’s working as expected? Please let me know which asset I should check and at what timeframe.

2025-06-09 12:01 [SUPDXCF-171] Q&A - chart unsubscribe function errors

Answer: Will close the ticket. Deepvue will most likely not convert to client due to lack of production ready DXscript solution for them

2025-06-09 13:15 [SUPDXCF-217] Q&A - call to reload / refresh chart

Answer: Hello, currently we don't have some kind of this mechanism and it will probably be implemented on in next major version because it requires very big architectual changes, so far only create/destroy chart approach is safe (mount/unmount ChartReactApp all at once)

2025-06-10 05:36 [SUPDXCF-214] Q&A- SpreadCO layout issue

Answer: i'm not sure what you mean by "validate that it's working as expected", but i can confirm that 0.7.0 is what should be used and it was written in this article that Orel used. https://devexperts.com/dxcharts/documentation-for-developers/dxFeed%20Integration

2025-06-10 07:47 [SUPDXCF-214] Q&A- SpreadCO layout issue

Answer: Thanks [~vpoddubskii] there is nothing we need to answer on all good

2025-06-17 14:52 [SUPDXCF-194] Q&A - user was unable to see updated chart data despite successful completion of the changeInstrument method and the candles API call.

Answer: Closing this issue due to client inactivity. They may have resolved it in other way

Q362: How to make symbol name to be shown on a price scale by default?

A: Hi, this needs to be passed into dependencies in order to override the default appearance of the instrument label:initialChartConfig: { components: { yAxis: { labels: { settings: { lastPrice: { mode: 'label', type: 'badge', } }, }, }, },},mode and type are configurablehttps://devexperts.com/dxcharts/documentation-for-developers/dxcharts-react/Quick%20Start/Quick%20Start%20-%20Configuration All the configs are here.

2025-07-01 14:01 [SUPDXCF-224] Q&A - having infinite rendering when passing a custom layoutProvider

Question: Platform: web Version: 5.15.0 We are currently trying to pass a custom layoutProvider that follows closely your documentation logic for this provider. But the DXChart is in an infinite rerendering with console.log("Layout data saved to localStorage:" being spammed infinitely in the browser console. The DXChart chart never loads. If we don't pass our custom layoutProvider everything works fine. I attached to this email the current usage of your chart + our custom layout provider that uses localStorage so you can test. Update: even if we don't pass our custom layoutProvider, the DXChart would load but we would have 3 "Default Layout" instead of 1 [^DevexpertsChart.tsx] [^devexperts-chart-layout-provider.ts] !image.png!

Answer: !image.png|thumbnail! [^DevexpertsChart.tsx] [^devexperts-chart-layout-provider.ts]

2025-07-01 14:02 [SUPDXCF-224] Q&A - having infinite rendering when passing a custom layoutProvider

Answer: Update 2: When we don't pass our custom layoutProvider and DXChart creates 3 "Default Layout" this error is spammed several times in the console: initial-loader.vm.js:6Error while fetching layouts data TypeError: c.replace is not a function at toChartDataSubscriptionKey (multichart-data.utils.js:6:2102) at eval (loading.utils.js:6:2348) at eval (Array.js:1365:85) at Array.map (<anonymous>) at eval (Array.js:1365:59) at pipe (function.js:313:23) at eval (loading.utils.js:6:2291) at Array.forEach (<anonymous>) at getChartDataKeysFromLayout (loading.utils.js:6:1986) at eval (initial-loader.vm.js:6:4297)

2025-07-01 14:03 [SUPDXCF-224] Q&A - having infinite rendering when passing a custom layoutProvider

Answer: [~rsantos] what's the version? 5.15.0 is not released yet?

2025-07-01 15:34 [SUPDXCF-224] Q&A - having infinite rendering when passing a custom layoutProvider

Answer: [~dpelovski] I think I 've generated their last trial from master back then it was equal to 5.15. They needed react 19 support

2025-07-01 15:37 [SUPDXCF-224] Q&A - having infinite rendering when passing a custom layoutProvider

Answer: [~dkrivolapov] ok, got it. [~avorobev] can take a look in this case

2025-07-02 09:03 [SUPDXCF-224] Q&A - having infinite rendering when passing a custom layoutProvider

Answer: Hello, [~dpelovski] So far I tested the given layout provider and it works correct on our env, so the problem in somewhere in main component

2025-07-02 09:09 [SUPDXCF-224] Q&A - having infinite rendering when passing a custom layoutProvider

Answer: [~avorobev] is that the recommendation for the client to check main component? Is there anything else that we can request from the client to better understand the issue? Creds to env/video etc?

2025-07-02 09:13 [SUPDXCF-224] Q&A - having infinite rendering when passing a custom layoutProvider

Answer: Main component uses a lot of outer dependencies, and it's hard to understand which framework is being used, it has imports from next.js for example, so we want to keep analyzing their code we need to at least locally create an env, but before that get an information about tech stack being used

2025-07-02 09:47 [SUPDXCF-224] Q&A - having infinite rendering when passing a custom layoutProvider

Answer: [~rsantos] since the issue is not reproducible on our side and we can't ask the client for their project - let's ask them their tech stack + env in which we can reproduce this for now. We don't have the dev resource to spent hours debugging one issue this thoroughly.

2025-07-02 10:50 [SUPDXCF-224] Q&A - having infinite rendering when passing a custom layoutProvider

Answer: [~dpelovski] answer from the client: Hi! Thanks for the reply. We are using Next.js 15.3.2 with the default building tools. dxchart version is 5.14.0-rc1. Like I said, even without a custom layoutProvider we are still experiencing issues with layout, but at least the chart loads. Is there a recommended way to add your dxchart into a Next.js app? Is the way we added your chart in the first place right? We have tried other methods, but this one worked. Have you checked our custom layoutProvider implementation? It is closely following your documentation on it.

2025-07-02 10:53 [SUPDXCF-224] Q&A - having infinite rendering when passing a custom layoutProvider

Answer: [~rsantos] 5.14.0-rc1 is pretty old, can we ask them to try 5.14.8 and report back? We also don't have a guide for Next.js, maybe be something interesting to look into in the future (I'll add a note to myself).

2025-07-02 10:59 [SUPDXCF-224] Q&A - having infinite rendering when passing a custom layoutProvider

Answer: [~dkrivolapov] should I send them 5.14.8 or do you want to? What's their build configs?

2025-07-02 11:22 [SUPDXCF-224] Q&A - having infinite rendering when passing a custom layoutProvider

Answer: [~rsantos] [~dpelovski] Im not sure why they are providing this number 5.14.0-rc1, it must be 5.{}15{}.0-rc1. They wanted react 19 support, it only starts from version 5.15 or higher. I generated the build from master brunch. I almost certain that whatever they are reporting now is for the latest (and greatest) version of DXcharts

2025-07-02 11:25 [SUPDXCF-224] Q&A - having infinite rendering when passing a custom layoutProvider

Answer: If that's the case, they'll need to provide env where we can reproduce this and understand the issue, since we can't reproduce it locally.

2025-07-02 16:54 [SUPDXCF-227] Q&A -initial dxchart load all events and news to be visible by default.

Question: I want on the initial dxchart load all events and news to be visible by default. Without having to go to settings > events to enable them. How can I do that with dxchart5-react? Web 5.15.0 RC-1

Answer: !Screenshot 2025-07-02 175420.png|thumbnail!

2025-07-03 10:24 [SUPDXCF-224] Q&A - having infinite rendering when passing a custom layoutProvider

Answer: [~dpelovski] [~dkrivolapov] I asked the client about the version (as he mentioned a lower version on his previous email) and the reply was: I think you are right. The zip file received from you is named "dxchart.lib-5.15.0 - 03.07.25 -", but the version key in dxchart5-react and dxchart5-modules from your library have 5.14.0-rc1 version. Unfortunately, we cannot give you access to the full code, but the files I sent you should be enough to reproduce the error I think: setting up a Next.js app, using your chart component in the same way, providing only the custom layout provider. So, the modules were outdated on 5.15.0 RC1? Should we run a new build or is there any other solution?

2025-07-03 10:26 [SUPDXCF-224] Q&A - having infinite rendering when passing a custom layoutProvider

Answer: [~rsantos] package is fine, it's 5.15.0 we just had a custom version for them. This needs to be investigated, I'll spent some time in the next days to create a next.js app and try to add charts inside and use their files. Please inform client that this is a super custom request and will require some time.

2025-07-04 07:38 [SUPDXCF-224] Q&A - having infinite rendering when passing a custom layoutProvider

Answer: [~atnikolov] please investigate the issue. What you need to do. # Install Next.js 15.3.2 # Install latest artifact from [https://dxcity.in.devexperts.com/buildConfiguration/RiaTeam_CiDeploymentsDxChart5_ZipDXChartLibProductionBuildTrialBuildNew#all-projects] make sure it's 5.15.0+ # Run the project according to our docs # Add the clients' example code and understand the issue Keep the next.js project locally so we can use it for further debugging :)

2025-07-07 10:13 [SUPDXCF-224] Q&A - having infinite rendering when passing a custom layoutProvider

Answer: !Screenshot 2025-07-07 at 13.10.49-1.png|thumbnail!

2025-07-07 10:14 [SUPDXCF-224] Q&A - having infinite rendering when passing a custom layoutProvider

Answer: [dpelovski] They used dynamic import from NextJS for the ChartReactApp component and commented the loading property which was the reason for the infinite re-rendering. !Screenshot 2025-07-07 at 13.10.49.png! I spot one additional mistake nor related to the issue. They used object for [initialInstrument|https://devexperts.com/dxcharts/documentation-for-developers/dxcharts-react/API%20Reference%20-%20Configuration#::text=Type-,initialInstrument,-Initial%20instrument%20when] instead of string.

2025-07-07 10:19 [SUPDXCF-224] Q&A - having infinite rendering when passing a custom layoutProvider

Answer: Thanks [~atnikolov]. [~rsantos] can you please share this with the client these 3 things?

2025-07-07 11:06 [SUPDXCF-227] Q&A -initial dxchart load all events and news to be visible by default.

Answer: [~atnikolov] please verify this

2025-07-07 13:23 [SUPDXCF-227] Q&A -initial dxchart load all events and news to be visible by default.

Answer: Yes, they need to use the chart config as in !Screenshot 2025-07-02 175420.png|thumbnail! .

2025-07-07 14:31 [SUPDXCF-224] Q&A - having infinite rendering when passing a custom layoutProvider

Answer: [~atnikolov] [~dpelovski] another comment from the client: Indeed, adding the loading prop seems to fix the problem of the dxchart not loading with data at all and layouts work on the first initial render. However, I see that even though I can add a new layout now and it is saved to the localStorage, after refreshing the page, when the dxchart mounts again it will override the localStorage with the default layout - hence deleting any custom layout added previously. Can you check what is causing this in my previously provided code - maybe it is something wrong in devexperts-chart-layout-provider.ts? Regarding initialInstrument property, I see that in dxchart5-react/dist/chart/chart-react-app.d.ts -> dxchart5-react/dist/chart/model/instrument.model.d.ts, the type of the initialInstrument property an object that looks like: { _tag: 'Some', value: 'AAPL' } Does that mean that the TypeScript types are outdated?

2025-07-08 10:03 [SUPDXCF-224] Q&A - having infinite rendering when passing a custom layoutProvider

2025-07-08 10:50 [SUPDXCF-224] Q&A - having infinite rendering when passing a custom layoutProvider

Answer: [~rsantos] They shouldn't receive this error "TypeError: c.replace is not a function at toChartDataSubscriptionKey..." anymore, if they changed the initialSymbol to be just the symbol not object. Regarding the TypeScript types question: They was talking about dxchart5-react/dist/chart/model/instrument.model.d.ts which is the whole object for initialInstrument. But chart dependencies accept only the symbol (string) from it: dxchart5-react/dist/chart/chart-react-app.d.ts -> FullChartAppDependencies.initialInstrument: which is - readonly initialInstrument: Option<Instrument['symbol']>; - the object that they describe. I am still on overriding the layouts issue.

2025-07-09 07:18 [SUPDXCF-224] Q&A - having infinite rendering when passing a custom layoutProvider

Answer: [^devexperts-chart-layout-provider-1.ts]

2025-07-09 07:20 [SUPDXCF-224] Q&A - having infinite rendering when passing a custom layoutProvider

Answer: [^devexperts-chart-layout-provider-modified.ts]

2025-07-09 07:20 [SUPDXCF-224] Q&A - having infinite rendering when passing a custom layoutProvider

Answer: Hi [~rsantos], I apply the modified devexperts-chart-layout-provider.ts file that solves the problem with layouts overwriting when page refreshes. Main change is in updateLayoutData function. [^devexperts-chart-layout-provider-modified.ts]

2025-07-15 16:22 [SUPDXCF-170] Q&A - add increment and decrement to order-entry component

Answer: [~rsantos] Can't be tested by QA in our environment. Resolved based on dev review result. Should be tested on Testy side (Was fixed in v.5.15.1)

2025-07-16 09:30 [SUPDXCF-152] Q&A - Tradestation March 2025 feedback

Question: 1. The trading session is lacking. In our WebTrading platform we showed many useful values while orders were being modified like P&L, cost etc. and the movement was very smooth and with the normal drag & drop events of any element in the web. Will be implemented in [https://jira.in.devexperts.com/browse/DXCF-5976] ------- 2. If the values were outside the scale area, indicators were shown to reflect that. [https://jira.in.devexperts.com/browse/DXCHARTBL-745] (planned for 5.17.0) - Potential candidate for 5.16.0 ------- 3. We wanted to hide or show areas based on whether the chart is active or not and it Check with dev team and design if is possible to provide such customisations. When interaction is started with the chart menus slide in from top, bottom, sides "{}We wanted to hide or show areas based on whether the chart is active or not and it{} {}was not possible programmatically, we had to do some tricks to achieve this{}" Not needed for our design. Make task to allow this via config or UI overrides. DXCF-6027 ------- 4. It was not possible to remove an icon in the toolbar and we did another hack to remove it directly from the HTML DOM, but this is not the ideal solution. a. For example: Synchronize Drawings does not work as we don’t currently have Multi-Chart. chart 5.14.0 is needed, planning to add menu adjustments through config in 5.15.0 useUIOverrideComponent(['DrawingsSidebar', 'DrawingsSidebarFooter'], props) ------- 6. When we changed symbols or changed the interval (1D, 1W, 1M), the horizontal scrolling sometimes does not reset correctly, it kept the previous position after receiving the new data. a. Chart seems to be sending the wrong date stamp New chart version update should help (5.14.1) -------- 7. When using an indicator, ideally we can show the inputs in the legend: Think with designer and dev team either it is possible to add indicators inputs to the legend. Case - when add two similar indicators with different input parameters it isn't visible anywhere including legend DXCHARTBL-752 ------- 8. For Futures symbols, some trade in fractional increments (eg. 1/32). Currenlty DX is converting to a decimal. We must be able to show fractions on these futures symbols. Comes out in 5.15.0 [https://jira.in.devexperts.com/browse/DXCF-5866] ------- 9. Talk to Sergey about access to their platform ------- 10. There is a bug when any order type is being dragged through screen price label doesn't match with what price is shown in the order label Requirements updated [https://jira.in.devexperts.com/browse/DXCHARTBL-700] Может подумать с дизайнером, в сафари завести отдельную задачу на тормоза и отставание мышки ------- 11. Provide trade station with Nexus access (Rob) ------- 12. Process a case when many orders are placed closed to each other [^image (232).png] Think with the designer on how order stacking works now Looks like it doesn't work for all cases. Stacking should be working for all order types when one order is on top of the other for half of its height + 1 PX Order with the highest price is always on top and then in the list orders are sorted from the highest price to lowest (potential fix for 5.15.0) Task [https://jira.in.devexperts.com/browse/DXCF-6020] ------- 13. Define policy for supporting new/old React versions (discuss with the dev team) DXCF-6028 -------- 14. Reset chart position when changing symbol. Discuss with the dev team if it can be configured. Think if we should update this behaviour by default DXCF-6032 -------- 15. Abandoned accounting package does not build because of package.json bug [https://www.npmjs.com/package/accounting|https://urldefense.com/v3/https://www.npmjs.com/package/accounting;!!M-p9_UwKwbE!iddp71a3lcry0jPtCbUhDc54E0anWa13CXmnhQ8rlcanq_Ik_XpEo1NQifltxNmfjNNz8BLWS_AjNuYKLHjSl2qO$] Check with the dev team Сделать таску чтобы переехать на [https://github.com/nashdot/accounting-js] [https://jira.in.devexperts.com/browse/DXCF-6031] -------- 16. Runtime error when using chart “import_react_dom.default.findDOMNode is not a function” -> abandoned React function that shouldn't be used starting October 2018 Create tasks for replacing deprecated methods above and maybe others [https://react.dev/blog/2024/04/25/react-19-upgrade-guide] Changing it can be potentially one of the easiest ways to introduce React 19 support DXCF-6030 ------- 17. Google Tag Manager Dev team to investigate if firebase is adding this Dev team to provide non-analytics build for testing Chat with the team - remove google tag manager (chat with them) [https://devexperts.slack.com/archives/C073GKXU31V/p1739794052435619] DXCF-6029

Answer: [~rsantos] {{[DXCF-6020] Trading - Order grouping doesn't work properly}} Was fixed in v.5.15.1

2025-07-16 10:12 [SUPDXCF-250] Q&A - changeInstrument is not triggered correctly

Question: We are currently experiencing an issue with the .changeInstrument method. When we call this method it seems like findInstrument is fired but then nothing happens, the symbol is not changing. I have already tried to isolate the problem by commenting out orderProvider, positionProvider, and other providers, but it seems like the issue still persists. I have attached the essential files needed to reproduce the issue. The .changeInstrument method is called in DevexpertsChartToolbar.tsx Is there a recommended or better way to set up the chart so that we are able to change the instrument? We will need this logic also for multichart, when we want to change the instrument only in one of the charts and still be able to trade. We are using Next.js 15.3.2, dxchart.lib-5.15.0.

Answer: [^DevexpertsChartToolbar.tsx]

2025-07-16 10:37 [SUPDXCF-250] Q&A - changeInstrument is not triggered correctly

Answer: assigning to [~atnikolov] since he has some experience with Next js already and with this client

2025-07-17 07:31 [SUPDXCF-251] Q&A - order entry component missing

Question: Platform: web Version: 5.15.0 it seems like the order entry component on the y axis is missing, there should be an expandable plus button when hovering over the chart areamissing in 5.15.0, also in docs [https://devexperts.com/dxcharts/documentation-for-developers/dxcharts-react/Component%20Overriding/Trading/order-entry-component]

Answer: !Screenshot 2025-07-16 at 7.15.33 PM.png|thumbnail! !Screenshot 2025-07-16 at 7.11.16 PM.png|thumbnail!

2025-07-17 08:06 [SUPDXCF-251] Q&A - order entry component missing

Answer: In order to have this option enabled, they need to enable Trading settings -> Trading from Chart. Otherwise they won't have the Plus button. cc [~rsantos] !Screenshot 2025-07-17 at 11.06.10.png|thumbnail!

2025-07-17 12:32 [SUPDXCF-250] Q&A - changeInstrument is not triggered correctly

Answer: [~rsantos] How they integrate DevexpertsChartToolbar.tsx with DevexpertsChart.tsx? In the previous sent file there were no chartSymbolRef defined. They need to pass chartSymbolRef.current to findInstrument() method. And to change the instrument only for current selected chart. They need to pass current selected chart id to changeInstrument() function: chartApiRef.current.changeInstrument('some symbol', chartApiRef.current.getSelectedChartId())

2025-07-17 15:05 [SUPDXCF-250] Q&A - changeInstrument is not triggered correctly

Answer: Hi Dragos, Regarding your question about integrating {{DevexpertsChartToolbar.tsx}} with {{{}DevexpertsChart.tsx{}}}, here’s how it can be done: To change the instrument only for the currently selected chart, you should call the {{changeInstrument()}} method with the appropriate parameters: chartApiRef.current.changeInstrument('some symbol', chartApiRef.current.getSelectedChartId()); This ensures that the instrument is updated only for the active chart. As for {{{}findInstrument(){}}}, there’s no need to use {{chartSymbolRef.current}} directly — the method accepts a parameter, so you can pass the symbol string directly to it: chartApiRef.current.findInstrument('your symbol'); !image-2025-07-17-15-42-15-754.png! !_thumb_1046339.png|thumbnail! Let us know if you need a usage example or further clarification. Best regards, DXcharts support team

2025-07-17 15:05 [SUPDXCF-250] Q&A - changeInstrument is not triggered correctly

Answer: !image-2025-07-17-15-42-15-754-1.png|thumbnail!

2025-07-18 09:05 [SUPDXCF-250] Q&A - changeInstrument is not triggered correctly

Answer: [~atnikolov] [~dpelovski] client answer: I tried using chartApiRef.current.changeInstrument('some symbol', chartApiRef.current.getSelectedChartId());, but unfortunately I get the same effect. I console logged the instrumentSymbol in chartDataProvider, and even after clicking the symbol name to change it to "XAUUSD" (and .changeInstrument method is called), the chartDataProvider logs the instrumentSymbol as "EURUSD" (the initial symbol). I attached a video highlighting this. I will also attach the current files state.

2025-07-18 10:27 [SUPDXCF-250] Q&A - changeInstrument is not triggered correctly

Answer: [~rsantos] Did we have the video attached or the files already?

2025-07-18 10:35 [SUPDXCF-250] Q&A - changeInstrument is not triggered correctly

Answer: [^2025-07-18 11-12-34.mkv] [^DevexpertsChartToolbar-1.tsx]

2025-07-18 10:35 [SUPDXCF-250] Q&A - changeInstrument is not triggered correctly

Answer: [~atnikolov] yes, sorry. I forgot to attach those. Here [^2025-07-18 11-12-34.mkv] and [^DevexpertsChartToolbar-1.tsx]

2025-07-21 07:49 [SUPDXCF-250] Q&A - changeInstrument is not triggered correctly

Answer: [~dpelovski] Can you request DevexpertChart.tsx file (which is integrated with {}DevexpertsChartToolbar.tsx{}) from the client? With the current state of the local file I have I could not reproduce the issue.

2025-07-21 09:03 [SUPDXCF-250] Q&A - changeInstrument is not triggered correctly

Answer: Hi Dragos, Thank you for sharing the information from your recent conversation with Rob. As he's currently out of office, I’ll be taking over this support request. From what I understand, Rob had asked for two files: DevexpertChart.tsx and {}DevexpertsChartToolbar.tsx{}. However, in the current ticket, I can only see the DevexpertsChartToolbar.tsx file attached. Could you please also send us the DevexpertChart.tsx file? I’ll forward it to our development team so they can continue troubleshooting the issue. Apologies if you’ve already shared it and it got lost along the way. Best regards, DXcharts support team

Q363: Is it possible to specify precision for order quantity?

A: Yes, it is specified in ChartReactSupportedAPI.setTradingQuantityPrecision, more details on this page https://devexperts.com/dxcharts/documentation-for-developers/dxcharts-react/API%20Reference%20-%20API

Q364: which part of the layout should I be looking at to find the default drawing color? We already have a layout provider using the code you shared, and that saves chart colors correctly, but I'm just not sure where to find the default drawing color in layouts.

A: chart layout has a field drawings and inside of that there is a Map (Record) of all instruments which contain drawings, each drawing has a field properties and since all drawing models are differ a little the content of this sub object can differ

Search for properties or lineColor should also work

Full path is layout => charts => chart[index] => drawings => "some instrument" => "drawing as a part of array" => properties

Q365: we’re curious if the library version is compatible with a mobile app built using React Native?

A: the only way to use our app in React Native is via webview like in native app development

Q366: What does ChartDataProvider.subscribeServiceData do?

A: The subscribe Service Data method is used to subscribe to additional market data for the specified symbol. As far as i understand this method is used for: (Displaying additional information in the legend, providing context for analysis like bid/ask prices, previous close, and some data for trading instruments)

Q367: how can access ChartComponent.doActivate() from dx api and how it is used?

A: doActivate() is protected method, but there is activate() method that calls doActive for each chart entity after some state checks, what is dx api? i assume that at first u need to access certain chart instance and then use __CHART_INSTANCE_0.chartComponent.activate()

Q368: dx applyUponCreation (no specific question it has been sent to the chat just like that)

A: applyUponCreation is a boolean setting in the chart configuration that controls the behavior of automatically applying newly created aggregation periods.it determines whether the chart should automatically switch to the newly created aggregation period (true) or simply add it to the list without applying it (false).For example u can use it to disable it for cases where you need to add multiple periods at once without switching the chart

Q369: observable changeAggregationPeriod

A: changeAggregationPeriod is the main way to change the aggregation period. observable changeAggregationPeriod -> changeAggregationPeriod is a function not observable, which changes the aggregation period. We have observable for analytics only after aggregationPeriod is set.

Q370: dx onInstrumentChangedTimeframeViewportEffect

A: onInstrumentChangedTimeframeViewportEffectAutomatically adjust the scale and display of the chart when switching between different tools (basically it waiting for instrument data to load, then applies the same timeframe to that instrument, then scales the Y-axis)

A: timeframe presets can be disabled via chartReactConfig

timeframePresets: { mode: 'none' }

Q372: What does setAggregationTimeframeChangeStrategy() do?

A: it sets a way viewport is saved and reproduced after instrument/period change

Q373: Please define "service data"

A: service data is additional information to the main candlestick chart data, which provides various indicators of a trading instrument in real time.in this case:

export interface ServiceData { prevDayClosePrice?: number; prePostMarketClose?: number; bid?: number; ask?: number; }

so it allows you to display more complete trading information on the chart, including bid/ask spreads and comparisons with previous closures.

Q374: dX to cancel requestHistoryData and can I cancel a chart historical data

A: there is no actual cancel for requestHistoryData that already sent, but you can manage the Promise that returns inside of the function and answer with empty Array for example.

There is also some mechanism available in Provider and config:

unsubscribeSymbolData: Clears subscriptions, but does not cancel active Promise requests

Timeout: Automatically regenerates requests via chartReactConfig.dataTimeout

cleanupSubscriptions: Clears observable subscriptions, but does not affect Promise

A: to disable timeframe toolbar you can override it with TimeframePresetsComponent key in Footer

like we do for toolbar itself: https://devexperts.com/dxcharts/documentation-for-developers/dxcharts-react/Component%20Overriding/Toolbar/toolbar-component

or footer example: https://devexperts.com/dxcharts/documentation-for-developers/dxcharts-react/Component%20Overriding/Footer/footer-componentsomething like:

import { ChartReactApp } from '@dx-private/dxchart5-react'; const uiOverrides = { Footer: { TimeframePresetsComponent: () => null // remove the component } }; export const YourApp = () => { return ( <ChartReactApp dependencies={{ ...YOUR_PROVIDERS }} uiOverrides={uiOverrides} /> ); };

or there is setting for timeframe:

import { ChartReactApp } from '@dx-private/dxchart5-react'; const config = { timeframePresets: { mode: 'none' // to turn off or there is 'default' and 'full' settings } }; export const YourApp = () => { return ( <ChartReactApp dependencies={{ ...YOUR_PROVIDERS }} config={config} /> ); };

Q376: Do you have an example of uiOverride for instrument suggest

A: import React, { useState, useCallback } from 'react';

import { ChartReactApp } from '@dx-private/dxchart5-react';

import { InstrumentSuggestComponentProps } from '@dx-private/dxchart5-react/dist/chart/containers/instrument-selector/instrument-selector.model';

import { CREATE_MOCK_PROVIDERS } from '@dx-private/dxchart5-react-mock-providers';

const CustomInstrumentSuggest: React.FC<InstrumentSuggestComponentProps> = ({

instrument,

onInstrumentChanged

}) => {

const [isOpen, setIsOpen] = useState(false);

const [searchValue, setSearchValue] = useState('');

// example list of instruments that u should provide from API in real project

const instruments = [

{ symbol: 'AAPL', description: 'Apple Inc', type: 'STOCK', priceIncrements: [0.01] },

{ symbol: 'GOOGL', description: 'Alphabet Inc Class A', type: 'STOCK', priceIncrements: [0.01] },

{ symbol: 'MSFT', description: 'Microsoft Corp', type: 'STOCK', priceIncrements: [0.01] },

{ symbol: 'TSLA', description: 'Tesla Inc', type: 'STOCK', priceIncrements: [0.01] },

{ symbol: 'AMZN', description: 'Amazon.com Inc', type: 'STOCK', priceIncrements: [0.01] },

];

const filteredInstruments = instruments.filter(

instr =>

instr.symbol.toLowerCase().includes(searchValue.toLowerCase()) ||

instr.description.toLowerCase().includes(searchValue.toLowerCase())

);

const handleInstrumentSelect = useCallback((selectedInstrument: any) => {

onInstrumentChanged(selectedInstrument);

setSearchValue('');

setIsOpen(false);

}, [onInstrumentChanged]);

return (

<input

type="text"

value={searchValue || instrument || ''}

onChange={(e) => setSearchValue(e.target.value)}

onFocus={() => setIsOpen(true)}

placeholder="Search instruments..."

style={{

width: '100%',

padding: '8px 12px',

border: '1px solid #ccc',

borderRadius: '4px',

fontSize: '14px'

}}

{isOpen && (

<div style={{

position: 'absolute',

top: '100%',

left: 0,

right: 0,

backgroundColor: 'white',

border: '1px solid #ccc',

borderTop: 'none',

borderRadius: '0 0 4px 4px',

maxHeight: '200px',

overflowY: 'auto',

zIndex: 1000,

boxShadow: '0 2px 8px rgba(0,0,0,0.1)'

}}>

{filteredInstruments.length > 0 ? (

filteredInstruments.map((instr) => (

<div

key={instr.symbol}

onClick={() => handleInstrumentSelect(instr)}

style={{

padding: '8px 12px',

cursor: 'pointer',

borderBottom: '1px solid #eee',

display: 'flex',

justifyContent: 'space-between'

}}

onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#f5f5f5'}

onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'transparent'}

<div>

<strong>{instr.symbol}</strong>

{instr.description}

</div>

{instr.type}

</span>

</div>

))

) : (

No instruments found

</div>

)}

</div>

)}

{/* Overlay to close outside */}

{isOpen && (

<div

style={{

position: 'fixed',

top: 0,

left: 0,

right: 0,

bottom: 0,

zIndex: 999

}}

onClick={() => setIsOpen(false)}

)}

</div>

);

};

// UI Override

export const YourApp = () => {

const uiOverrides = {

InstrumentSuggest: CustomInstrumentSuggest

};

return (

<ChartReactApp

dependencies={{ ...CREATE_MOCK_PROVIDERS() }}

uiOverrides={uiOverrides}

);

};

Q377: how to provide a layoutProvider to the dxchart chart?

A: it is described here https://devexperts.com/dxcharts/documentation-for-developers/dxcharts-react/Providers/Layout%20Provider

Q378: how i can add programatic drawing to the favourites?

A: can be done with setUserData of user data provider

Q379: how to override positions component with ui override feature. positon component of trading feature.

A: import React, { memo } from 'react';

import { OverrideProps } from '@dx-private/dxchart5-react/dist/chart/ui-overrides';

import { PositionProps } from '@dx-private/dxchart5-react/dist/chart/components/trading/order/position.component';

import {

PositionContainerStyled,

PositionStyled,

OrderSectionStyled,

PositionSectionDelimiter,

PositionLineStyled

} from '@dx-private/dxchart5-react/dist/chart/components/trading/order/position.styled';

const Position = memo<OverrideProps<PositionProps>>(

({ originalProps: props }) => {

const {

position,

horizontalLineWidth,

halfOrderHeight,

isLineVisible = true,

currency

} = props;

const { disabled, model, selected = false } = position;

const { side, pl, quantity } = model;

const yCoord = y ? y - halfOrderHeight : 0;

const positive = pl > 0;

return (

<PositionContainerStyled

$disabled={disabled}

$yCoord={yCoord}

<PositionStyled

disabled={disabled}

side={side}

$positive={positive}

selected={selected}

<OrderSectionStyled>{quantity}</OrderSectionStyled>

{new Intl.NumberFormat('en-US', {

style: 'currency',

currency: currency || 'USD'

}).format(pl)}

</OrderSectionStyled>

</PositionStyled>

{isLineVisible && (

<PositionLineStyled

x={'101%'}

y={halfOrderHeight}

width={horizontalLineWidth}

pl={pl}

disabled={disabled}

)}

</PositionContainerStyled>

</div>

);

}

);

export const OverridingPositionComponent = () => {

const onApiCreated = (api: ChartReactAPI) => {

api.onChartCreated((_chartId, _chartInstance) => {});

};

return (

<ChartReactAppWrapper

customConfig={{

trading: {

enabled: true,

}

}}

dependencies={{

...CREATE_MOCK_PROVIDERS(),

onApiCreated

}}

uiOverrides={{

trading: {

Position,

}

}}

);

};

Q380: How to increase the precision to 4 digits in the last price label and also the crosshair label

A: Precision of last candle and crosstool labels is the same as precision of the instrument, so the instrument precision should be changed, it should be done in symbol suggest provider. The example would be priceIncrements: [0.0001] More details on this page

https://devexperts.com/dxcharts/documentation-for-developers/dxcharts-react/Price%20Precision

Q381: I need to reload / refresh the whole chart object, not just the data

A: I think the only way is to call chart.destroy and remount it from scratch

Q382: how to set it so we get the wicks in the code

A: It's a part of chart config - chart.config.components.chart.showWicks: true/false

Q383: How to create orders on chart load programatically

A: You can do it via order provider

import { OrderProvider } from '@dx-private/dxchart5-react/dist/providers/trading/order.provider';

import { Order, OrderWithId } from '@dx-private/dxchart5-react/dist/chart/model/trading/order.model';

import { ExecutedOrder } from '@dx-private/dxchart5-react/dist/chart/model/executed-orders.model';

import { ReplaySubject, Subject } from 'rxjs';

import { tap, share } from 'rxjs/operators';

import { createIdGenerator } from '@dx-private/dxchart5-react/dist/utils/id-generator.utils';

export const createCustomOrderProvider = (): OrderProvider => {

const generatorId = createIdGenerator('custom_orders__');

const orders: Record<string, Record<string, OrderWithId>> = {};

const currentOrdersBySymbol: Record<string, ReplaySubject<OrderWithId[]>> = {};

const executedOrders: Record<string, Record<string, ExecutedOrder>> = {};

const currentExecutedOrdersBySymbol: Record<string, ReplaySubject<ExecutedOrder[]>> = {};

const createInitialOrders = (symbol: string) => {

if (!orders[symbol]) {

orders[symbol] = {};

}

// example orders to create programatically

const initialOrders: OrderWithId[] = [

{

id: generatorId(),

orderType: 'limit',

type: 'original',

side: 'buy',

limitPrice: 150.00,

stopPrice: 150.00,

quantity: 100,

{

id: generatorId(),

orderType: 'stop',

type: 'original',

side: 'sell',

limitPrice: 160.00,

stopPrice: 160.00,

quantity: 50,

{

id: generatorId(),

orderType: 'market',

type: 'original',

side: 'buy',

limitPrice: 155.00,

stopPrice: 155.00,

quantity: 75,

}

];

initialOrders.forEach(order => {

orders[symbol][order.id] = order;

});

triggerOrders(symbol);

};

const triggerOrders = (symbol: string) => {

if (!currentOrdersBySymbol[symbol]) {

currentOrdersBySymbol[symbol] = new ReplaySubject<OrderWithId[]>();

}

const ordersList = Object.values(orders[symbol] || {});

currentOrdersBySymbol[symbol].next(ordersList);

};

const triggerExecutedOrders = (symbol: string) => {

if (!currentExecutedOrdersBySymbol[symbol]) {

currentExecutedOrdersBySymbol[symbol] = new ReplaySubject<ExecutedOrder[]>();

}

const executedOrdersList = Object.values(executedOrders[symbol] || {});

currentExecutedOrdersBySymbol[symbol].next(executedOrdersList);

};

return {

createOrder(symbol: string, order: Order): Promise<string> {

if (!orders[symbol]) {

orders[symbol] = {};

}

const newOrder: OrderWithId = {

...order,

id: generatorId(),

};

orders[symbol][newOrder.id] = newOrder;

triggerOrders(symbol);

return Promise.resolve(newOrder.id);

createOcoOrders(symbol: string, parentOrderId: string, orders: [Order | undefined, Order | undefined]): Promise<[string, string]> {

const orderIds: [string, string] = ['', ''];

if (orders[0]) {

this.createOrder(symbol, orders[0]).then(id => {

orderIds[0] = id;

});

}

if (orders[1]) {

this.createOrder(symbol, orders[1]).then(id => {

orderIds[1] = id;

});

}

return Promise.resolve(orderIds);

updateOrder(symbol: string, order: OrderWithId): Promise<void> {

if (orders[symbol] && orders[symbol][order.id]) {

orders[symbol][order.id] = order;

triggerOrders(symbol);

}

return Promise.resolve();

deleteOrder(symbol: string, order: OrderWithId): Promise<void> {

if (orders[symbol] && orders[symbol][order.id]) {

delete orders[symbol][order.id];

triggerOrders(symbol);

}

return Promise.resolve();

observeOrders(symbol: string, callback: (orders: OrderWithId[]) => void): void {

if (!currentOrdersBySymbol[symbol]) {

currentOrdersBySymbol[symbol] = new ReplaySubject<OrderWithId[]>();

}

currentOrdersBySymbol[symbol].subscribe(callback);

if (!orders[symbol]) {

createInitialOrders(symbol);

}

observeExecutedOrders(symbol: string, callback: (orders: ExecutedOrder[]) => void): void {

if (!currentExecutedOrdersBySymbol[symbol]) {

currentExecutedOrdersBySymbol[symbol] = new ReplaySubject<ExecutedOrder[]>();

}

currentExecutedOrdersBySymbol[symbol].subscribe(callback);

};

Q384: UserDataProvider implemnetation

A: you can find example here https://webdev.prosp.devexperts.com:9081/docs/dxcharts-react/Providers/User%20Data%20Provider (

A: you can find examples here:

https://devexperts.com/dxcharts/documentation-for-developers/dxcharts-react/Component%20Overriding/Toolbar/toolbar-component and also https://devexperts.com/dxcharts/documentation-for-developers/dxcharts-react/Component%20Overriding/Toolbar%20Buttons/toolbar-buttons

Q386: const ds = pane.createDataSeries(); ds.setDataPoints([candles.value, indicator.data]). With this code i expect that rendered two lines, but only indicator.data actually rendered. Why?

A: probably something wrong with points that you provide inside, this is signature of the setDataPoints function:

/** * Sets the data points and recalculates internal state * @param {DataSeriesPoint[][] | DataSeriesPoint[]} points - The data points to set for the model. Can be an array of arrays or a single array. * @returns {void} */ public setDataPoints(points: D[][] | D[]) { this.dataPoints = points; this.extentComponent.paneComponent.updateView(); }

Q387: When there are no layouts, what should we set selectedLayoutId to?

A: When there are no layouts, the selectedLayoutId should be set to an empty string. ''If selectedLayoutId is empty or not found in layouts, chart will create a new default layout.The new layout will receive a unique ID, which will become the new selectedLayoutId

we have a function

const checkLayoutNotEmpty = (layoutData: ChartLayoutData) => layoutData.layouts.length !== 0 && layoutData.selectedLayoutId && layoutData.selectedLayoutId !== '';

and function doCreateDefaultLayoutcreates:

const newLayout = { ...newNamedLayout, id: '', lastUpdateTimeStamp: new Date().getTime(), }; const layoutData: ChartLayoutData = { selectedLayoutId: '', layouts: [newLayout], theme: DEFAULT_THEME, };

Q388: Quick question: can you please let me know how to set volume to the “Buy” and “Sell” buttons on the chart (top-left). Default its showing 100.( I want to set initial volume,max volume allowed and stepper for increase or decraese.

A: These options are configurable.

For Default volume -> you can use defaultOrderQuantity option inside of your chart react config. Something like this

trading: {

defaultOrderQuantity: 150,

Related documentation to read more: https://devexperts.com/dxcharts/documentation-for-developers/dxcharts-react/Trading

For adjusting the steps for the volume you need to set setTradingQuantityStep from ChartReactAPI. Something like this

api.setTradingQuantityStep(20);

2025-08-13 14:24 [SUPDXCF-251] Q&A - order entry component missing

Answer: Based on response in chat from client, this is no longer relevant. Closing.

2025-08-15 08:54 [SUPDXCF-250] Q&A - changeInstrument is not triggered correctly

Answer: Hi Dragos, This is just a follow up to your original request. Let us know if you are still experiencing the original issue and if so please provide the files mentioned in my last comment. If we do not hear from you in the next 3 days, I'll be closing the ticket. If a new issue appears you can always open a new support request. Best regards. DXcharts support team

Q389: We have attempted to get the chart setting to work that allows you to select the price type on the price axis as Bid, Last, Ask or Market. The Last always plots. How do we implement so that it works correctly?

initialChartReactSettings: {
candlesData: {
price: '...', // one of "last", "mark", "bid", "ask"
},

By default priceType is last or if chartReactConfig.priceTypes does not includes the provided priceType. Exception is with forex, where priceType is changed to mark.

Q390: We are not able to get the Volume Weighted Average Price Indicator to plot on a chart. We have attempted to pass in the VWAP value, but it does not display.

A: In order to implement VWAP indicator you'll need to do the following.

Implement trading session provider https://devexperts.com/dxcharts/documentation-for-developers/dxcharts-react/Providers/Trading%20Sessions%20Provider More info can be found here: https://devexperts.com/dxcharts/documentation-for-developers/dxcharts-react/Providers/Chart%20Data%20Provider right under "Please note that the VWAP indicator requires trading sessions data for its calculations"

Candles need to include typicalPrice field (described in the second article I posted)

At the moment, it appears to be added under the <BODY> tag.

A: Currently, the studies panel is rendered via a portal that attaches it directly to the <body> element. This is intentional to ensure it overlays correctly on top of all chart content and is not clipped by container overflow or z-index rules.

At the moment, there isn’t a built-in configuration option to change the parent container of the studies panel.

On a side note: while not recommended - you can always use the human readable class DXChart-PopupBackdropStyled` and its parent to move the modal somewhere else after it's fully rendered. Just to clarify - I am not suggesting it as a solution since it's very hacky and could result in broken functionality, but at this time there is no alternative.

Q392: When i right click on chart Buy Market is showing as Nan. how to control this?. Can you throw me some light on this?

A: Market value for orders is taken from the last candle bid/ask price, so data provider implementation should be cheched, what exactly is being passed as a bid and ask prices. Data provider has ServiceDataProvider, which allows to use subscribeServiceData and get bid/ask values

Q393: regarding the indicators template on the web. when saving a template in chart mode, the template is saved under the indicators templates. however, when the user goes to a different tab and then later returns to charts, the template is no longer saved.

A: From what I can see the indicator template is not being persisted. As this functionality is part of our providers, let's try to rule out provider code implementation.Can you import CREATE_MOCK_PROVIDERS() from import { CREATE_MOCK_PROVIDERS } from "@dx-private/dxchart5-react-mock-providers/dist"; within your code and pass it directly to your dependencies

Q394: What is the id of the "Default Layout"?

A: "0" - zero.

Q395: How can I programmatically select a different layout?

A: using layoutProvider.updateSelectedLayout(${some layout id})

Q396: how to use subscribeServiceData

A: import { createMockChartDataProvider, ServiceData } from '@dx-private/dxchart5-react-mock-providers';

const dataProvider = createMockChartDataProvider();

const symbol = "AAPL" // or other symbol

....

dataProvider.subscribeServiceData(symbol, (serviceData: ServiceData) => { ...your logic })

Q397: How can we set the parent container for the studies window?

A: Override with ‘rightClickMenus’, ‘studiesMenu’

export const StyledStudiesMenu: React.FC<RCMenuOverrideProps<StudiesMenuContentProps>> = ({ originalProps }) => { return ( <div style={{ background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', borderRadius: '8px', overflow: 'hidden' }}> <StudiesMenuContent {...originalProps} /> </div> ); } ; ... const uiOverrides = { rightClickMenus: { studiesMenu: CustomStudiesMenu, }, }; return ( <ChartReactApp uiOverrides={uiOverrides} /> );

Q398: Can I plot only a specific fixed time range on the chart?

A: let setTimeRange = (start: number, end: number) => {};

const onApiCreated = (api: ChartReactAPI) => {

api.onChartCreated((chartId, chart) => {

setTimeRange = (start: number, end: number) => {

chart.chartModel.setTimestampRange(start, end);

console.log('test', start, end);

};

});

}

....

setTimeRange(

new Date('2025-01-01').getTime(),

new Date('2025-01-31').getTime()

);

Q399: Can you guide me what setting I can override in order to change the default zoom of the chart? Currently it shows like data from the past 1-2 hours with tens or hundreds of candles. I would like to change this to a more "balanced zoom state" where I can see about 25 candles on the phone's screen. See attached screenshots of current and desired layout.

A: you can try defaultViewportItems

At the moment, it appears to be added under the <BODY> tag.

At the moment, there isn’t a built-in configuration option to change the parent container of the studies panel.

Q401: We are not able to get the Volume Weighted Average Price Indicator to plot on a chart. We have attempted to pass in the VWAP value, but it does not display.

A: Thanks for your question. In order to implement VWAP indicator you'll need to do the following.

Candles need to include typicalPrice field (described in the second article I posted)

Q402: We have attempted to get the chart setting to work that allows you to select the price type on the price axis as Bid, Last, Ask or Market. The Last always plots. How do we implement so that it works correctly?

can be done in ChartReactApp.dependencies:

initialChartReactSettings: {
candlesData: {
price: '...', // one of "last", "mark", "bid", "ask"
},

By default priceType is last or if chartReactConfig.priceTypes does not includes the provided priceType. Exception is with forex, where priceType is changed to mark.

Q403: When creating a protection order for an existing position, a temporary order ID is assigned to the position. In cases where the backend fails to create the order, our createOrder function in the ordersProvider returns a rejected promise.

However, even after this failure, the temporary order ID remains linked to the position. This causes issues in our UI — for example, in the position component, we check if an order ID exists to decide whether to show the "Create Protection Order" entry point. Since the temporary ID is still present, the entry point is hidden incorrectly. We attempted to reset the position state on failure by updating it via dataCallback with the previous state, but the temporary order ID is not being cleared. Expected behavior: On order creation failure, the temporary order ID linked with the position should be removed/reset so that the position reflects the correct state and the UI entry point can be shown again. Steps to reproduce: Create a protection order for an existing position. 2. Simulate backend failure in createOrder (reject the promise). 3. Observe that the temporary order ID still exists on the position object.

A: You can try to use a function called unLinkOrderFromOriginalOrder in your position provider implementation which allows to remove protection order from a position.

You can access the function by importing it directly from @dx-private/dxchart5-react/dist/chart/view-models/trading/trading-functions.

2025-09-23 08:57 [SUPDXCF-282] [] 5.15.4 - web react - requestHistoryData timeout

Question: Some of price history requests triggered by the requestHistoryData function take very long to finish (get a response). Because of this when I change the aggregation, the chart will wait a little bit and display “No data available”. When the request of price history finishes and returns the candle data the chart will not update and it will still display “No data available”. Right now we have a workaround to adjust the from and to datetime so that the requests don’t take long to finish. We would like a way to adjust the timeout of the requestHistoryData, we want to make it wait up until 2 minutes before returning “No data available”.

Answer: Hello [~dragos.cojocaru@hoopsai.com] at the moment requestHistoryData does not provide way to pass timeout. But the following code can help with creating wrapper function to handle that case: {code:java} const createHistoryDataWithTimeout = (requestTimeout: number) => { return ( chartDataProvider: ChartDataProvider, symbol: string, aggregationPeriod: AggregationPeriod, options: { fromTime?: number; toTime?: number; } & ChartDataOptions, updateCallback?: (data: ChartCandleData[]) => void, chartId?: string): Observable<ChartCandleData[]> => { return from( chartDataProvider.requestHistoryData(symbol, aggregationPeriod, options, updateCallback, chartId)).pipe( map(data => /* handle received data /), timeout(requestTimeout), catchError(error => / handle errors */), ); } } {code}

Q404: Some of price history requests triggered by the requestHistoryData function take very long to finish (get a response). Because of this when I change the aggregation, the chart will wait a little bit and display “No data available”. When the request of price history finishes and returns the candle data the chart will not update and it will still display “No data available”. Right now we have a workaround to adjust the from and to datetime so that the requests don’t take long to finish. We would like a way to adjust the timeout of the requestHistoryData, we want to make it wait up until 2 minutes before returning “No data available”.

at the moment requestHistoryData does not provide way to pass timeout. But the following code can help with creating wrapper function to handle that case:

const createHistoryDataWithTimeout = (requestTimeout: number) =>
{
return (
chartDataProvider: ChartDataProvider,
symbol: string,
aggregationPeriod: AggregationPeriod,
options: { fromTime?: number; toTime?: number; } & ChartDataOptions,
updateCallback?: (data: ChartCandleData[]) => void,
chartId?: string): Observable<ChartCandleData[]> => {
return from(
chartDataProvider.requestHistoryData(symbol, aggregationPeriod, options, updateCallback, chartId)).pipe(
map(data => /* handle received data */),
timeout(requestTimeout),
catchError(error => /* handle errors */),
);
}
}

Q405: We are currently having a problem where if you make two orders or positions and they get merged (collapsed) onto the dxchart you are not able to click them to add a stop loss or a take profit.

We are using: "name": "@dx-private/dxchart5-react", "version": "5.15.4", We are using Next.js 15.5.0, and react 19.1.1.

A: there might be a problem with finding a parent order ID inside of a group

I will attach a modified createOrder function which might help in case of it only reproduces for groups, but please take a look of how ids and other properties for orders are generated inside mapMT5OrderToDXOrder function, it might be related to it, because protection order is also an order, but with different values for properties

createOrder: async (

symbol: string,

order: TradingOrProtectionOrder

): Promise<OrderId> => {

if (!token) throw new Error('Not connected to MT5')

const tradingMode = useChartDSStore.getState().tradingMode

if (

order.type === 'sl' ||

order.type === 'tp' ||

order.type === 'modify'

) {

const protectionOrder = order as ProtectionOrder

const parentTicket = protectionOrder.originalItemId

// Ensure can find the parent in editableOrders

const actualTicket = parentTicket.replace(/^(order-|protection-|temp-)/, '')

// Make MT5 API call in background

setTimeout(async () => {

try {

// Use the clean ticket ID for MT5 API

let stopLoss: number | undefined

let takeProfit: number | undefined

if (protectionOrder.type === 'sl') {

stopLoss = protectionOrder.stopPrice ?? protectionOrder.limitPrice ?? 0

} else if (protectionOrder.type === 'tp') {

takeProfit = protectionOrder.limitPrice ?? 0

}

const params = {

id: token,

ticket: actualTicket, // Use clean ticket ID

stoploss: stopLoss ?? 0,

takeprofit: takeProfit ?? 0,

}

const response = await fetch(

`${API_HOST}/OrderModify?${new URLSearchParams(

Object.entries(params).map(([k, v]) => [k, String(v)])

)}`

)

if (!response.ok) {

console.error(Failed to modify order for SL/TP: ${await response.text()})

return

}

console.log('Protection order successfully sent to MT5')

} catch (error) {

console.error('Error creating protection order:', error)

}

}, 0)

// Return the original parentTicket ID so chart lib can find the parent

// This is what allows it to find the order in editableOrders

return ${protectionOrder.type}-${actualTicket}-${Date.now()}

}

// Get the symbol parameters using the provided function.

const symbolParams = await getSymbolParams(symbol)

const { contractSize, lotsStep, minLots, maxLots } = symbolParams

if (contractSize <= 0) {

toast.error(

Order failed: Invalid contract size (${contractSize}) for symbol ${symbol}.

)

throw new Error(

Cannot place order: Invalid contract size (${contractSize}) for symbol ${symbol}

)

}

let lots: number

if (tradingMode === 'lots') {

// In 'lots' mode, order.quantity is already in lots. No conversion needed.

lots = order.quantity

} else {

// In 'amount' mode (existing logic), convert amount to lots.

lots = order.quantity / contractSize

}

// Validate against lot step and correct if necessary.

// eg. if lotsStep is 0.01, lots acceptable values are 0.01, 0.02, 0.03, etc.

// eg. if lotsStep is 0.1, lots acceptable values are 0.1, 0.2, 0.3, etc.

// eg. if lotsStep is 0.15, lots acceptable values are 0.15, 0.30, 0.45, etc.

// Use a more robust method to handle floating-point precision, otherwise JavaScript will

// round incorrectly for small values, such as 0.11 % 0.01 will equal 0.009999999999999998,

// instead of 0.01.

// An alternative would be to use a library like Decimal.js for: const remainder = lots % lotsStep and if (Math.abs(remainder) > 1e-9)

const stepsFromZero = Math.round(lots / lotsStep)

const expectedLots = stepsFromZero * lotsStep

const difference = Math.abs(lots - expectedLots)

let hasOrderBeenRounded = false

let finalAmount

// Use a smaller epsilon that accounts for floating-point precision

if (difference > lotsStep * 1e-10) {

// Round down to the nearest step

const correctedLots = Math.floor(lots / lotsStep) * lotsStep

finalAmount = correctedLots * contractSize

hasOrderBeenRounded = true

lots = correctedLots // Use the corrected lot size for the trade.

}

// Validate against min/max lots.

if (lots < minLots) {

toast.error(

Order failed: Trade size of ${lots} lots is below the minimum of ${minLots} lots for ${symbol}.

)

throw new Error(

Trade size of ${lots} lots is below the minimum of ${minLots} lots for ${symbol}.

)

}

if (lots > maxLots) {

toast.error(

Order failed: Trade size of ${lots} lots is above the maximum of ${maxLots} lots for ${symbol}.

)

throw new Error(

Trade size of ${lots} lots is above the maximum of ${maxLots} lots for ${symbol}.

)

}

// Handle regular pending or market order creation via OrderSend

const operation = mapToMT5OrderOperation(order.orderType, order.side)

let executionPrice = order.limitPrice ?? order.stopPrice ?? 0

// For market orders, we must fetch the current price.

if (order.orderType === 'market') {

try {

const quoteResponse = await fetch(

${API_HOST}/GetQuote?id=${token}&symbol=${symbol}

)

const quote: MT5Quote = await quoteResponse.json()

executionPrice = order.side === 'buy' ? quote.ask : quote.bid

if (!quoteResponse.ok || !executionPrice || executionPrice <= 0) {

throw new Error(

Could not fetch valid market price: ${await quoteResponse.text()}

)

}

} catch (e: any) {

throw new Error(Market price fetch failed: ${e.message})

}

// console.log(

// 'executionPrice',

// executionPrice,

// symbolParams.digits,

// parseFloat(executionPrice.toFixed(symbolParams.digits))

// )

// if (executionPrice > 0 && symbolParams.digits) {

// executionPrice = parseFloat(executionPrice.toFixed(symbolParams.digits))

// }

const params = {

id: token,

symbol: symbol,

operation: operation,

volume: lots,

price: executionPrice,

stoploss: order.type === 'original' && (order.stopLoss ?? 0),

takeprofit: order.type === 'original' && (order.takeProfit ?? 0),

comment: 'Placed from DealSize',

...(order.type === 'original' &&

order.expirationType && {

expirationType: order.expirationType,

}),

}

// Transform params to URLSearchParams format

let url = `${API_HOST}/OrderSend?${new URLSearchParams(

Object.entries(params).map(([k, v]) => [k, String(v)])

)}`

// Add expiration parameter directly if present

// We don't URL encode the date to preserve the format.

// The expirationString should be already adjusted to the server's time.

if (

order.type === 'original' &&

order.expirationType === 'Specified' &&

order.expirationDateTime

) {

url += &expiration=${order.expirationDateTime}

}

const response = await fetch(url)

if (!response.ok) {

throw new Error(Failed to send order: ${await response.text()})

}

const newOrder: MT5Order = await response.json()

if ('code' in newOrder && newOrder.code === 'INVALID_PRICE') {

toast.error(Order failed: Invalid price for order.)

throw new Error('Invalid price for order.')

}

if ('code' in newOrder && newOrder.code === 'INVALID_STOPS') {

toast.error(Order failed: Invalid stops for order.)

throw new Error('Invalid stops for order.')

}

if ('code' in newOrder && newOrder.code === 'TRADE_DISABLED') {

toast.error(Order failed: Trade is disabled for this symbol.)

throw new Error('Trade is disabled for this symbol.')

}

if (!('ticket' in newOrder) || !newOrder.ticket) {

toast.error(Order failed: No ticket returned for order.)

throw new Error('Server did not return a valid order after creation.')

}

const roundedToastMessage =

tradingMode === 'amount'

? Order was rounded down to ${finalAmount?.toFixed(2)} (${lots} lots) and placed successfully.

: Order was rounded down to ${lots} lots and placed successfully.

toast.success(

hasOrderBeenRounded

? roundedToastMessage

: Order placed successfully.,

{

duration: hasOrderBeenRounded ? 6000 : 4000,

}

)

return newOrder.ticket.toString()

on in our chartReactConfig. The default value is 12 seconds, passed to the dataTimeout key. Here's an example: {code:java} <ChartReactApp dependencies={{ ...otherDependencies, chartReactConfig: { dataTimeout: 2 * 60 * 1000, } }} />{code} Let me know if this was helpful. DXcharts support team.

Q406: Some of price history requests triggered by the requestHistoryData function take very long to finish (get a response). Because of this when I change the aggregation, the chart will wait a little bit and display “No data available”. When the request of price history finishes and returns the candle data the chart will not update and it will still display “No data available”. Right now we have a workaround to adjust the from and to datetime so that the requests don’t take long to finish. We would like a way to adjust the timeout of the requestHistoryData, we want to make it wait up until 2 minutes before returning “No data available”.

you can directly set timeout as an option in our

chartReactConfig. The default value is 12 seconds, passed to the dataTimeout key.

Here's an example:

<ChartReactApp
dependencies={{
...otherDependencies,
chartReactConfig: {
dataTimeout: 2 * 60 * 1000,
}
}}
/>

---

### Q407: Is it possible to have separate default chart view for each of the assets? Like MSFT will have RSI and MACD and channel drawing, while APPL will have BB and line drawing tool (these are just examples it can be pretty much any combination of asset + indicator

+ drawing tool)

A: We have similar thing on https://devexperts.com/dxcharts-demo/ it's using custom layout which is a JSON file. Save this layout to local storage or whatever storage they choose. And then create layout provider with this layout.

import * as complexLayout from "./layouts/complex.json"; export const complexLayoutData = { selectedLayoutId: "1", layouts: [ { id: "1", name: "Complex Layout", lastUpdateTimeStamp: Date.now(), ...complexLayout, }, ], }; // save layout data to storage (local storage, session storage, etc.)

const layoutKey = "layoutsComplex"; <ChartReactApp dependencies={{ //...otherDeps layoutProvider: createLayoutProvider(layoutKey, { expirationPeriod: // set some expiration period of the layout }), }} />;

But the JSON file will be big. And they again need to understand how layouts works. It's possible to add indicators, drawings etc. first to chart via UI and copy the layout object. Couldn't find better way of doing this. (edited)

Q408: Can client push text programmatically on the chart? Its either through some custom component they'll have to write or through "text" drawing tool

A: They can create drawing with type text but they should create the whole drawing object:

export interface Drawing<T extends DrawingType> { data?: unknown; id: string; visible: boolean; locked: boolean; synced?: boolean; keyPoints: Array<DrawingKeyPoint>; properties: PropertiesByType[T]; type: T; _internalDrawing: DrawingModel<T>; }

And finally call setDrawings

chartInstance.drawings.setDrawings({ AAPL: drawings });

Q409: After selecting a drawing, the following control will be displayed. What is its name?

Is it possible to disable/remove this widget for a specific drawing? e.g. Drawings that were generated by us. If not, is there a way to disable the selection function on the drawing?

A: component name is DrawingsToolbarContainerStyled, in can disable via CSS https://devexperts.com/dxcharts/documentation-for-developers/dxcharts-react/styling#overriding-styles-for-a-general-ui-components

we have DrawingsToolbar as our human-readable CSS class and I think it's the best way to customize logic for it

Q410: is it possible to disable the Editing Dialog when a drawing is double-clicked?

A: we have a CSS class for it - DrawingsPopup. in can disable via CSS https://devexperts.com/dxcharts/documentation-for-developers/dxcharts-react/styling#overriding-styles-for-a-general-ui-components

Q411: How to manage the layer at code level? Can I move all my generated drawings into a new layer programmatically?

A: You can achieve this using the setLayerItems API. However, please note that it requires careful handling to avoid any unintended issues, as drawings and layer items can be quite sensitive.

A: If the final goal for trading items is to make them completely non-interactive, using pointer-events: none could work. This would disable dragging and clicking on orders (no SL/TP buttons).

Also, if orders are to be created on the chart through some custom control or just via the API, it’s possible to create orders programmatically using the provider.

A: Yep, this is available through UI overrides

rightClickMenus: {

yAxisMenu: ComponentType<RCMenuOverrideProps<YAxisConfiguratorPopoverProps>>;

backgroundMenu: ComponentType<RCMenuOverrideProps<BackgroundMenuProps>>;

studiesMenu: ComponentType<RCMenuOverrideProps<StudiesMenuContentProps>>;

drawingsMenu: ComponentType<RCMenuOverrideProps<DrawingsMenuProps>>;

legendMenu: ComponentType<RCMenuOverrideProps<LegendMenuProps>>;

dataMenu: ComponentType<RCMenuOverrideProps<DataMenuProps>>;

orderMenu: ComponentType<RCMenuOverrideProps<OrderMenuProps>>;

positionMenu: React.FC<RCMenuOverrideProps<PositionMenuProps>>;

YAxisMenuElements: YAxisMenuElementDeclaration[];

BackgroundMenuElements: BackgroundMenuElementDeclaration[];

StudiesMenuElements: StudiesMenuElementDeclaration[];

DrawingsMenuElements: DrawingsMenuElementDeclaration[];

LegendMenuElements: LegendMenuElementDeclaration[];

DataMenuElements: DataMenuMainElementDeclaration[];

DataCompareMenuElements: DataMenuCompareElementDeclaration[];

OrderMenuElements: Array<RCMenuElementDeclaration>;

PositionMenuElements: Array<RCMenuElementDeclaration>;

A: You can do this:

${PositionContainerStyled} {

.CloseOrderButton {

display: none;

}

A: we have DrawingsToolbar as our human-readable CSS class and I think it's the best way to customize logic for it

Q416: is it possible to disable the Editing Dialog when a drawing is double-clicked?

A: we have 'DrawingsPopup' as our human-readable CSS class and I think it's the best way to customize logic for it

Q417: How to manage the layer at code level? Can I move all my generated drawings into a new layer programmatically?

A: Theoretically I think it's possible via setLayerItems API, but need to be very careful to not break something, since drawings and layer items are very easy to break

Q418: How to change the formatter for volume

A: The value for volume is taken from candles, so the value can be changed in ChartDataProvider, but instrument precision still will be applied to it.

There is no any Api that would help to change precision for that specific field, currently even override UI wouldn't help with that case, because this value comes from deep view-model effect that mutate value in legend (for history: updateChartLegendEffect in chart-legend.dom-mutation-model.ts)

Q419: Do we need to create a protection order on the OrderProvider to set a take-profit or stop-loss for a market position? If so, what values should I set for price, and orderType respectively?

yes, for make take profit and stop loss market position is used protection orders (the one with originalItemId key and type 'tp' or 'sl').

const slOrder: Order = {
type: 'sl',
orderType: 'limit',
limitPrice: 140.0, // with orderType 'limit'
side: 'sell', // opposite to buy position
quantity: 100,
originalItemId: positionId,
};

limitPrice with 'limit' orderType and stopPrice with 'stop' orderType

Q420: For setting the connection between position and open orders, only one SL and one TP order can be linked via setting protectionOrderIds. What if I have multiple TP/SL on the same position?

A: yes, our system was not designed for multiple protection orders cases currently, but several orders still can be used protectionOrderIds. i've attached new orders and positions providers(mini-oms-positions.provider-1.tsmini-oms-orders.provider-1.ts) with preadded position and 3 protection orders attached to them in initializeAAPLProtectionOrders function just to show how it can be done currently.

Q421: How to change the colours for drawings

here is how u can change the colors for drawings theme

initialChartConfig: {
// Configure colors for drawing labels on X and Y axes
// These colors will be used for labels that appear when drawings are added to the chart
themes: {
dark: {
drawingsTheme: {
xAxis: {
labelColor: 'rgba(0, 150, 255, 1)', // Text color for X-axis labels
highlightColor: 'rgba(0, 150, 255, 0.1)',
},
yAxis: {
labelColor: 'rgba(0, 200, 100, 1)', // Background color for Y-axis labels
highlightColor: 'rgba(0, 200, 100, 0.1)',
},
textColor: 'rgba(0, 150, 255, 1)', // Text color for drawing info panel
textBg: 'rgba(20, 20, 19, 0.7)', // Background color for drawing info panel
},
},
},
},

---

### Q422: When the items are too close together, they will be grouped together. Is it able to prioritize the items on the grouped container? Let’s say we want to pick the LMT order at top instead of PnL.

**A:**

You can use the same but with GroupOrder instead of Regular order and change the initial component and put priority logic that you would like to have there:

export interface GroupOrderProps {
readonly id: string;
readonly isOpened: boolean;
readonly tradingItems: VisualTradingItem[];
readonly onSelect?: (id: string) => void;
readonly onDblClick?: (id: string) => void;
readonly onClick?: (id: string) => void;
readonly onGroupOpen?: () => void;
readonly changeGroupVisibility: (id: string, value: boolean) => void;
readonly removeOrder: (id: string) => void;
readonly removePosition: (id: string) => void;
readonly onDragStart: (id: string) => void;
readonly y: number;
readonly showPriceAsLabels?: boolean;
readonly horizontalLineWidth: number;
readonly halfOrderHeight: number;
readonly isDragging: boolean;
readonly tradingSettings: ChartReactSettings['trading'];
readonly editableItemsPresented: boolean;
readonly currency: string;
}
const TRADING_ITEM_HEIGHT = 19;
export const GroupOrder = memo((overrideProps: OverrideProps<GroupOrderProps>) => {
const { chartReactAPIProps: _chartApi, originalProps: props } = overrideProps;
const {
id,
isOpened,
tradingItems,
changeGroupVisibility,
onGroupOpen,
onSelect = constVoid,
onDblClick = constVoid,
onClick = constVoid,
removeOrder = constVoid,
removePosition = constVoid,
onDragStart = constVoid,
y,
showPriceAsLabels,
halfOrderHeight,
horizontalLineWidth,
isDragging,
tradingSettings,
editableItemsPresented,
currency,
} = props;

const groupRef = useRef<HTMLDivElement>(null);
const [containerWidth, setContainerWidth] = useState(130);
useEffect(() => {
if (groupRef.current) {
setContainerWidth(groupRef.current.clientWidth);
}
});

const [topOrderStyles, topOrderAnimation] = useSpring(() => ({
config: {
duration: 50,
},
from: {
opacity: 1,
},
}));

const openGroupHandler = useCallback(() => {
if (!isDragging && !editableItemsPresented) {
changeGroupVisibility(id, true);
onGroupOpen && onGroupOpen();
topOrderAnimation({ opacity: 0 });
}
}, [changeGroupVisibility, id, onGroupOpen, topOrderAnimation, isDragging, editableItemsPresented]);

const closeGroupHandler = useCallback(() => {
changeGroupVisibility(id, false);
topOrderAnimation({ opacity: 1 });
}, [changeGroupVisibility, id, topOrderAnimation]);

useEffect(() => {
if (isDragging || editableItemsPresented) {
closeGroupHandler();
}
}, [isDragging, closeGroupHandler, editableItemsPresented]);

const isTradingItemVisible = useCallback(
(i: VisualTradingItem) =>
i.type === 'order' ? tradingSettings.showOrders : tradingSettings.showPositions,
[tradingSettings.showOrders, tradingSettings.showPositions],
);

const orderOnTop = useMemo(
() =>
pipe(
tradingItems,
array.filter(isTradingItemVisible),
head,
option.fold(
() => null,
order => order,
),
),
[tradingItems, isTradingItemVisible],
);

const groupTransition = useTransition(isOpened, {
config: {
duration: 150,
},
from: {
position: 'absolute' as const,
height: TRADING_ITEM_HEIGHT,
overflow: 'hidden',
top: -1,
right: 0,
},
update: { height: tradingItems.length * TRADING_ITEM_HEIGHT + 2, zIndex: 12 },
enter: { height: tradingItems.length * TRADING_ITEM_HEIGHT + 2, zIndex: 12 },
leave: { height: TRADING_ITEM_HEIGHT - 5 },
});

const render = orderOnTop ? (
<div style={{ width: `${containerWidth}px` }}>
<GroupOrderContainer
ref={groupRef}
y={y || 0}
onMouseEnter={openGroupHandler}
onMouseLeave={closeGroupHandler}
opened={isOpened}
disabled={orderOnTop.disabled}>
{groupTransition((styles, show) => {
return (
show && (
<animated.div style={styles}>
<GroupOrderGroupContainer>
{tradingItems.map(
o =>
isTradingItemVisible(o) &&
renderAltOrder(
o,
onSelect,
onClick,
onDblClick,
{
onCloseOrder: removeOrder,
onClosePosition: removePosition,
},
Boolean(showPriceAsLabels),
halfOrderHeight,
false,
onDragStart,
currency,
),
)}
</GroupOrderGroupContainer>
</animated.div>
)
);
})}
<animated.div style={topOrderStyles}>
{renderOrder(orderOnTop, Boolean(showPriceAsLabels), horizontalLineWidth, halfOrderHeight, currency)}
{renderFakeOrders(tradingItems.length, Boolean(orderOnTop.disabled))}
</animated.div>
{<OrderLineStyled x={'100%'} y={halfOrderHeight} width={horizontalLineWidth} />}
</GroupOrderContainer>
</div>
) : null;

return render;
});

and connect it like that:

export const OverridingGroupOrderComponent = () => {
const onApiCreated = (api: ChartReactAPI) => {
api.onChartCreated((_chartId, _chartInstance) => {});
};
const chartReactAppContainerProps = {};

return (
<>
<ChartReactAppContainer {...chartReactAppContainerProps}>
<div className={'chart-react-container'} />
</ChartReactAppContainer>
<FlexContainer justifyContent={'flex-start'}>
<ChartReactAppWrapper
customConfig={{
trading: {
enabled: true,
},
}}
dependencies={{ ...CREATE_MOCK_PROVIDERS(), onApiCreated }}
uiOverrides={{
trading: {
GroupOrder,
},
}}
/>
</FlexContainer>
</>
);
};

A: The customization of the DrawingsMenuElements can be done through uiOverrides.rightClickMenus. There is a helper function addCustomMenuElements which can be used for this purpose. In our documentation, we have full information and a code example which can be useful. https://devexperts.com/dxcharts/documentation-for-developers/dxcharts-react/Working-with-dxcharts-react-library/Configuration/Component-overriding/rc-menus#source-code

Q424: . How to get price information from drawing lines

Here is the changes to get access to drawingsComponent after click onSelect:

// this could be other way on your choice to transfer data to the menu item, just for example
const chartInstancesRef = useRef<Map<string, ChartWithModules>>(new Map());

const getDrawingsComponent = (chartId = '0') => {
const chartInstance = chartInstancesRef.current.get(chartId);
if (chartInstance) {
return chartInstance.drawings;
}
console.warn('Chart instance not ready yet');
return null;
};
const onApiCreated = (api: ChartReactAPI) => {
api.onChartCreated((chartId, chartInstance) => {
chartInstancesRef.current.set(chartId, chartInstance);
const drawingsComponent = chartInstance.drawings;
console.log('>>>>>>>>>>>>>>>>> ' + chartId, drawingsComponent);
});
};

const CustomBackgroundItem = () => {
return createElement(
MenuItem,
{
value: 'custom-bg',
onSelect: (a: unknown) => {
const drawingsComponent = getDrawingsComponent('0');
const drawings = drawingsComponent?.getDrawings();
if (drawingsComponent) {
console.log('on Select', { a, drawingsComponent, drawings });
}
},
},
createElement('span', null, 'Create signal'),
);
};

const customDrawingsMenuElements: DrawingsMenuElementDeclaration[] = [
createElement(CustomBackgroundItem),
'BringToFrontButton',
'SendToBackButton',
'MenuDivider',
'LockDrawingButton',
'HideDrawingButton',
];
const rightClickMenus = {
DrawingsMenuElements: customDrawingsMenuElements,
};
return createElement(ChartDemoAppWrapper, {
dependencies,
onApiCreated,
uiOverrides: { rightClickMenus },
});

A: yes, there is an example for top toolbar: https://devexperts.com/dxcharts/documentation-for-developers/dxcharts-react/Working-with-dxcharts-react-library/Configuration/Component-overriding/toolbar-component

and the same can be applied to other UI overrides, here is there overrides for all toolbars: top, side and footer:

Toolbar: { ToolbarButtons: Array<ToolbarButtonDeclaration>; ToolbarContainer: Element; ToolbarComponent: ComponentType<ChartToolbarProps>; CompareChartSuggest: ComponentType<CompareChartSuggestComponentProps>; }; DrawingsSidebar: { DrawingsSidebarComponent: ComponentType<OverrideProps<DrawingSidebarProps>>; DrawingsSidebarHeader: ComponentType<OverrideProps<DrawingsSidebarHeaderProps>>; DrawingsSidebarFooter: ComponentType<OverrideProps<DrawingsSidebarFooterProps>>; }; Footer: { FooterComponent: ComponentType<OverrideProps<ChartFooterProps>>; TimeZoneComponent: ComponentType<OverrideProps<TimeZoneDropdownProps>>; TimeframePresetsComponent: ComponentType<OverrideProps<TimeframePresetsProps>>; DrawingGroupsDropdown: ComponentType<OverrideProps<TimeframePresetsProps>>; SwitchAxisButtonsProps: ComponentType<OverrideProps<SwitchAxisButtonsProps>>; };

Q426: Is it possible to customize the candle shape (e.g., slightly rounded edges, etc.)?

A: You can use chart.chartComponent.registerDataSeriesTypeDrawer to change the candles drawing.

you can get access to certain chart via onApiCreated:

const onApiCreated = (api: ChartReactAPI) => { api.onChartCreated((chartId, chart) => { chart.chartComponent.registerDataSeriesTypeDrawer('candle', RoundedCandleDrawer); }); };

Q427: We also need support with adding indicators to the chart programmatically. We don’t mean custom indicators, but the existing built-in ones.

A: There is a way to do add indicators programmatically, to do so you need to:

Get the indicator template from DEFAULT_STUDIES_LIST
Convert parameter values to Option type format (required by current setStudies API, i hope it would change one day for more convenient signature of the object)
Call api.setStudies() in the onApiCreated callback

Step 1: Get Indicator Templates

First, import DEFAULT_STUDIES_LIST to access all available indicator definitions:

import { DEFAULT_STUDIES_LIST } from '@dx-private/dxchart5-react/dist/config/studies-list'; // Get all available indicators with their default parameters const allStudies = DEFAULT_STUDIES_LIST(); // Find a specific indicator template const smaTemplate = allStudies.find(s => s.id === 'SMA');

Step 2: Understanding the Option Type

The setStudies method expects parameters and lines in Option format from fp-ts library. You need to wrap values accordingly:

// Helper functions for Option type const some = <T>(value: T) => ({ _tag: 'Some' as const, value }); const none = { _tag: 'None' as const };

Step 3: Add Indicator on Application Start

Use the onApiCreated callback to add indicators when the chart is ready:

import { ChartReactAPI, TStudySettings } from '@dx-private/dxchart5-react'; import { DEFAULT_STUDIES_LIST } from '@dx-private/dxchart5-react/dist/config/studies-list'; // Helper functions for Option type (required by setStudies) const some = <T>(value: T) => ({ _tag: 'Some' as const, value }); const none = { _tag: 'None' as const }; const onApiCreated = (api: ChartReactAPI) => { // Get all available indicator templates const allStudies = DEFAULT_STUDIES_LIST(); // Find SMA template to use as a base const smaTemplate = allStudies.find(s => s.id === 'SMA'); if (!smaTemplate) { console.error('SMA indicator template not found'); return; } // Create SMA indicator with custom parameters // Note: setStudies requires Option type for parameters and lines const customSMA: TStudySettings = { id: 'SMA', uuid: 'custom-sma-' + Date.now(), // Unique identifier for this instance title: smaTemplate.title, type: 'dxStudy', overlaying: true, // true = overlay on price chart, false = separate pane categories: smaTemplate.categories, calculateFutureData: false, highLowActive: false, // Parameters with custom values (using Option type) parameters: [ { id: 'price', title: 'Price', studyParamType: 'PRICE_FIELD', value: some('CLOSE'), // Option<string> validation: none, // Option<validation> visible: some(true), // Option<boolean> }, { id: 'length', title: 'Length', studyParamType: 'INTEGER_RANGE', value: some(20), // Changed from default 9 to 20 validation: some({ min: some(1), max: none, precision: some(0), }), visible: some(true), }, { id: 'displace', title: 'Displace', studyParamType: 'INTEGER_RANGE', value: some(0), validation: some({ min: none, max: none, precision: some(0), }), visible: some(true), }, ], // Lines configuration (using Option type) lines: [ { title: some('SMA'), studyLineType: some('LINEAR'), thickness: some(2), // Changed from default 1 to 2 colors: some(['#FF0000']), // Changed from default '#FC00FC' to red visible: some(true), }, ], }; // Add the indicator to chart with id '0' api.setStudies([customSMA], '0'); };

and pass it to Chart Component:

Available Indicator IDs

You can find all available indicator IDs by importing DEFAULT_STUDIES_IDS:

import { DEFAULT_STUDIES_IDS } from '@dx-private/dxchart5-react/dist/config/studies-list'; // Examples: // DEFAULT_STUDIES_IDS.SMA // 'SMA' // DEFAULT_STUDIES_IDS.MACD // 'MACD' // DEFAULT_STUDIES_IDS.BollingerBands // 'BollingerBands' // DEFAULT_STUDIES_IDS.RelativeStrengthIndex // 'RelativeStrengthIndex' (RSI)

Q428: Do you officially support Next.js 16+ (incl. Turbopack dev)

A: Yes, both are supported

Q429: For Vite-based apps (TanStack Start), what’s the recommended setup and known limitations?

A: This limitation - https://devexperts.com/dxcharts/documentation-for-developers/dxcharts-react/Working-with-dxcharts-react-library/Configuration/Bundling#vite – was fixed in latest vite -> we created a custom Vite project and there is no issue in using web workers now.

A: All of them are safe, we have 3 levels of customisation – css layer (human readable classes), config (api level), uiOverrides (full control)

Q431: Are there any UI parts that are effectively non-overridable / library-owned or require styled-components overrides?

A: 90%+ are overridable. We haven’t had complaints about specific items that are not overridable, but if there is something that we’ve missed we can add support for it

Q432: Are there any UI parts that are effectively non-overridable / library-owned or require styled-components overrides?

A: 90%+ are overridable. We haven’t had complaints about specific items that are not overridable, but if there is something that we’ve missed we can add support for it

A: For chart-react we have API to change themes, instruments, studies, trading, even localization.

Reinitialization is needed when layout is changed to update all chart containers fully, you can see it if create a new layout in toolbar and switch between them

For config reinit is required

Also you can store some state in providers

Q434: For “modules / add-ons” (drawings, studies, chart types) can we build and register our own custom add-ons (custom drawings, custom indicators/studies, custom overlays, custom chart types), or are we limited to the built-in modules? If custom is supported, what extension API exists and what are the compatibility guarantees across versions?

A: Custom studies - yes (JS)

Custom drawings - no (only you own the source code)

Custom overlays - if you mean custom dataseries – yes

Q435: Candle data contract (REST history + WS (SSE) live updates)

Do you have a reference implementation for REST snapshot + WS (SSE) incremental candles in JSON?

A: Data provider page in docs has an example https://devexperts.com/dxcharts/documentation-for-developers/dxcharts-react/Working-with-dxcharts-react-library/Providers/chart-data-provider

Q436: Which fields are mandatory for candles (OHLCV + time), and which fields are optional but supported?

A: Mandatory fields are open, high and close

Q437: What’s the recommended approach for backfill, gaps (market closed), and reconciliation after reconnect?

A: In your scenario the recommended way is to use DXfeed data provider (which comes in the package) that considers these cases

Q438: Does DXcharts treat the last (in-progress) candle as mutable, while considering historical candles immutable?

A: Yep, It is possible to mutate last candle while keep historical once as is

Q439: In case of overlaps or late updates for the same candle timestamp, how does the engine resolve conflicts (overwrite vs merge vs ignore)?

A: DXfeed provider has “disconnect”, “reconnect“, “setData” and “updateData” functions that are responsible for resolving conflicts

Q440: When candle data is revised (e.g. last candle updates or post-reconnect reconciliation), are indicators and studies automatically recalculated, or is this responsibility pushed to the data provider layer?

A: Studies are automatically recalculated when/if candles data is changed

Q441: Web Workers usage & requirements: Which subsystems run in workers (studies, aggregation, rendering)? Are workers optional in production, and what changes (if anything) when disableWorkers=true?

A: Webworkers are used for studies calculations and loading of timezones(bottom left) because they need heavier calculations.

If disableWorkers:true, it will use our sync studies provider instead of async and studies calcualtions will be in the main thread (same for timezones)

Q442: CSP + Workers: What is the minimal CSP configuration needed for workers in your default setup?

A: Our default setup is: add_header Content-Security-Policy "default-src 'self'; img-src 'self' blob: data:; font-src 'self' https://fonts.gstatic.com data:; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-eval'" always;

A: the number of charts is the performance bottleneck, you can add 10 studies to one chart and it could be more heavy than 8 empty charts. In general sharing resources should be done, at least for data, subscriptions Map, which we use in demo is a good practice

Q444: Lazy-loading history: How exactly does historical lazy loading work (trigger conditions, request shape, how the library merges returned data), and what’s the recommended implementation to avoid duplicate loads and jank?

A: It depends on chart data provider implementation, in our demo we always fetch all possible candles (for example, 8000), but visually show only first 1000, lazy loading config determines the initial amount and chunks which will load, but for our demo it's purely visual, you can implement your provider in a way that will trigger lazy loading with the actual new fetched data

Q445: Caching / performance hooks: Do you provide internal caching or performance knobs (render throttling, partial updates), and what are your recommended “best-effort” settings for smooth rendering under load?

A: All caching and other performance tweaks should be done in provider, we do have a map and cache for subscriptions, so if a several charts have the same instrument it will only required to fetch candles for it once, not more, or, if some instrument was already loaded, going back to it will instantly show it's data, no need for an additional fetch

Q446: High-frequency data buffering/batching: Does the library have built-in buffering/batching for high-frequency updates (e.g., accumulating multiple updates before triggering a render cycle), or should we implement batching/throttling in our data provider layer?

A: Yes, probably on provider layer. In DXfeed's dxLink there is a config which can set how frequently updates should come, chart just watches for these updates

Q447: Recommended max candle count per chart: What is the recommended maximum number of candles kept in memory per chart, and what happens if we exceed it (automatic eviction, degradation, errors)?

A: There are no recommendations in place since we haven't encountered or been reported any issues related to that

Q448: Memory footprint scaling: What’s the approximate per-chart memory footprint, and how does it scale with candle count, active studies, and drawings? Especially rendering multiple charts.

A: We don't collect this information right now

Q449: Long-session behavior (8h+): Do you have guidance or known patterns for memory growth/leaks over long-running sessions (8+ hours) and recommended cleanup/teardown practices when switching symbols/layouts?

A: We don't do this for our demo platform purposes. But our recommendation is to take a look at LRU Cache.

Q450: Rendering/invalidation strategy: What is the canvas invalidation/redraw strategy—full-canvas repaint or dirty-region based—and are there known scenarios that cause excessive repaint/layout thrashing we should avoid?

A: We have several canvases (can be inspected in dev-tools), and each of them redraws only when some entities related to it is updated, for example, label update only redraws the label related canvas, we don't have dirty-region optimization, but multiple canvases can be considered as a working alternative.

Q451: How is DXcharts versioning handled—do you follow SemVer (and what counts as a breaking change)? How are release notes and migration guidance published per version?

A: For breaking changes we actually have a section called migration guide in our docs https://devexperts.com/dxcharts/documentation-for-developers/Migration-guide where we inform clients of potential issues

We follow Semver with the exception of “Major” version – meaning that we can potentially have “breaking changes” in a minor version (never in patch) but we inform clients beforehand through email + update our migration guide.

Release notes are sent to clients with each release.

Q452: Are we allowed/able to modify the DXcharts codebase itself (e.g., patch a bug, add a missing hook) and ship that in production? If yes, under which commercial model (source access, escrow, IP ownership options) and what does the workflow look like (forking vs vendor-provided patch builds vs “customer patch queue”)?

A: It depends on the license agreed on. In general you submit a support request to our product and we review it. If it’s a bug that’s affecting the library we prioritize and fix it. If it’s a missing functionality/feature we might be able to introduce it in the future at some point.

If you would like to have full control over the whole product then you would need to go with the source code approach

Q453: For ZIP and Nexus approaches are there any differences in terms of version management and updating? Which one would you suggest?

A: Normally we sent packages via zip to clients under specific licensing conditions.

A: export type PartialTimeframePresetsConfigMode = 'full' | 'default' | 'none';

A: Dealing with compare icon is much easier via config which is similar between library and widget so you can fully rely on this doc: https://devexperts.com/dxcharts/documentation-for-developers/dxcharts-react/Working-with-dxcharts-react-library/Ways-to-customize/Config-override/

Here is the code sample for you that will hide compare and snapshot:

dependencies: {
    chartReactConfig: {
      toolbar: {
        enabled: true,
        buttons: {
          snapshot: { enabled: false },
          compareChart: { enabled: false },
        },
      },
    },
  },

Q456: Occasionally, we need to jump back in time and have successfully used the `removeDataFrom` function to do so. However, after removing the excess candles, the chart position is not ideal. It would be extremely helpful to have a way to move the last remaining candle to a given position on the x-axis of the chart without resetting the zoom level, as preserving the current zoom is crucial for a smooth user experience.

A: After removeDataFrom is used you can use chart API function called moveXStart, which preserves zoom and creates a proper scale. It only moves the X scale without changing the zoom level, plus it respects the minCandlesOffset config.

Example of usage:

const dataPoints = chart.chartModel.mainCandleSeries.dataPoints;

chart.data.removeDataFrom(dataPoints[dataPoints.length - 30].timestamp);

const lastCandle = chart.chartModel.getLastVisualCandle();
if (lastCandle) {
    const chartWidth = chart.scale.getBounds().width;
    const currentZoom = chart.scale.zoomX;
    const offsets = chart.scale.getOffsets();

    const xEnd = lastCandle.startUnit + lastCandle.width + offsets.right;
    const xStart = xEnd - (chartWidth * currentZoom);

    chart.scale.moveXStart(xStart);
}

You can also modify the logic of xStart variable to set X scale wherever you want.

A: Toolbar:

There is an example for top toolbar: https://devexperts.com/dxcharts/documentation-for-developers/dxcharts-react/Working-with-dxcharts-react-library/Configuration/Component-overriding/toolbar-component

And the same can be applied to other UI overrides, here are the overrides for all toolbars: top, side and footer:

Toolbar: {
    ToolbarButtons: Array<ToolbarButtonDeclaration>;
    ToolbarContainer: Element;
    ToolbarComponent: ComponentType<ChartToolbarProps>;
    CompareChartSuggest: ComponentType<CompareChartSuggestComponentProps>;
};
DrawingsSidebar: {
    DrawingsSidebarComponent: ComponentType<OverrideProps<DrawingSidebarProps>>;
    DrawingsSidebarHeader: ComponentType<OverrideProps<DrawingsSidebarHeaderProps>>;
    DrawingsSidebarFooter: ComponentType<OverrideProps<DrawingsSidebarFooterProps>>;
};
Footer: {
    FooterComponent: ComponentType<OverrideProps<ChartFooterProps>>;
    TimeZoneComponent: ComponentType<OverrideProps<TimeZoneDropdownProps>>;
    TimeframePresetsComponent: ComponentType<OverrideProps<TimeframePresetsProps>>;
    DrawingGroupsDropdown: ComponentType<OverrideProps<TimeframePresetsProps>>;
    SwitchAxisButtonsProps: ComponentType<OverrideProps<SwitchAxisButtonsProps>>;
};

Candle shapes:

You can use chart.chartComponent.registerDataSeriesTypeDrawer to change the candles drawing.

const RoundedCandleDrawer = {
  config: chart.config.components.chart,

  draw(ctx, points, model, hitTestDrawerConfig) {
    if (!model.colors?.candleTheme) return;

    const visualCandles = points.flat();
    ctx.lineWidth = this.config.candleLineWidth || 1;

    for (const visualCandle of visualCandles) {
      this.drawRoundedCandle(ctx, hitTestDrawerConfig, model, visualCandle);
    }
  },

  drawRoundedCandle(ctx, hitTestDrawerConfig, candleSeries, visualCandle) {
    const { candleTheme, activeCandleTheme } = candleSeries.colors;
    const direction = visualCandle.name;
    const currentCandleTheme = visualCandle.isActive ? activeCandleTheme : candleTheme;

    const baseX = candleSeries.view.toX(visualCandle.startUnit);
    const width = candleSeries.view.xPixels(visualCandle.width);
    const bodyH = visualCandle.bodyHeight(candleSeries.view);

    const [lineStart, bodyStart, _bodyEnd, _lineEnd] = visualCandle.yBodyKeyPoints(candleSeries.view);
    const bodyEnd = bodyStart === _bodyEnd ? bodyStart + 1 : _bodyEnd;
    const lineEnd = lineStart === _lineEnd ? lineStart + 1 : _lineEnd;

    const candleColor = currentCandleTheme[`${direction}Color`];
    const wickColor = direction === 'none' ? candleColor : currentCandleTheme[`${direction}WickColor`];

    // Drawing a wick
    if (this.config.showWicks) {
      ctx.strokeStyle = hitTestDrawerConfig.color || wickColor;
      ctx.beginPath();
      const wickX = visualCandle.x(candleSeries.view);
      ctx.moveTo(wickX, lineStart);
      ctx.lineTo(wickX, bodyStart);
      ctx.moveTo(wickX, bodyEnd);
      ctx.lineTo(wickX, lineEnd);
      ctx.stroke();
    }

    // Padding
    const paddingPercent = this.config.candlePaddingPercent || 0.25;
    const paddingWidthOffset = Math.max((width * paddingPercent) / 2, 1);
    const paddingBaseX = baseX + paddingWidthOffset;
    const paddingWidth = width - paddingWidthOffset * 2;

    // Rounding radius (adapts to the width of the candle)
    const radius = Math.min(paddingWidth / 4, Math.abs(bodyH) / 4, 5);

    // Draw the candle body with rounded corners
    ctx.fillStyle = hitTestDrawerConfig.color || candleColor;
    ctx.beginPath();

    if (ctx.roundRect && radius > 0 && paddingWidth >= 4) {
      ctx.roundRect(paddingBaseX, bodyStart, paddingWidth, bodyH, radius);
    } else {
      ctx.rect(paddingBaseX, bodyStart, paddingWidth, bodyH);
    }

    ctx.fill();

    // Border (optional)
    if (this.config.showCandlesBorder) {
      ctx.strokeStyle = hitTestDrawerConfig.color || wickColor;
      ctx.stroke();
    }
  }
};

chart.chartComponent.registerDataSeriesTypeDrawer('candle', RoundedCandleDrawer);

// then you probably would need to fireDraw() to apply changes
chart.mainCanvasModel.fireDraw();

You can get access to certain chart via onApiCreated:

const onApiCreated = (api: ChartReactAPI) => {
    api.onChartCreated((chartId, chart) => {
        chart.chartComponent.registerDataSeriesTypeDrawer('candle', RoundedCandleDrawer);
    });
};

Q458: How to get access to drawingsComponent after click?

A: Here is the changes to get access to drawingsComponent after click onSelect:

// this could be other way on your choice to transfer data to the menu item, just for example
const chartInstancesRef = useRef<Map<string, ChartWithModules>>(new Map());

const getDrawingsComponent = (chartId = '0') => {
    const chartInstance = chartInstancesRef.current.get(chartId);
    if (chartInstance) {
        return chartInstance.drawings;
    }
    console.warn('Chart instance not ready yet');
    return null;
};

const onApiCreated = (api: ChartReactAPI) => {
    api.onChartCreated((chartId, chartInstance) => {
        chartInstancesRef.current.set(chartId, chartInstance);
        const drawingsComponent = chartInstance.drawings;
        console.log('>>>>>>>>>>>>>>>>> ' + chartId, drawingsComponent);
    });
};

const CustomBackgroundItem = () => {
    return createElement(
        MenuItem,
        {
            value: 'custom-bg',
            onSelect: (a: unknown) => {
                const drawingsComponent = getDrawingsComponent('0');
                const drawings = drawingsComponent?.getDrawings();
                if (drawingsComponent) {
                    console.log('on Select', { a, drawingsComponent, drawings });
                }
            },
        },
        createElement('span', null, 'Create signal'),
    );
};

const customDrawingsMenuElements: DrawingsMenuElementDeclaration[] = [
    createElement(CustomBackgroundItem),
    'BringToFrontButton',
    'SendToBackButton',
    'MenuDivider',
    'LockDrawingButton',
    'HideDrawingButton',
];

const rightClickMenus = {
    DrawingsMenuElements: customDrawingsMenuElements,
};

return createElement(ChartDemoAppWrapper, {
    dependencies,
    onApiCreated,
    uiOverrides: { rightClickMenus },
});

Q459: We also need support with adding indicators to the chart programmatically. We don't mean custom indicators, but the existing built-in ones. What we want is an API/function where we can pass indicator parameters (e.g., period, source, etc.), have the indicator added via your indicator module, and then rendered on the chart. We couldn't find documentation for this in your docs.

A: There is a way to add indicators programmatically, to do so you need to:

Get the indicator template from DEFAULT_STUDIES_LIST
Convert parameter values to Option type format (required by current setStudies API)
Call api.setStudies() in the onApiCreated callback

Step 1: Get Indicator Templates

First, import DEFAULT_STUDIES_LIST to access all available indicator definitions:

import { DEFAULT_STUDIES_LIST } from '@dx-private/dxchart5-react/dist/config/studies-list';

// Get all available indicators with their default parameters
const allStudies = DEFAULT_STUDIES_LIST();

// Find a specific indicator template
const smaTemplate = allStudies.find(s => s.id === 'SMA');

Step 2: Understanding the Option Type

The setStudies method expects parameters and lines in Option format from fp-ts library. You need to wrap values accordingly:

// Helper functions for Option type
const some = <T>(value: T) => ({ _tag: 'Some' as const, value });
const none = { _tag: 'None' as const };

Step 3: Add Indicator on Application Start

Use the onApiCreated callback to add indicators when the chart is ready:

import { ChartReactAPI, TStudySettings } from '@dx-private/dxchart5-react';
import { DEFAULT_STUDIES_LIST } from '@dx-private/dxchart5-react/dist/config/studies-list';

// Helper functions for Option type (required by setStudies)
const some = <T>(value: T) => ({ _tag: 'Some' as const, value });
const none = { _tag: 'None' as const };

const onApiCreated = (api: ChartReactAPI) => {
  // Get all available indicator templates
  const allStudies = DEFAULT_STUDIES_LIST();

  // Find SMA template to use as a base
  const smaTemplate = allStudies.find(s => s.id === 'SMA');

  if (!smaTemplate) {
    console.error('SMA indicator template not found');
    return;
  }

  // Create SMA indicator with custom parameters
  const customSMA: TStudySettings = {
    id: 'SMA',
    uuid: 'custom-sma-' + Date.now(),
    title: smaTemplate.title,
    type: 'dxStudy',
    overlaying: true,
    categories: smaTemplate.categories,
    calculateFutureData: false,
    highLowActive: false,

    // Parameters with custom values (using Option type)
    parameters: [
      {
        id: 'price',
        title: 'Price',
        studyParamType: 'PRICE_FIELD',
        value: some('CLOSE'),
        validation: none,
        visible: some(true),
      },
      {
        id: 'length',
        title: 'Length',
        studyParamType: 'INTEGER_RANGE',
        value: some(20),
        validation: some({
          min: some(1),
          max: none,
          precision: some(0),
        }),
        visible: some(true),
      },
      {
        id: 'displace',
        title: 'Displace',
        studyParamType: 'INTEGER_RANGE',
        value: some(0),
        validation: some({
          min: none,
          max: none,
          precision: some(0),
        }),
        visible: some(true),
      },
    ],

    // Lines configuration (using Option type)
    lines: [
      {
        title: some('SMA'),
        studyLineType: some('LINEAR'),
        thickness: some(2),
        colors: some(['#FF0000']),
        visible: some(true),
      },
    ],
  };

  // Add the indicator to chart with id '0'
  api.setStudies([customSMA], '0');
};

And pass it to Chart Component:

<ChartReactApp
  // ... other props
  onApiCreated={onApiCreated}
/>

Available Indicator IDs

You can find all available indicator IDs by importing DEFAULT_STUDIES_IDS:

import { DEFAULT_STUDIES_IDS } from '@dx-private/dxchart5-react/dist/config/studies-list';

// Examples:
// DEFAULT_STUDIES_IDS.SMA
// DEFAULT_STUDIES_IDS.MACD
// DEFAULT_STUDIES_IDS.BollingerBands
// DEFAULT_STUDIES_IDS.RelativeStrengthIndex (RSI)

Q460: We are only using the parameters required for the corresponding indicator. What would be another reason for this? We can successfully show those studies (indicators) in the added list; there is no problem with that. The problem is visualization, and we cannot add default indicators (from the UI) to this list when we automatically add those indicators. Could you please further explain how to implement this feature?

A: Fixed issues with indicators not showing: added missing parameters for RSI indicators in myIndicators, fixed logic of modifying parameters and lines for studies in createDynamicStudyConfig. Check StudyParameterType to see the correct values for studies parameters. Every study has its own parameters and lines. If some parameter or line is omitted it will cause issues with displaying the indicator on the chart.

Important: parameters and lines properties must match for every indicator.

/*
  Not every indicator has one line. Lines need to match for every indicator to avoid issues.
  Easiest way is to modify lines in place to prevent missing something.
  Or construct them separately but need to be careful and pass the correct lines.
*/
lines = baseTemplate.lines.map(line => ({
  ...line,
  colors: some([getRandomColor()]),
  studyLineType: some('LINEAR'),
  thickness: some(2),
}));

Fixed drawing creation by using drawings.setDrawing and adding coordinates for second point for lines (usually all drawings consist of more than one point).

Important: drawings may not appear if their points are not in the range of the provided aggregation period. In other words, the timestamp property must be somewhere between the first and last candle on the chart.

One last advice: use stricter TypeScript for easier interaction with the library. It may prevent some mistakes during development. And check the console for warnings/errors when something is not working correctly. Often there would be some useful information (e.g., missing parameter for indicator).

A: We've investigated the case and there are a few conclusions:

You used initialChartConfig - some of the configurations inside became the "DEFAULT" ones.
We have optimized the layout by deleting fields inside of the layout that are the same as the "DEFAULT" ones.
modifyLayout changes the fields scale.auto and trading to their "DEFAULT" values. In other words - it does remove them from the layout, which is correct behaviour given that they are the "DEFAULT" values.
In your layout, the volumes property is set to \{ visible: false \} which differs from our default value. However, in your initialChartConfig, the volumes property is also set to \{ visible: false \} meaning volumes are already disabled by default. As a result, when the layout is processed, all fields match their default values and therefore do not need to be saved. That is why you end up with empty objects - since everything matches the defaults, saving those values would be unnecessary and would only waste space.

Q462: We installed the latest chart build, 5.17.1. We now get the following error message when attempting to change the symbol.

A: It could be that because we deprecated some orders and positions functions signatures (observeOrders, observePositions and observeExecutedOrders) and now they require changes in Orders and Positions providers. After symbol change they will be called. And if they are missing it's possible to result in this error.

Here is more information in docs: https://devexperts.com/dxcharts/documentation-for-developers/Migration-guide#orderprovider-and-positionprovider-interface-changes

It's basically that instead of void they need to return a function for unsubscription. The only thing you need to do is to return () => \{\} in the end of the function.

Q1: Is DxCharts-react compatible with React 18?
Q2: Is DxCharts-react compatible with React 19?
Q3: Are styled components a hard dependency for overriding styles in the chart?
Q4: Can you override the left sidebar component? If we want to remove certain drawing tools, or create a custom sidebar component with a hierarchy of groups
Q5: Can you remove or override the trading components? E.g. hide the buy/sell buttons on display info
Q6: do you know which data point that the % scale on DXCharts benchmarks against? The 0% line usually intersects the first candle on the chart but not always at an : open, low, high, or close value. See the image below.
Q7: Can you disable the right click menu? Either on the Y Axis or on the chart. Can we override this menu's selections?
Q8: What's DXcharts size in KB?
Q9: How easy to replace current charting solution
Q10: Who does the integrations
Q11: How do you trade from the charts? Which type of orders are supported?
Q12: If there is an issue who can fix it? How fast? How many people work on the team?
Q13: Can you give us grace period for integrations
Q14: Who is using it already?
Q15: Are there any major differences between the libraries we're using for the free trial and the libraries we would use if we decide to move forward on a paid subscription? I'd like to know if we're going to have to redo some of the development work after the free trial or if it's a smooth transition to go live
Q16: We want to align the Y Axis of custom data in a separate pane (a horizontal bar chart) with the Y Axis of our main DXChart
Q17: I just want to know if I have to draw a vertical line at a specific time, or you can simply say that I want to know the x position at the specific time. How can I calculate that?
Q18: Why are my drawn lines partially erased when the graph is rendered? Am I drawing the lines on the wrong canvas?
Q19: RoundingY-AxisLabelValues: Currently, the Y-axis label values are displayed with up to two decimal places. However, I need them to be rounded to up to five decimal places. Could you please advise on how I can achieve this customization?
Q20: Setting Margin-Top for Legend: I am wondering if there is a way to adjust the margin-top for the legends that are displayed in the top-left corner of the chart. I would like to customize their position, and any insights on how to achieve this would be greatly appreciated.
Q21: Rounding Y-Axis Label Values: Currently, the Y-axis label values are displayed with up to two decimal places. However, I need them to be rounded to up to five decimal places. Could you please advise on how I can achieve this customization?
Q22: Can I use Vite as a bundler?
Q23: How to create custom indicators?
Q24: Do you have roadmap?
Q25: Are there heat maps in DXchart.
Q26: How secure DXcharts is?
Q27: Are there external dependencies?
Q28: Is there a dummy market data in the chart? is there a way to see how it works?
Q29: How to install library?
Q30: How to add custom drawings?
Q31: Could you please provide detailed steps or documentation on how to effectively insert source data?
Q32: I am interested in creating a custom graph(indicator). Could you share the necessary steps or resources to guide me through the process?
Q33: After successfully creating a custom graph(indicator), I would like to understand how to create an API for it. Furthermore, could you provide guidance on integrating this API with the chart for seamless functionality?
Q34: Is it possible to create an overlay custom chart, and if so, what are the recommended steps or considerations in achieving this?
Q35: In cases where we are using the dxChart library, but do not have access to the source code, how can we integrate a custom API? Could you provide insights or best practices to achieve this integration?
Q36: What is the data ingestion framework for streaming quotes data into the dxCharts components? For better understanding, can you please explain the process flow.
Q37: For technical indicators if we plan to utilize ML-driven methods, how would we integrate the same with the UI?
Q38: How can integrate news that we would receive via another API to library’s event component in a way that the hover component is created automatically as soon as the news is received?
Q39: What's the difference between library and widget (referred to lack of trading capabilities)
Q40: Which of DXcharts solution better for TV
Q41: What if I am looking for data provided along with charts?
Q42: About x-axis: We have a lot of chart, some chart X-axis is time-base, but some x-axis data is from other different thing.
Q43: About jest configuration: I still didn’t understand how to configure jest to support es2020. Could you provide a whole “Hello Word”project with “vue2+dxchart.lib+jest”
Q44: About the multiple chart? I don’t want to add a new series via UI select, I want show the two series on first render.
Q45: Do you have a full demo integrate dxchart and vue? I encounter some error when I am run unit test and build my project
Q46: Are you support a api which can let us fetch the new data when I drag the chart to the left side?
Q47: How to pass the other graphic data structures in addition to candles. I have creare a chartDataProvider in our project, but I don’t know what data structures should be resolve by requestHistoryData.
Q48: How to display four decimal places on the y-axis.
Q49: didn’t see the complete configuration of initialChartConfig in the chart-with-modules.config.d.ts file.
Q50: How to intergra the Mandatory providers in createChart.
Q51: How to control the y-axis and x-axis range in my code? The library default show is the figure 1 below, and I want to show is Figure 2 below looks like
Q52: I have implement a ‘SymbolSuggestProvider’, but I still don’t know how to write ‘priceIncrements’, what is [0,0001, 1, 1] means? It is not work for our data.
Q53: How to pass multiple data for custom provider? The demo just has one data. I want to show two candlesticks in one chart
Q54: In the chart, how could we zoom in out with x-axis and y-axis at the same time.
Q55: How to disabled the share button.
Q56: Are there any api sending out data out of the library?
Q57: How to implement multiple data in the one chart. (in the example, showing candlestick and histogram)
Q58: I have tried to figure out how to set the specified xAxis or yAxis range/scale during initialization but cannot find relevant configuration.
Q59: We applied the settings from the document https://devexperts.com/dxcharts/documentation-for-developers/dxcharts-lite/X%20Axis but found that the display looked strange and didn't follow what the documentation defined it would. What we want to achieve is to display all the data when the chart is first displayed. In addition to this, we want the Xscale gaps to be even.
Q60: We cannot see complete configurations in the document, which is very troublesome for us to use. Can the document show the complete configuration? I highlighted one of these cases in below screenshot.https://devexperts.com/dxcharts/documentation-for-developers/dxcharts-react/API%20Reference%20-%20Configuration. We can understand the attributes of APIs through the definition of TS, but even if we know what attributes this method requires, we don't know what it is used for. Some attribute definitions are not very clear, which also take us time to figure out what they are used for.
Q61: Upon unzipping the files, I attempted to execute "npm install," at which point I was prompted to sign in to GitHub. However, when I tried to sign in using my email address kannan.ganesan@rksv.in, I encountered a "permission denied" error message. Kindly review the attached screenshot and provide assistance as necessary.
Q62: upon attempting to launch the app, I encountered an error from Firebase stating index.esm2017.js:561 Uncaught FirebaseError: Firebase: Firebase App named '[DEFAULT]' already exists with different options or config (app/duplicate-app). Please refer to the attached image for further details and provide any suggestions you may have.
Q63: Additionally, do you have a sample React app that includes integrated charts with examples demonstrating all the APIs and methods? If so, could you please share those as well? It would greatly assist us in the integration process.
Q64: Is there a method to determine whether the requestHistoryData function is invoked for the initial data request for a symbol? The reason for this inquiry is that we utilize two distinct APIs to retrieve current day and historical data. Simply providing the 'from' and 'to' times doesn't suffice for our needs.
Q65: How can we ensure that the charts are reloaded when the internet connection is lost and then restored? We anticipate that the charts should retrieve historical data and resubscribe once the internet connection is reestablished. Could you please advise us on how to accomplish this.
Q66: The requestHistoryData function isn't providing the expected parameters
Q67: How do we configure sessions for different segments?, How do we pass special holidays and handle special trading sessions?
Q68: How do we configure price precision for different segments?
Q69: How do we display search results on symbol search?
Q70: Do we need to code anything to save indicator templates?
Q71: Inserting Source Data into Graph: Could you please provide detailed steps or documentation on how to effectively insert source data into a graph using [name of the tool or library]?
Q72: Creating a Custom Graph. I am interested in creating a custom graph(indicator). Could you share the necessary steps or resources to guide me through the process?
Q73: Is it possible to create an overlay custom chart, and if so, what are the recommended steps or considerations in achieving this?
Q74: data ingestion framework : What is the data ingestion framework for streaming quotes data into the dxCharts components? For better understanding, can you please explain the process flow.
Q75: Technical indicators & signals: For technical indicators if we plan to utilize ML-driven methods, how would we integrate the same with the UI?
Q76: How can integrate news that we would receive via another API to library’s event component in a way that the hover component is created automatically as soon as the news is received.
Q77: Can your component be used with Electron + NextJs (React) environment?
Q78: can you provide example code for integrating your component with Next.js or React?
Q79: In the demo of the component your company provides, there is an indicator search and add dialogue box; Can we add our custom-made indicators to this dialogue?
Q80: Can we add and display the properties of our custom-made indicators in the indicator properties dialogue box?
Q81: TradingView has a drawing tool called "Date and price range"; do you offer a similar feature?
Q82: Can the button placement or caption of the drawing tools be changed?
Q83: Can we repeatedly display svg annotations (like arrows, circles, etc.) having tooltip text on the indicators lines or candle bars?
Q84: We would like to change the line color of specific indicators based on the reference value or direction. is this feature available?
Q85: Can we add a button for temporarily hiding or minimizing a specific indicator displayed on the chart?
Q86: We are conducting tests on the implementation of the DXCharts library. We have made progress in some areas, but we noticed some issues after integrating the SymbolSuggestProvider with our data provider. SymbolSuggestProvider:
Q87: Indicators: Regarding the indicators, selecting one does not generate the graph. It is unclear whether we need to pass specific data or perform some calculations. Nevertheless, we have successfully integrated our endpoint, which is the data provider, and made the requestHistoryData function work.
Q88: Is there any functionality in this version to divide one asset by another?
Q89: Does the interface support language change to Portuguese/pt-br?
Q90: the user conducted their technical analysis on the graph and wants to continue monitoring their markings in the following days. How can we proceed with this approach?
Q91: I am currently analyzing the mentioned topic. Do you have explanatory documentation on how to use the @dxfeed/dxlink-websocket-client? In the attached file, only the packages were provided, which makes it difficult to understand. We need to understand the best approach to capture real-time data. We have a data feeder directly connected to the exchange. The idea is to determine the best way to integrate our data feed with DXchart. I believe we will have an intermediate endpoint that can communicate with DXchart using WebSockets. This endpoint will be responsible for generating daily bars and continuing to send trades in real-time.
Q92: API to obtain the list of strings, but was unsuccessful. I am unsure if this functionality is available in the version I am using.
Q93: How to translate drawings legend and other chart core elements
Q94: How to translate X-axis
Q95: Visual Style Adjustments: We would like to ensure that the visual styles of the chart interface are consistent with the rest of our platform. Could you guide us on how we can make these customizations in the library?
Q96: Candle Visualization for Larger Periods: We noticed that when switching to larger aggregation periods, the candles appear large on the screen. Is there any configuration that allows the candles to automatically adjust according to the screen resolution to maintain a standardized view?
Q97: Is there a way to change price label colours?
Q98: I am facing an issue with the candle data generated by the WebSocket and would like to request your assistance. Historical data is being processed correctly, with dates and time zones adjusted by the interface as expected. However, the candle data received via WebSocket is not reflecting the time zone change by the interface.
Q99: It seems that the examples in the documentation assume that the install has been done via npm (as they use import...from..., etc.). Do you have documentation on how to use the library for vanilla usage where we're just using the two files from the zip and then creating the chart using DXChart.createWidget()? For a start, I note that if I write var widget = await DXChart.createWidget(document.getElementById('chart'), {}), I don’t get a reference to the chart; how can we get a reference to the chart in vanilla JS? And how, in general, can the examples be modified for use with vanilla JS?
Q100: Aside from the “How to use dxchart5-react with vanilla apps” page, I can’t see any other documentation on how to get started (with Configuration, Providers, etc.). The HTML file creates the chart successfully, but how can we get a reference to the API? There is only a react based app example.
Q101: Do you please have examples for how to provide Config and Providers in a vanilla app? (Please note again that we don’t use modules, TypeScript, Node, npm, etc.).
Q102: The requestHistoryData function does not seem to be providing the expected parameters - As per the DX team's explanation, the requestHistoryData method is invoked with either fromTime or toTime when the user scrolls to the right side of the chart. However, there appears to be a discrepancy in the symbols passed during the initial call to requestHistoryData and subsequent calls. Please refer to the attached video for clarification. While the symbol passed during the initial call seems correct, the symbols passed in subsequent calls are incorrect.
Q103: How do we display a different name on the chart instead of the symbol we pass to the chart? (about symbol search)
Q104: How do we determine classes for styled components? DXChart will investigate whether exploration of components can be enhanced.
Q105: Warning upon loading in the React app.
Q106: How do we enable crosshair and format labels on the x-axis? What configuration is required? (Meaning that they should be turned on by default when DXcharts is loaded first time
Q107: Are “dxcharts-react” and “dxcharts-react-widget” two separate products?
Q108: How do we display a different name on the chart instead of the symbol we pass to the chart?
Q109: Can we completely replace the Drawings Sidebar? We want to add our own custom UI elements to this DOM element and add custom menu options
Q110: Is it possible to override the bottom footer element? We want to add our own custom UI elements to this footer to adjust time intervals and add preset values and other controls.
Q111: Is it possible to implement our own UI for the Indicators/Studies menu? We want to use our own UI elements for adding/removing indicators and the parameter UI controls. It might be possible to implement a custom UI menu in the toolbar but it looks like the function addStudy is a private internal function
Q112: How can we change the animation of drawing the live candle updating? If we want to tweak the animation of how a candle is drawn when changing.
Q113: Is it possible to disable short selling in the Trading UI? Can we override the UI of the Trading Labels to use our own elements on the chart?
Q114: Is it possible to implement our own Drawings Settings Menu to add our own UI for parameters and remove parameters?
Q115: How can we override the style of the Y-Axis Labels? I only see rectangle/badge/plain as the options, is there further customization here? E.g. if we want to change the shape or font type/size
Q116: Can we implement our own Positions UI elements to display on the Chart?
Q117: A positive displace value for an indicator should push the indicator forward, but it's the opposite. Is it possible to modify how displace works in the indicators? Can you set a maximum and minimum on an indicator for the Y-Scale? For example, the RSI overbought and oversold levels have no upper or lower limit and negative values are possible.
Q118: Is it possible to prevent a user from scrolling past the left or right side of the chart? Sometimes a user can scroll past where the first candle is drawn and we want to prevent that.
Q119: Is it possible to modify the content inside the measure box/label box of a drawing? (Example: “-0.31 (-0.80%)”) We want to change this format and content. When we change the color of a drawing, the label on the X and Y axis does not change. How can we update the colors of the Y-Axis and X-Axis Label to be the same color
Q120: Is it possible for us to make the vertical crosshair snap to the middle of the candle when it moves?
Q121: Can we draw on the main canvas to add our own custom elements and interactions? Is this not recommended? If this is something we can do, is there a specific API function we should use to add elements?
Q122: I have integrated trading sessions providers as suggested. generateSessions method did not get called for me. please suggest.
Q123: Objective: Trigger drawing through functions provided by dxcharts api. Current Status: We have done the poc on triggering drawing functions through the method mentioned (attachDrawingsComponent) in the documentation.
Q124: Coding tools: Typecript5, FP-TS, React18, StyledComponents5, RxJS7
Q125: What testing suites would we receive with the purchase
Q126: What framework/dependencies/build process are used in the kotlin library?
Q127: What is causing the library to violate these Content-Security-Policies enforced by Electron apps? We had to turn this policy off temporarily to make the library work (screenshot attached)
Q128: if we want to write our custom InstrumentSuggestComponent, how do we get the data (instruments) from SymbolSuggestProvider? Seems like this data is available in MainInstrumentSelectorContainer, but we cannot override the container, just InstrumentSuggestComponent
Q129: We have our proprietary programming language that allows users to create their own indicators. Do DX charts allow users to create their own indicators?
Q130: We have approximately 10 more studies that the DX charts. What is the process for requesting new studies? Also can DXScript allows us to build all our own indicators?
Q131: If there are additional drawing tools we would like added, what is the process for requesting new drawing tools?
Q132: We allow to trade in the pre and post market. For example, from 8 am eastern to 9:30 eastern. How does a user turn the pre/post market bars on and off?
Q133: Do you have a mobile SDK or do we just use the same charting package? Is there another version that’s more properly formatted for a mobile screen?
Q134: We have a regulatory requirement to display the following quote/trade related information anywhere a client can place trades. Do we have the ability to add the following to the quote detail in the chart?
Q135: Does the library have limitations on the amount of datasets streaming on the chart.
Q136: How many different symbols can be loaded on the chart?
Q137: How many studies can be added to a chart?
Q138: Ability to plot one or more symbols on the same chart
Q139: Ability to create custom symbols to display on the charts ( Example (AAPL + GOOG)/2 )
Q140: Ability to display options price data on charts
Q141: Ability to send a chart & it's configuration to a new user, the new user will own the copy and be able to make changes
Q142: Ability to send a read-only version of a chart to a 3rd party user that when the owner makes changes it's reflected in the 3rd party view of the chart.
Q143: Ability to export and import chart settings. share chart settings with other users. sharing URL
Q144: Ability to import chart settings, studies, objects, etc
Q145: Are custom indicators supported client side or cloud based? build and run client side. ability to sync requires server side
Q146: Ability to view your custom studies on any chart instance?
Q147: Ability to create studies that create/control drawing objects on the chart
Q148: Ability to write studies using different programming languages and import into DX charts? natural language?
Q149: Ability to create/set/manage alerts with your custom studies & have them running while platform is offline
Q150: What is the process for requesting new indicators?
Q151: Can we have indicators renamed to other names?
Q152: If studies are created for TS, do all DX chart clients get the them?
Q153: Can we set alerts on drawing tools? Are they available if the platform is offline? This is for price/volume alerts
Q154: Activation Rules - can trades be generated based upon indicator triggers?
Q155: Ability to display open orders on chart
Q156: Ability to display filled orders on chart
Q157: Ability to create new single orders and TP/SL, prefably with estimated profit and loss shading visualization
Q158: Ability to cancel/replace the order via drag and drop
Q159: DX Offers market data and cloud running of the scripts/stratgies etc... -> we need to understand if we can use our own market data with the DX Cloud tools.
Q160: Do DX charts support data tables? display results of the indicator in a data table on the chart
Q161: Can back testing be done?
Q162: Does the mobile package include all the same functionality as the web based charting?
Q163: Does the library support accessibility standards (e.g., WCAG) to accommodate users with disabilities.
Q164: Localization capabilities, including support for multiple languages, date/time formats, price formats, enhance usability for global audiences.
Q165: Which operating systems does the library support? MAC, PC, Linux
Q166: Are there browser limitations?
Q167: Ability to save drawing tools settings (color, thickness, etc)
Q168: Set right margin and set vertical scaling
Q169: Automatic scaling (horizontal and vertical): Double click automatic scale, and set chart to automatic scaling default
Q170: Zoom in/out and reset
Q171: Smart scaling - as prices move off screen will the screen auto adjust to display
Q172: Ability to display correct formatting for futures - fractional and exotic
Q173: From my investigation, it looks like the createWidget() function’s “props” param is of type ChartReactWidgetProps, which doesn’t contain (itself or by extension) the uiOverrides property, and that is the reason we can’t get that working. It seems that the uiOverrides property is only available in the React version of the library, and not the widget. Am I correct? If so, is there some other way to specify UI Overrides to the DXChartWidget?
Q174: we've found this links in the library code. Our concern is, whether if some data would be send by that link or whether it would cause redirect issue.
Q175: If I run DXChart.destroy(), on a page with one chart it destroys that chart, but on a page with 2 charts it destroys only the second chart. Is this the expected behaviour?
Q176: I notice there are two places I where can obtain the api:
Q177: We are able to change the colors in the "Most important colors" and "Chart-core colors" palettes. However, we are not able to change the palettes under "Other colors" in our project. We are following the same structure that works for the others.
Q178: We are running into some issues while lazy loading our candlestick data. Our API takes 3 params -> from_time, to_time and intervalOn the initial chart load in the method requestHistoryData - the from_time comes as 0, this means that data will be fetched since the beginning of that instrument. This results in a high API response time and payload for us. Can we initially fetch data for a certain timeframe without us hardcoding the initial from_time? The ideal scenario would be - we only fetch the data that is required to render the candles in the initial viewport - and then lazily load the previous data as the user scrolls back. We could not find any such callback/method in the documentation for implementing this
Q179: concerning lazy loading, thank you for the detailed explanation about the internals! However, there is still some lack of understanding at our end. The issue with fromTime and toTime coming as undefined / 0 in most cases is that our api expects timestamps in the payload, according to which it fetches the candles within the timeframe provided. So to fetch the candles in the initial viewport, we need the latest timestamp, as well as the first timestamp corresponding to the leftmost candle in the viewport, which is where we are running into issues since the library is not giving us a fixed timestamp on initial load.How can we possibly pre-select a timeframe preset to get the fromTime and toTime timestamps?
Q180: For our UI implementation, we are disabling the sidebar used to trigger drawings, and enabling the same through our UI, which requires us to call the drawings module functions to enable the user to draw by clicking our UI. We are using the following code (taking path drawing as an example) -
Q181: Just to understand is there a feasibility to do our custom automatic drawings with the android/iOS sdk like web?
Q182: The requestHistoryData function does not seem to provide the expected parameters
Q183: Configuring an image as part of a custom button instead of text was discussed
Q184: The generateSessions method in the Trading session provider is not being called
Q185: Additionally, guidance is sought on the logic expected for the onInstrumentChanged method.
Q186: Requirements for displaying trading hours in the trading widget, including handling special trading sessions and holidays within Monday to Friday, were discussed.
Q187: dependencies.initialChartConfig: please see my comments there; it seemed like the items I needed to put in there are from the dxcharts-lite config section, and I couldn’t find any of that by following the TypeScript definitions as I had with all other sections of the config. Should this section follow the structure here: https://devexperts.com/dxcharts/documentation-for-developers/dxcharts-lite/Chart%20Config ?
Q188: Chart crashes when background colour is picked (whether the values are RGB or RGBA)
Q189: I see warning about URL, what should I do?
Q190: Please also let us know how we can hide the bottom bar which shows the timeframe selection and how we can change timeframe and intervals through code
Changing Period Through Code
Q191: Can I completely ignore the initialChartConfig section (and delete it from my config), given that we are using the React version (widget build) and not the lite version?
Q192: on web workers – our product is already a PWA and uses a service worker; as far as I’m aware, there is no environmental reason that standard web workers should not operate.
Q193: could you also let us know how to change the time frame of the graph? eg. 1D, 1W, 1M, 1Y etc
Q194: how can we hide this bottom bar which shows % and log?
Q195: Do we need to implement any provider specific to handle multi charts ?
Q196: I have a question regarding resetting the chart candles data when the symbol changes.When the instrument changes, I call the changeInstrument method on the chartReactAPI from my component.After changing the instrument, I also need to reset the chartCandlesData stored in the provider. I can't expose a new method like resetCandlesData directly to the provider due to potential type errors. This seems like a common scenario to me. Could you please advise on the ideal approach for handling this situation?
Q197: I have another question related to question 3 from my previous email about resetting chart candles data.When opening Multichart with 2 layouts containing the same symbol, the candles are plotted twice. I believe this is because they are the same symbols and candles data are merged. Candles are again duplicated if I change to one layout too. Please refer to the attached video. Kindly advise on how to manage this situation.I believe we need to reset the candle data for a symbol when the interval changes too. Please advise on how to handle these scenarios regarding resetting candle data.
Q198: Regarding the trading session provider, could you please provide a sample TradingSession object that I need to return in the generateSessions method for the following scenarios:
Q199: I am currently testing our requestHistoryData() implementation, and have noticed that options.fromTime is 0 and there is no options.toTime.
Q200: I have some test bars which display fine on our chart if I return Promise.resolve(arr). However, I need to be able to send the bars array to the chart at any time (and not just at the end of the requestHistoryData function), and that’s what I assume the updateCallback is for.
Q201: One other thing I’ve noticed is that when I scroll backwards in the chart, the library is not requesting further historic data. Should I expect the requestHistoryData() function to be called by the library to request previous historic data as I scroll?
Lazy Loading Mechanism
Example Implementation
Detailed Steps:
Documentation Links
Q202: The above clarification is for setting the initial timeframe presets if I'm not wrong – We need to select one of these presets through one of the callback functions - which is what we need to know, please help out here!
Q203: Is changing the font family of the chart feasible?
Example Implementation
Detailed Steps:
Documentation Links
Q204: On adding indicators, they are added to the viewport and the chart is shrunk. How can we avoid changing the height of the chart and add the indicators below the viewport?
Q205: Our backend currently supports data time frames of 1 minute, 30 minutes, and 1 day. For intervals like 15 minutes (which fall between 1 minute and 30 minutes), we would like the chart to use 1 minute data to plot candles for 15 minutes. We use requestHistoryData and subscription to provide 1 minute data, expecting the chart to aggregate this data for 15 minute candles. Could you please advise on how to configure this?
Q206: I would like to provide different loading states to the chart by using initialLoading property on the ChartReactAppConfig. From the typings below, I could not figure out how to configure these. Can you please provide an example on how to show our own loading states for symbol loading and candle loading etc.
Q207: I have reviewed the trading sessions attached in the previous email. I’m unsure how they are configured for Monday to Friday, as the JSON file only contains epoch timestamps which seem specific to particular days or weeks. Additionally, I am unsure how to incorporate special trading sessions on specific Saturdays or trading holidays on weekdays. On the Android DX build, we use the Schedule object to define days (Monday to Friday) and specify sessions for those days. Is there a similar configuration available for the web bundle?
Q208: To update the watermark, When I implement below code, the custom watermark I apply only appears briefly before reverting back to the default watermark on the charts. I am calling this method once api is created. Please review my code below and let me know how to update the watermark on initial load, change instruments, switch between layouts on multi charts etc. Please refer to the attached video for my current issue i am facing.
Q209: API methods like changeTheme do not work when uiOverrides dependencies are added to the chart. Without uiOverrides, methods such as changeTheme and changePeriod function as expected. Please review the code below and let me know if any adjustments are necessary:
Q210: We want to be able to change the timeframe through our UI. How can we achieve this if there is no callback function available for the same?
Q211: How can we find if an indicator on the chart is turned off/on? Ideally, on clicking the close button of an indicator on the chart, we want to find out which indicator is closed
Q212: Regarding the trading sessions provider, could you please be more specific? Does DX need timestamps for only the current and next trading day, or does it require additional days as well?
Q213: Price type settings the price type settings, I see four options: Last, Market, Bid, and Ask.
Q214: Bottom Nav Bar Interval Config: Our data feed doesn't support the 5-second timeframe
Q215: Is there a way to add validations to aggregation periods, like: 300 minutes for minutes, 24 hours for hours, 365 days for days, 54 weeks for weeks, 12 months for months, and 30 years for years.
Q216: Wanted to hide a few options on the settings tab. For example, we do not want to display the "Conference Calls" option in the Event settings. Please let me know if this is possible.
Q217: How can we set the Y axis bounds to keep the chart's Y scale within the stock's all time low and all time high values?
Q218: I am encountering an issue with the generateSessions method in the TradingSessions provider. I have configured the from and to options to span from the provided epoch time to 14+ days ahead. The timezone is set to 'Asia/Kolkata' using the getTimeZone method in the TradingSessions provider.
Q219: Wanted to hide a few options on the settings tab
Q220: How can I make Crosshair initialised by default in the default graph, so there wont be a need for users to manually set it.
Q221: How do I change the default color of the drawing line (by default it is yellow)?
Q222: how to lock Y-scale?
Q223: How can I subscribe to the event when DOM is fully rendered
Q224: How to limit max/min width of the chart?
Q225: How to remove "delete" icon from drawing toolbar
Q226: During runtime, we want to check if a particular candle at a timestamp is available/fetched, if the candle at that timestamp doesn't exist/hasn't been fetched yet, we want to fetch candles till that particular timestamp. Do you know how we can do this?
Q227: Aggregations / Calculations etc. on the most granular (tick level) data is done in the library or client browser/app?
Q228: Could you explain how I can pass WaterMark to the graph?
Q229: In runtime, how do we get the current aggregation period applied on the chart?
Q230: Is there any way to call requestHistoryData on runtime without it being called on it's own in the provider?
Q231: This is the documentation that we are using. https://devexperts.com/dxcharts/documentation-for-developers/About
Q232: We provide users the ability to set the default quantity and quantity step/increment by asset class. We will eventually allow users to set defaults by symbol.
Q233: On our current chart, if you have Orders or Positions off screen, there is an order flag/positions flag that points off screen. This lets the user know that they have open order and positions when they are off screen.
Q234: About the widget. I am trying to determine a reliable way of targeting elements so that I can customise them. Currently, I have hidden the control by CSS via a classname in its containing div:
Q235: I need some help understanding how extended hours, session breaks, and events work. Could you explain these concepts or provide a link with more information about them?
Q236: Is there a way to add title to the chart headline? Title should change depending on the chart type
Q237: is there a way to make symbol suggest input wider?
Q238: I'm working on implementing extended hours and have a few questions:
Q239: Is it possible to place orders through dxscript in an automated manner? If so, could you please provide some insights on how to achieve this?
Q240: Following up on a previous question, I wanted to hide certain options on the settings tab. For example, we don't want to display the "Conference Calls" option under Event settings. You mentioned that one approach would be to completely rewrite the content of the Events tab and retain only the options we need.
Q241: Our data feed provides only 1-minute, 30-minute, and 1-day data, and we aggregate these to generate all other intervals. For example, we use 1-minute data to create a 15-minute candle.
Q242: We would like to know if it's possible to change the "Learn More" link for "Indicators" as shown in the screenshot below. If it is feasible, could you please let us know where we can make this change?
Q243: All our chart data is in UTC. So, I would like to configure the chart to recognise this.
Q244: There are certain typings that I can only import from the folder provided by the DX team.
Q245: After a break in internet connection or server connection, I now send the chart a completely fresh set of data (so that there are no gaps), and to do this I call the updateCallback provided by requestHistoryData.
Q246: We need a callback after calling setDrawing function, for example we are using the following code: chartRef.current?.drawings.setDrawing(symbol, custConfig).
Q247: We are facing this issue while setting the viewport for a particular AI Driven pattern.
Q248: News bubbles are not customizable with an icon like the events are?
Q249: Multiple events on the same candle or a timestamp doesn't show multiple icons
Q250: Can we make events hovered line dashed? Also for the last price label line, can we make the line dashed?
Q251: Can we extend this list of supported events?
Q252: Can we customize buy/sell Icons using svg or other formats like event icons?
Q253: An extra call for the candles data is happening with the aggregation duration of 1 hour at requestHistoryData. There is no logic or code written for this particular call. What can be the issue? is it the default behaviour for a particular use case?
Q254: How can we set the default color for the color palette? currently that is set to yellow. Do we need to manually set the colors on whenever we need to call the drawing component?
Q255: My call to getLastVisualCandle() is now working and returning 1999 in my case, but there doesn’t appears to be a function chart.setXScale(). Please see below screenshot for further details.
Q256: About previous question "My call to getLastVisualCandle() is now working and returning 1999 in my case, but there doesn’t appears to be a function chart.setXScale().", the solution does not work on mobile (Samsung galaxy s9): It works in desktop mode, and in Chrome’s emulator for “Samsung Galaxy S8+” (I haven’t tried the other devices there). However, on my actual Samsung Galaxy S9, the chart does not move to the end – I still have to manually scroll it.
Q257: SpreadCO send volume data to chart for equities, indices and commodities, but not for forex.
Q258: Please would you advise how we can change the formatting of the positions PnL amount?
Q259: This is more a confirmation than a question:
Q260: I should be able to take care of saving the current frequency whenever it’s changed (using onPeriodChanged event to obtain the new AggregationPeriod) and restoring it using api.ChangePeriod() (although please advise if there is a different recommended way). Buy I currently don’t know how to query the chart for the current AggregationPeriod.
Q261: I do have one further question: Is there a way to know when a study has been added, or deleted, or a study’s config changed? I ask this because whenever such a thing happens, I need to re-save the current state to our server.
Q262: For observePositions(), I am calling its dataCallback and providing it with an array of Position obects to add to the chart. Am I expected to call dataCallback every time there is a change to the data in those positions, or should the charting library automatically pick up on changes to the data in the array initially provided?
Q263: Executed order is showing a triangle for the order, but when hovering over the triangle, no label/bubble appears (but a dot appears on the chart canvas where perhaps the label/bubble should be)
Q264: UpdateOrder() callback is not being called for take profit / stop loss amendments (i.e. after dragging)
Q265: Added take profit / stop loss orders remain on the chart even if our back-end has not confirmed these orders
Q266: Sometimes there are what seem to be z-index issues breaking interaction with position / order UI elements on the chart canvas, especially when there is more than one element (e.g. a position element, and an order element, or more than one position element)
Q267: Should there be a facility to edit / remove the existing stop loss / take profit of a position / order?
Q268: It’s possible to add several Take Profits / Stop Losses to an order – is this by design? And if so, should there be an amount associated with each one?
Q269: I am calling dataCallback whenever the PnL of a position changes, so that the position PnL updates on the chart in real time.
Q270: Would you please be able to advise how to default the amount fields to a value of our choosing?
Q271: I’d like to understand if trading from the chart supports partial exits. For example, if I buy 100 lots, can I set a take profit divided into multiple parts? Do you have a simulation environment available for testing?
Q272: What's the purpose of updateLayoutData function? Its not explained in the docs
Q273: Do you have an example of using the Layout Provider?
Q274: Executed order is showing a triangle for the order, but when hovering over the triangle, no label/bubble appears (but a dot appears on the chart canvas where perhaps the label/bubble should be).
Q275: updateOrder() callback is not being called for take profit/stop loss amendments (i.e., after dragging).
Q276: Added take profit/stop loss orders remain on the chart even if our back-end has not confirmed these orders.
Q277: Sometimes there seem to be z-index issues breaking interaction with position/order UI elements on the chart canvas, especially when there is more than one element (e.g., a position element and an order element, or more than one position element).
Q278: Should there be a facility to edit/remove the existing stop loss/take profit of a position/order?
Q279: It’s possible to add several Take Profits/Stop Losses to an order – is this by design? And if so, should there be an amount associated with each one?
Q280: I am calling dataCallback whenever the PnL of a position changes, so that the position PnL updates on the chart in real time. Is there any way to update the positions on the chart without it redrawing them like this?
Q281: When I make changes to the chart, I can see that LayoutProvider.updateLayout(chartLayoutWithId) is being called; in this function, I create a chartLayoutData object with a selectedLayoutId always set to “1” (as we only have one layout per instrument) and save it out to our back-end. Please can you tell me in what circumstances the updateLayoutData(ChartLayoutData) function is called by DXCharts, and how it differs from updateLayout()? Do I need to implement it for our use case?
Q282: I have noticed that getLayouts() is being called more than once (in quick succession) when I load a chart. Why does this happen?
Q283: How can we programmatically ask the charting library to load the layout for a new instrument when we change the instrument?
Q284: In the LayoutProvider implementation, when we open a chart for a particular instrument, we fetch a ChartLayoutData object from our back end containing only one layout (the default one). However, in our app's “quick-chart” mode, we change the market by calling chart.api.changeInstrument(newInstrument). How can we handle layouts for this scenario?
Q285: Added take profit/stop loss orders remain on the chart even if our back-end has not confirmed these orders. Why does this happen?
Q286: Is there a way to turn off the trade controls that display in the upper left of the chart? We would still want the user to be able to trade from the price axis.
Q287: Do you have the ability to hide orders and positions on the chart while still displaying the trade controls?
Q288: The current date format is DDMMYYYY. Do we have the ability to change this to MMDDYYYY?
Q289: Executed order shows a triangle but no label/bubble appears when hovering.
Q290: Z-index issues affecting interaction with position/order UI elements.
Q291: Can we hide orders and positions on the chart while keeping trade controls?
Q292: Callback for updateOrder() not triggered for take profit/stop loss amendments.
Q293: Added take profit/stop loss orders persist without back-end confirmation.
Q294: Facility to edit/remove existing stop loss/take profit orders.
Q295: I have noticed that when calling api.changeInstrument(newInstrument), the callback SymbolSuggestProvider.onInstrumentChanged() is not called. I was wondering if this is by design or not.
Q296: I see the following WARNING in . /d×/dstudies-esm/kotlin-kotlin-stdlib-js-ir.mjs
Q297: I have error related to "Cannot read properties of null (reading 'useMemo')"
Q298: I see an error from using npx create-react-app
Q299: Is there a way to off the trade controls that display in the upper left of the chart? We would still want the user to be able to trade from the price axis.
Q300: Do you have the ability to hide orders and positions on the chart while still displaying the trade controls?
Q301: The current date format is DDMMYYYY. Do we have the ability to change this to MMDDYYYY?
Q302: Original question: Executed order is showing a triangle for the order, but when hovering over the triangle, no label/bubble appears (but a dot appears on the chart canvas where perhaps the label/bubble should be)
Q303: Original question: Added take profit / stop loss orders remain on the chart even if our back end has not confirmed these orders
Q304: Original question:
Q305: Original question:
Q306: In our mini-chart, we have drop-down menus for Aggregation and Date Range, but we are not validating the combinations thereof, so the user is able to select invalid combinations. I'm noticing on the main chart component, the Date Range and Aggregation sliders only allow certain combinations - how can I get a map of the acceptable combinations?
Q307: Is there a way to change price label style?
Q308: When I add DXscript as a dependency to DXcharts it get stuck in an infinite loop
Q309: We’d like to be able to set our own text for interfaces and buttons on the chart, is this possible?
Q310: On your demo chart at https://devexperts.com/dxcharts-demo/, when I create or modify a Take Profit / Stop Loss order, the UI element shows and updates the price while dragging
Q311: how can I override the UI based on a different chart or chartId.
Q312: Getting an error while synchronizing the crosshair across multichart, other syncs are working. Attached screenshot for your reference. Please help us resolve this issue.
Q313: We are facing an issue with trend line and other drawing interaction on mobile apps where the taps get drawn on the same point resulting in a point size (hardly visible) drawing.
Q314: We tried adding a layout provider which Denis recommended, but still the dxscript code is not running properly, although the infinite loop is not happening now after this change.
Q315: #2 issue, not related to the one below (we were trying to reproduce it, but without any success).
Q316: 1. Is there any way we can configure the default colors of the indicators on the chart?
Q317: Regarding an old issue, we have asked you about the default color of the palette for all the drawings and you answered that setting drawing-line-default-bg with an rgba format value can solve the problem.
Q318: "Facing a severe issue, despite changing the duration type for the aggregation, candles fromTime are not getting changed for different types of candle intervals.Like for 1min, 2min or 5min candles, we are getting the same time stamp for fromTime. similarly for 1day and 1week. Also the fromTime timestamp is too close for the candle aggregation resulting in very few candles in the start"
Q319: I didn't understand the usage of TradingSessionsProvider. According to your previous response in this:
Q320: Regarding vwap, since vwap is also another type of indicator, why do you want vwap value inside ChartCandleData and how should we get it ? It should be calculated by the library itself just like other indicators, same is being calculated by trading view itself. As charting library consumers, we should just provide ohlc and volume data to the candles data and indicator logic should be on the library.
Q321: We have checked that TV has the same behavior:
Q322: Selected drawing tools get deselected when JavaScript code adds drawings
Q323: We haven’t explicitly configured any layout or user providers—we’ve just been using the out-of-the-box settings, and everything worked properly in the previous version.
Q324: We’ve noticed that the time range dropdown now only shows the "30 minutes" option, whereas previously it included multiple ranges like 5 minutes, 1 hour, etc. There haven’t been any changes on our side, so we’re wondering if this might be related to the latest version update.
Q325: Error:
Q326: Listening to Changes in Drawings
Q327: Duplicate Callbacks for Historical Data Fetching
Q328: Listening to Graph Events
Q329: API for Checking Current Graph Data
Q330: We have implemented the dxStudies (new build and old build) based on the documentation using Vite, keeping the setup minimal. Unfortunately, we encountered the same problem with dxStudies.
Q331: When creating financial indicators. dxStudies module isn't available: TypeError: Cannot read properties of undefined (reading 'kotlin-kotlin-stdlib-js-ir') << Here is the problem, according to documentation we have followed.
Q332: The graph does not load in normal mode, but works in incognito (because ad blocker is not installed there).
Q333: Regarding YAxisLabelsProvider.
Q334: I am implementing min / max trade size using dependencies.chartReactConfig.trading.defaultOrderQuantity (for min trade size) and .maxOrderQuantity (for max trade size).This works fine for initial chart load, but I need to be able to set these values dynamically when I change instrument on the chart instance. I can see that you have api.setTradingQuantity(), but nothing like api.setMinTradingQuantity() or api.setMaxTradingQuantity(). Can I achieve this in some other way at the moment?
Q335: This is just something I noticed and am sharing for your info, as we might not use this functionality anyway: I noticed that the onPositionDblClick callback is not being called when I double click on a position label.All the other callbacks in the screenshot below work.
Q336: Regarding our suggestion / request for additional callbacks, the main reason we’re asking for these callbacks is that, as things stand, the user actions I listed happen entirely within the chart and remain invisible to our application until the action finishes. That means we have no way to “mirror” those interactions in our UI or ticket system as they happen.
Q337: In order to link some actions performed on our chart to our UI (e.g. our trade ticket), it would be useful to have the following additional callbacks for order-related UI elements:
Q338: Background: As your library’s observePositions / observeOrders data callback functions expect the full set of positions / orders when called, this is what we do whenever market price updates happen, but in reality there are a variety of different reasons that we would want to (and do) send the current set of positions / orders to the chart, depending on what our back-end is telling us about the state of the positions / orders.
Q339: I’ve noticed on the shortcut menu on our chart that market orders are showing a zero price:
Q340: UIOverrides is not available to us because we are using the widget version. As such, your function addCustomToolbarButtons() is not available to us, so we have our own functionality to add buttons to the toolbar, which we call from our own onChartCreated() function registered with api.onChartCreated(). The sequence below shows this:
Q341: I resolved the first issue where onApiCreated() was being called multiple times; this was due to an error in my code causing createLayout() to fail.
Q342: We have changed our chart layouts strategy from “one layout per instrument” to “multiple layouts” and, as such, we are now using the library’s standard built-in layout functionality, including showing the layouts menu on the toolbar. I am currently experiencing an issue where even when we return a populated ChartLayoutData object in LayoutProvider.getLayouts(), the library still calls createLayout() with a default layout passed in. Is this expected behavior, please?
Q343: I have noticed that when calling api.changeInstrument(newInstrument), the callback SymbolSuggestProvider.onInstrumentChanged() is not called. I was wondering if this is by design or not.
Q344: The issue here is that only one point from the scatter is plotted per candlestick width on the x-axis. This means that we may have many points within a 1 hour candle be reduced down to a single point, through some unknown method. I have attached two screenshots, one of another libraries method of candle+scatter charting (which has it's own issues) and the dxcharts.
Q345: We would like to hide the “Synchronize Drawings” icon in the left sidebar of the chart. We do not plan to implement this functionality right now and would like to hide it.
Q346: My question now is about the chart's dimensions. The solution I’m using is the Widget, and it only accepts parameters in px. I wanted to know if there’s a way to use %, or could you provide me with the ID of the container element so I can adjust the size?
Q347: We are implementing a non-React version of DX Charts. How do we remove the logo with the vanilla js DX chart library. See the screenshot below
Q348: How to enable cropping of candles with the option to extend them into the future?
Q349: Our use case is to trigger fetch for candles until current date - a replay button which will generate all the candles until today.
Q350: I’m encountering an issue with updating the chart data in our implementation. Specifically, when the chart initially loads (e.g., displaying data from 01.01.2024 to 10.01.2024), triggering the updateCallback function successfully fetches and updates the candles up to the current date.
Q351: Is it possible to remove icon from sidebar?
Q352: Are fractional price increments supported?
Q353: Is it possible to increase font size
Q354: is there a method we can call from to tell the graph to refresh?
Q355: How to accesses React state from provider callbacks
Q356: Is onApiCreated called once for one render of the graph? Am I right in assuming there is one ChartReactAPI and many ChartWithModules?
Q357: What are the consequences of turning workers off?
Q358: Why is this happening? “Failed to create studies webworker Error: Workers disabled”
Q359: We see this often in the console. Why? “Warning: findDOMNode is deprecated”.
Q360: Why do we get this, “The type of data has been switched: Last → Market”?
Q361: How can I make charts updates faster for live candles?
Q362: How to make symbol name to be shown on a price scale by default?
Q363: Is it possible to specify precision for order quantity?
Q364: which part of the layout should I be looking at to find the default drawing color? We already have a layout provider using the code you shared, and that saves chart colors correctly, but I'm just not sure where to find the default drawing color in layouts.
Q365: we’re curious if the library version is compatible with a mobile app built using React Native?
Q366: What does ChartDataProvider.subscribeServiceData do?
Q367: how can access ChartComponent.doActivate() from dx api and how it is used?
Q368: dx applyUponCreation (no specific question it has been sent to the chat just like that)
Q369: observable changeAggregationPeriod
Q370: dx onInstrumentChangedTimeframeViewportEffect
Q371: disable timeframe toolbar
Q372: What does setAggregationTimeframeChangeStrategy() do?
Q373: Please define "service data"
Q374: dX to cancel requestHistoryData and can I cancel a chart historical data
Q375: How to disable timeframe toolbar
Q376: Do you have an example of uiOverride for instrument suggest
Q377: how to provide a layoutProvider to the dxchart chart?
Q378: how i can add programatic drawing to the favourites?
Q379: how to override positions component with ui override feature. positon component of trading feature.
Q380: How to increase the precision to 4 digits in the last price label and also the crosshair label
Q381: I need to reload / refresh the whole chart object, not just the data
Q382: how to set it so we get the wicks in the code
Q383: How to create orders on chart load programatically
Q384: UserDataProvider implemnetation
Q385: how to change the toolbar of the devexperts charts?
Q386: const ds = pane.createDataSeries(); ds.setDataPoints([candles.value, indicator.data]). With this code i expect that rendered two lines, but only indicator.data actually rendered. Why?
Q387: When there are no layouts, what should we set selectedLayoutId to?
Q388: Quick question: can you please let me know how to set volume to the “Buy” and “Sell” buttons on the chart (top-left). Default its showing 100.( I want to set initial volume,max volume allowed and stepper for increase or decraese.
Q389: We have attempted to get the chart setting to work that allows you to select the price type on the price axis as Bid, Last, Ask or Market. The Last always plots. How do we implement so that it works correctly?
Q390: We are not able to get the Volume Weighted Average Price Indicator to plot on a chart. We have attempted to pass in the VWAP value, but it does not display.
Q391: Is there any way to set the parent container for the studies panel that appears when the 'f' toolbar icon is clicked?
Q392: When i right click on chart Buy Market is showing as Nan. how to control this?. Can you throw me some light on this?
Q393: regarding the indicators template on the web. when saving a template in chart mode, the template is saved under the indicators templates. however, when the user goes to a different tab and then later returns to charts, the template is no longer saved.
Q394: What is the id of the "Default Layout"?
Q395: How can I programmatically select a different layout?
Q396: how to use subscribeServiceData
Q397: How can we set the parent container for the studies window?
Q398: Can I plot only a specific fixed time range on the chart?
Q399: Can you guide me what setting I can override in order to change the default zoom of the chart? Currently it shows like data from the past 1-2 hours with tens or hundreds of candles. I would like to change this to a more "balanced zoom state" where I can see about 25 candles on the phone's screen. See attached screenshots of current and desired layout.
Q400: Is there any way to set the parent container for the studies panel that appears when the 'f' toolbar icon is clicked?
Q401: We are not able to get the Volume Weighted Average Price Indicator to plot on a chart. We have attempted to pass in the VWAP value, but it does not display.
Q402: We have attempted to get the chart setting to work that allows you to select the price type on the price axis as Bid, Last, Ask or Market. The Last always plots. How do we implement so that it works correctly?
Q403: When creating a protection order for an existing position, a temporary order ID is assigned to the position. In cases where the backend fails to create the order, our createOrder function in the ordersProvider returns a rejected promise.
Q404: Some of price history requests triggered by the requestHistoryData function take very long to finish (get a response). Because of this when I change the aggregation, the chart will wait a little bit and display “No data available”. When the request of price history finishes and returns the candle data the chart will not update and it will still display “No data available”. Right now we have a workaround to adjust the from and to datetime so that the requests don’t take long to finish. We would like a way to adjust the timeout of the requestHistoryData, we want to make it wait up until 2 minutes before returning “No data available”.
Q405: We are currently having a problem where if you make two orders or positions and they get merged (collapsed) onto the dxchart you are not able to click them to add a stop loss or a take profit.
Q406: Some of price history requests triggered by the requestHistoryData function take very long to finish (get a response). Because of this when I change the aggregation, the chart will wait a little bit and display “No data available”. When the request of price history finishes and returns the candle data the chart will not update and it will still display “No data available”. Right now we have a workaround to adjust the from and to datetime so that the requests don’t take long to finish. We would like a way to adjust the timeout of the requestHistoryData, we want to make it wait up until 2 minutes before returning “No data available”.
Q408: Can client push text programmatically on the chart? Its either through some custom component they'll have to write or through "text" drawing tool
Q409: After selecting a drawing, the following control will be displayed. What is its name?
Q410: is it possible to disable the Editing Dialog when a drawing is double-clicked?
Q411: How to manage the layer at code level? Can I move all my generated drawings into a new layer programmatically?
Q412: Here are using Text and Price Line to indicate current orders and positions. Without enabling the Trading feature, do you have any other charting methods you can recommend for representing orders/positions on a chart?
Q413: Is it possible to enable the Trading feature (Trading from Chart) but remove the order actions from the right-click menu?
Q414: How to remove/disable the ‘x’ (Close Order) action from position widget?
Q415: After selecting a drawing, the settings control will be displayed. Is it possible to disable/remove this widget for a specific drawing? e.g. Drawings that were generated by us.
Q416: is it possible to disable the Editing Dialog when a drawing is double-clicked?
Q417: How to manage the layer at code level? Can I move all my generated drawings into a new layer programmatically?
Q418: How to change the formatter for volume
Q419: Do we need to create a protection order on the OrderProvider to set a take-profit or stop-loss for a market position? If so, what values should I set for price, and orderType respectively?
Q420: For setting the connection between position and open orders, only one SL and one TP order can be linked via setting protectionOrderIds. What if I have multiple TP/SL on the same position?
Q421: How to change the colours for drawings
Q423: How to extend the drawing’s right-click menu with an additional option like "Create signal." -
Q424: . How to get price information from drawing lines
Q425: Is it possible to hide the left, top, and bottom toolbars and use a single custom bottom toolbar instead? Also, can we support a bottom-sheet–style mobile integration as shown in the video? The docs only mention customizing the top toolbar.
Q426: Is it possible to customize the candle shape (e.g., slightly rounded edges, etc.)?
Q427: We also need support with adding indicators to the chart programmatically. We don’t mean custom indicators, but the existing built-in ones.
Q428: Do you officially support Next.js 16+ (incl. Turbopack dev)
Q429: For Vite-based apps (TanStack Start), what’s the recommended setup and known limitations?
Q430: Which UI surfaces are safe to override via uiOverrides (toolbar, drawings sidebar, context menus, order ticket, dialogs)?
Q431: Are there any UI parts that are effectively non-overridable / library-owned or require styled-components overrides?
Q432: Are there any UI parts that are effectively non-overridable / library-owned or require styled-components overrides?
Q433: In dxcharts-lite (Open source version) we observed that after initializing the chart with a config, we couldn’t find a supported API to update core config later (beyond user interactions). Question: In enterprise (dxchart5-react), what is the supported pattern to dynamically update chart settings at runtime (theme switch, toggling features, adding/removing studies, changing available drawings, switching symbol/timeframe) without full teardown/reinit? If reinit is required, what lifecycle do you recommend to avoid leaks and preserve state?
Q434: For “modules / add-ons” (drawings, studies, chart types) can we build and register our own custom add-ons (custom drawings, custom indicators/studies, custom overlays, custom chart types), or are we limited to the built-in modules? If custom is supported, what extension API exists and what are the compatibility guarantees across versions?
Q435: Candle data contract (REST history + WS (SSE) live updates)
Q436: Which fields are mandatory for candles (OHLCV + time), and which fields are optional but supported?
Q437: What’s the recommended approach for backfill, gaps (market closed), and reconciliation after reconnect?
Q438: Does DXcharts treat the last (in-progress) candle as mutable, while considering historical candles immutable?
Q439: In case of overlaps or late updates for the same candle timestamp, how does the engine resolve conflicts (overwrite vs merge vs ignore)?
Q440: When candle data is revised (e.g. last candle updates or post-reconnect reconciliation), are indicators and studies automatically recalculated, or is this responsibility pushed to the data provider layer?
Q441: Web Workers usage & requirements: Which subsystems run in workers (studies, aggregation, rendering)? Are workers optional in production, and what changes (if anything) when disableWorkers=true?
Q442: CSP + Workers: What is the minimal CSP configuration needed for workers in your default setup?
Q443: Multi-chart / widget composition: Do you have recommended patterns for multiple charts on the same page (2–6 widgets), including shared resources, throttling, and how many concurrent charts you consider “safe” on typical hardware?
Q444: Lazy-loading history: How exactly does historical lazy loading work (trigger conditions, request shape, how the library merges returned data), and what’s the recommended implementation to avoid duplicate loads and jank?
Q445: Caching / performance hooks: Do you provide internal caching or performance knobs (render throttling, partial updates), and what are your recommended “best-effort” settings for smooth rendering under load?
Q446: High-frequency data buffering/batching: Does the library have built-in buffering/batching for high-frequency updates (e.g., accumulating multiple updates before triggering a render cycle), or should we implement batching/throttling in our data provider layer?
Q447: Recommended max candle count per chart: What is the recommended maximum number of candles kept in memory per chart, and what happens if we exceed it (automatic eviction, degradation, errors)?
Q448: Memory footprint scaling: What’s the approximate per-chart memory footprint, and how does it scale with candle count, active studies, and drawings? Especially rendering multiple charts.
Q449: Long-session behavior (8h+): Do you have guidance or known patterns for memory growth/leaks over long-running sessions (8+ hours) and recommended cleanup/teardown practices when switching symbols/layouts?
Q450: Rendering/invalidation strategy: What is the canvas invalidation/redraw strategy—full-canvas repaint or dirty-region based—and are there known scenarios that cause excessive repaint/layout thrashing we should avoid?
Q451: How is DXcharts versioning handled—do you follow SemVer (and what counts as a breaking change)? How are release notes and migration guidance published per version?
Q452: Are we allowed/able to modify the DXcharts codebase itself (e.g., patch a bug, add a missing hook) and ship that in production? If yes, under which commercial model (source access, escrow, IP ownership options) and what does the workflow look like (forking vs vendor-provided patch builds vs “customer patch queue”)?
Q453: For ZIP and Nexus approaches are there any differences in terms of version management and updating? Which one would you suggest?
Q454: (Widget) Where can I find the different options for this setting I found in the config override page. "timeframePresets": { "mode": "full" }. Are there other modes than "full"?
Q455: (Widget) I wanted to remove the compare button in the top toolbar. Do you have any documentation on what exactly is possible with the widget so I can move on and don't need to try?
Q456: Occasionally, we need to jump back in time and have successfully used the removeDataFrom function to do so. However, after removing the excess candles, the chart position is not ideal. It would be extremely helpful to have a way to move the last remaining candle to a given position on the x-axis of the chart without resetting the zoom level, as preserving the current zoom is crucial for a smooth user experience.
Q457: Is it possible to hide the left, top, and bottom toolbars and use a single custom bottom toolbar instead? Also, can we support a bottom-sheet style mobile integration? The docs only mention customizing the top toolbar. Is it possible to customize the candle shape (e.g., slightly rounded edges, etc.)?
Q458: How to get access to drawingsComponent after click?
Q459: We also need support with adding indicators to the chart programmatically. We don't mean custom indicators, but the existing built-in ones. What we want is an API/function where we can pass indicator parameters (e.g., period, source, etc.), have the indicator added via your indicator module, and then rendered on the chart. We couldn't find documentation for this in your docs.
Q460: We are only using the parameters required for the corresponding indicator. What would be another reason for this? We can successfully show those studies (indicators) in the added list; there is no problem with that. The problem is visualization, and we cannot add default indicators (from the UI) to this list when we automatically add those indicators. Could you please further explain how to implement this feature?
Q461: (Widget) I have a chart with one layout - Default Layout - which was created by the library (5.17.1) and which I saved to our back-end. When I make any change to the chart (e.g., scrolling it back in time slightly), updateLayout() is called, as expected. However, when I inspect the passed-in parameter (chartLayoutWithId), it's missing a large amount of data that was in the layout before updateLayout() was called.
Q462: We installed the latest chart build, 5.17.1. We now get the following error message when attempting to change the symbol.

Q1: Is DxCharts-react compatible with React 18?​

Q2: Is DxCharts-react compatible with React 19?​

Q3: Are styled components a hard dependency for overriding styles in the chart?​

Q4: Can you override the left sidebar component? If we want to remove certain drawing tools, or create a custom sidebar component with a hierarchy of groups​

Q5: Can you remove or override the trading components? E.g. hide the buy/sell buttons on display info​

Q6: do you know which data point that the % scale on DXCharts benchmarks against? The 0% line usually intersects the first candle on the chart but not always at an : open, low, high, or close value. See the image below.​

Q7: Can you disable the right click menu? Either on the Y Axis or on the chart. Can we override this menu's selections?​

Q8: What's DXcharts size in KB?​

Q9: How easy to replace current charting solution​

Q10: Who does the integrations​

Q11: How do you trade from the charts? Which type of orders are supported?​

Q12: If there is an issue who can fix it? How fast? How many people work on the team?​

Q13: Can you give us grace period for integrations​

Q14: Who is using it already?​

Q16: We want to align the Y Axis of custom data in a separate pane (a horizontal bar chart) with the Y Axis of our main DXChart​

Q17: I just want to know if I have to draw a vertical line at a specific time, or you can simply say that I want to know the x position at the specific time. How can I calculate that?​

Q18: Why are my drawn lines partially erased when the graph is rendered? Am I drawing the lines on the wrong canvas?​

Q19: RoundingY-AxisLabelValues: Currently, the Y-axis label values are displayed with up to two decimal places. However, I need them to be rounded to up to five decimal places. Could you please advise on how I can achieve this customization?​

Q20: Setting Margin-Top for Legend: I am wondering if there is a way to adjust the margin-top for the legends that are displayed in the top-left corner of the chart. I would like to customize their position, and any insights on how to achieve this would be greatly appreciated.​

Q21: Rounding Y-Axis Label Values: Currently, the Y-axis label values are displayed with up to two decimal places. However, I need them to be rounded to up to five decimal places. Could you please advise on how I can achieve this customization?​

Q22: Can I use Vite as a bundler?​

Q23: How to create custom indicators?​

Q24: Do you have roadmap?​

Q25: Are there heat maps in DXchart.​

Q26: How secure DXcharts is?​

Q27: Are there external dependencies?​

Q28: Is there a dummy market data in the chart? is there a way to see how it works?​

Q29: How to install library?​

Q30: How to add custom drawings?​

Q31: Could you please provide detailed steps or documentation on how to effectively insert source data?​

Q32: I am interested in creating a custom graph(indicator). Could you share the necessary steps or resources to guide me through the process?​

Q33: After successfully creating a custom graph(indicator), I would like to understand how to create an API for it. Furthermore, could you provide guidance on integrating this API with the chart for seamless functionality?​

Q34: Is it possible to create an overlay custom chart, and if so, what are the recommended steps or considerations in achieving this?​

Q35: In cases where we are using the dxChart library, but do not have access to the source code, how can we integrate a custom API? Could you provide insights or best practices to achieve this integration?​

Q36: What is the data ingestion framework for streaming quotes data into the dxCharts components? For better understanding, can you please explain the process flow.​

Q37: For technical indicators if we plan to utilize ML-driven methods, how would we integrate the same with the UI?​

Q38: How can integrate news that we would receive via another API to library’s event component in a way that the hover component is created automatically as soon as the news is received?​

Q39: What's the difference between library and widget (referred to lack of trading capabilities)​

Q40: Which of DXcharts solution better for TV​

Q41: What if I am looking for data provided along with charts?​

Q42: About x-axis: We have a lot of chart, some chart X-axis is time-base, but some x-axis data is from other different thing.​

Q43: About jest configuration: I still didn’t understand how to configure jest to support es2020. Could you provide a whole “Hello Word”project with “vue2+dxchart.lib+jest”​

Q44: About the multiple chart? I don’t want to add a new series via UI select, I want show the two series on first render.​

Q45: Do you have a full demo integrate dxchart and vue? I encounter some error when I am run unit test and build my project​

Q46: Are you support a api which can let us fetch the new data when I drag the chart to the left side?​

Q47: How to pass the other graphic data structures in addition to candles. I have creare a chartDataProvider in our project, but I don’t know what data structures should be resolve by requestHistoryData.​

Q48: How to display four decimal places on the y-axis.​

Q49: didn’t see the complete configuration of initialChartConfig in the chart-with-modules.config.d.ts file.​

Q50: How to intergra the Mandatory providers in createChart.​

Q51: How to control the y-axis and x-axis range in my code? The library default show is the figure 1 below, and I want to show is Figure 2 below looks like​

Q52: I have implement a ‘SymbolSuggestProvider’, but I still don’t know how to write ‘priceIncrements’, what is [0,0001, 1, 1] means? It is not work for our data.​

Q53: How to pass multiple data for custom provider? The demo just has one data. I want to show two candlesticks in one chart​

Q54: In the chart, how could we zoom in out with x-axis and y-axis at the same time.​

Q55: How to disabled the share button.​

Q56: Are there any api sending out data out of the library?​

Q57: How to implement multiple data in the one chart. (in the example, showing candlestick and histogram)​

Q58: I have tried to figure out how to set the specified xAxis or yAxis range/scale during initialization but cannot find relevant configuration.​

Q63: Additionally, do you have a sample React app that includes integrated charts with examples demonstrating all the APIs and methods? If so, could you please share those as well? It would greatly assist us in the integration process.​

Q65: How can we ensure that the charts are reloaded when the internet connection is lost and then restored? We anticipate that the charts should retrieve historical data and resubscribe once the internet connection is reestablished. Could you please advise us on how to accomplish this.​

Q66: The requestHistoryData function isn't providing the expected parameters​

Q67: How do we configure sessions for different segments?, How do we pass special holidays and handle special trading sessions?​

Q68: How do we configure price precision for different segments?​

Q69: How do we display search results on symbol search?​

Q70: Do we need to code anything to save indicator templates?​

Q71: Inserting Source Data into Graph: Could you please provide detailed steps or documentation on how to effectively insert source data into a graph using [name of the tool or library]?​

Q72: Creating a Custom Graph. I am interested in creating a custom graph(indicator). Could you share the necessary steps or resources to guide me through the process?​

Q73: Is it possible to create an overlay custom chart, and if so, what are the recommended steps or considerations in achieving this?​

Q74: data ingestion framework : What is the data ingestion framework for streaming quotes data into the dxCharts components? For better understanding, can you please explain the process flow.​

Q75: Technical indicators & signals: For technical indicators if we plan to utilize ML-driven methods, how would we integrate the same with the UI?​

Q76: How can integrate news that we would receive via another API to library’s event component in a way that the hover component is created automatically as soon as the news is received.​

Q77: Can your component be used with Electron + NextJs (React) environment?​

Q78: can you provide example code for integrating your component with Next.js or React?​

Q79: In the demo of the component your company provides, there is an indicator search and add dialogue box; Can we add our custom-made indicators to this dialogue?​

Q80: Can we add and display the properties of our custom-made indicators in the indicator properties dialogue box?​

Q81: TradingView has a drawing tool called "Date and price range"; do you offer a similar feature?​

Q82: Can the button placement or caption of the drawing tools be changed?​

Q83: Can we repeatedly display svg annotations (like arrows, circles, etc.) having tooltip text on the indicators lines or candle bars?​

Q84: We would like to change the line color of specific indicators based on the reference value or direction. is this feature available?​

Q85: Can we add a button for temporarily hiding or minimizing a specific indicator displayed on the chart?​

Q86: We are conducting tests on the implementation of the DXCharts library. We have made progress in some areas, but we noticed some issues after integrating the SymbolSuggestProvider with our data provider. SymbolSuggestProvider:​

Q1: Is DxCharts-react compatible with React 18?

Q2: Is DxCharts-react compatible with React 19?

Q3: Are styled components a hard dependency for overriding styles in the chart?

Q4: Can you override the left sidebar component? If we want to remove certain drawing tools, or create a custom sidebar component with a hierarchy of groups

Q5: Can you remove or override the trading components? E.g. hide the buy/sell buttons on display info

Q6: do you know which data point that the % scale on DXCharts benchmarks against? The 0% line usually intersects the first candle on the chart but not always at an : open, low, high, or close value. See the image below.

Q7: Can you disable the right click menu? Either on the Y Axis or on the chart. Can we override this menu's selections?

Q8: What's DXcharts size in KB?

Q9: How easy to replace current charting solution

Q10: Who does the integrations

Q11: How do you trade from the charts? Which type of orders are supported?

Q12: If there is an issue who can fix it? How fast? How many people work on the team?

Q13: Can you give us grace period for integrations

Q14: Who is using it already?

Q16: We want to align the Y Axis of custom data in a separate pane (a horizontal bar chart) with the Y Axis of our main DXChart

Q17: I just want to know if I have to draw a vertical line at a specific time, or you can simply say that I want to know the x position at the specific time. How can I calculate that?

Q18: Why are my drawn lines partially erased when the graph is rendered? Am I drawing the lines on the wrong canvas?

Q19: RoundingY-AxisLabelValues: Currently, the Y-axis label values are displayed with up to two decimal places. However, I need them to be rounded to up to five decimal places. Could you please advise on how I can achieve this customization?

Q20: Setting Margin-Top for Legend: I am wondering if there is a way to adjust the margin-top for the legends that are displayed in the top-left corner of the chart. I would like to customize their position, and any insights on how to achieve this would be greatly appreciated.

Q21: Rounding Y-Axis Label Values: Currently, the Y-axis label values are displayed with up to two decimal places. However, I need them to be rounded to up to five decimal places. Could you please advise on how I can achieve this customization?

Q22: Can I use Vite as a bundler?

Q23: How to create custom indicators?

Q24: Do you have roadmap?

Q25: Are there heat maps in DXchart.

Q26: How secure DXcharts is?

Q27: Are there external dependencies?

Q28: Is there a dummy market data in the chart? is there a way to see how it works?

Q29: How to install library?

Q30: How to add custom drawings?

Q31: Could you please provide detailed steps or documentation on how to effectively insert source data?

Q32: I am interested in creating a custom graph(indicator). Could you share the necessary steps or resources to guide me through the process?

Q33: After successfully creating a custom graph(indicator), I would like to understand how to create an API for it. Furthermore, could you provide guidance on integrating this API with the chart for seamless functionality?

Q34: Is it possible to create an overlay custom chart, and if so, what are the recommended steps or considerations in achieving this?

Q35: In cases where we are using the dxChart library, but do not have access to the source code, how can we integrate a custom API? Could you provide insights or best practices to achieve this integration?

Q36: What is the data ingestion framework for streaming quotes data into the dxCharts components? For better understanding, can you please explain the process flow.

Q37: For technical indicators if we plan to utilize ML-driven methods, how would we integrate the same with the UI?

Q38: How can integrate news that we would receive via another API to library’s event component in a way that the hover component is created automatically as soon as the news is received?

Q39: What's the difference between library and widget (referred to lack of trading capabilities)

Q40: Which of DXcharts solution better for TV

Q41: What if I am looking for data provided along with charts?

Q42: About x-axis: We have a lot of chart, some chart X-axis is time-base, but some x-axis data is from other different thing.

Q43: About jest configuration: I still didn’t understand how to configure jest to support es2020. Could you provide a whole “Hello Word”project with “vue2+dxchart.lib+jest”

Q44: About the multiple chart? I don’t want to add a new series via UI select, I want show the two series on first render.

Q45: Do you have a full demo integrate dxchart and vue? I encounter some error when I am run unit test and build my project

Q46: Are you support a api which can let us fetch the new data when I drag the chart to the left side?

Q47: How to pass the other graphic data structures in addition to candles. I have creare a chartDataProvider in our project, but I don’t know what data structures should be resolve by requestHistoryData.

Q48: How to display four decimal places on the y-axis.

Q49: didn’t see the complete configuration of initialChartConfig in the chart-with-modules.config.d.ts file.

Q50: How to intergra the Mandatory providers in createChart.

Q51: How to control the y-axis and x-axis range in my code? The library default show is the figure 1 below, and I want to show is Figure 2 below looks like

Q52: I have implement a ‘SymbolSuggestProvider’, but I still don’t know how to write ‘priceIncrements’, what is [0,0001, 1, 1] means? It is not work for our data.

Q53: How to pass multiple data for custom provider? The demo just has one data. I want to show two candlesticks in one chart

Q54: In the chart, how could we zoom in out with x-axis and y-axis at the same time.

Q55: How to disabled the share button.

Q56: Are there any api sending out data out of the library?

Q57: How to implement multiple data in the one chart. (in the example, showing candlestick and histogram)

Q58: I have tried to figure out how to set the specified xAxis or yAxis range/scale during initialization but cannot find relevant configuration.

Q63: Additionally, do you have a sample React app that includes integrated charts with examples demonstrating all the APIs and methods? If so, could you please share those as well? It would greatly assist us in the integration process.

Q65: How can we ensure that the charts are reloaded when the internet connection is lost and then restored? We anticipate that the charts should retrieve historical data and resubscribe once the internet connection is reestablished. Could you please advise us on how to accomplish this.

Q66: The requestHistoryData function isn't providing the expected parameters

Q67: How do we configure sessions for different segments?, How do we pass special holidays and handle special trading sessions?

Q68: How do we configure price precision for different segments?

Q69: How do we display search results on symbol search?

Q70: Do we need to code anything to save indicator templates?

Q71: Inserting Source Data into Graph: Could you please provide detailed steps or documentation on how to effectively insert source data into a graph using [name of the tool or library]?

Q72: Creating a Custom Graph. I am interested in creating a custom graph(indicator). Could you share the necessary steps or resources to guide me through the process?

Q73: Is it possible to create an overlay custom chart, and if so, what are the recommended steps or considerations in achieving this?

Q74: data ingestion framework : What is the data ingestion framework for streaming quotes data into the dxCharts components? For better understanding, can you please explain the process flow.

Q75: Technical indicators & signals: For technical indicators if we plan to utilize ML-driven methods, how would we integrate the same with the UI?

Q76: How can integrate news that we would receive via another API to library’s event component in a way that the hover component is created automatically as soon as the news is received.

Q77: Can your component be used with Electron + NextJs (React) environment?

Q78: can you provide example code for integrating your component with Next.js or React?

Q79: In the demo of the component your company provides, there is an indicator search and add dialogue box; Can we add our custom-made indicators to this dialogue?

Q80: Can we add and display the properties of our custom-made indicators in the indicator properties dialogue box?

Q81: TradingView has a drawing tool called "Date and price range"; do you offer a similar feature?

Q82: Can the button placement or caption of the drawing tools be changed?

Q83: Can we repeatedly display svg annotations (like arrows, circles, etc.) having tooltip text on the indicators lines or candle bars?

Q84: We would like to change the line color of specific indicators based on the reference value or direction. is this feature available?

Q85: Can we add a button for temporarily hiding or minimizing a specific indicator displayed on the chart?

Q86: We are conducting tests on the implementation of the DXCharts library. We have made progress in some areas, but we noticed some issues after integrating the SymbolSuggestProvider with our data provider. SymbolSuggestProvider: