- Notifications
You must be signed in to change notification settings - Fork13
Flexible financial charts based on HTML5 canvas
License
devexperts/dxcharts-lite
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
DXcharts Lite is a modern solution made for visualization financial data with full variety of charts.
It's been created and tempered as a part of big tradings apps with millions of users.
Now it's grown enough to be recognized as independent product capable to support any from your needs
as a simple widget for blog and as a part of big enterprise solution for trading.
Get started with DXCharts Lite, install the library and configure it as you want.
Install library to your project:
npminstall @devexperts/dxcharts-lite
Yourpackage.json after installation:
"dependencies": {"@devexperts/dxcharts-lite":"1.0.0",...}
If you use webpack or any other bundler - importcreateChart method and pass element where the chart will be rendered as a first argument.
exportconstcreateChartInstance=()=>{constcontainer=document.getElementById('chart_container');constchartInstance=DXChart.createChart(container);returnchartInstance;};
createChart - method, that creates a new chart instance using ChartBootstrap class and returns it.
Method accepts 2 parameters:
element- The HTML element where the chart will be renderedconfig(optional) - instance ofChartConfig
Also, please, set
width: 100%andheight: 100%for parent containerby default chart is auto-resizing to parentyou can change it by settingfixedSizein config
Now you should have empty chart on screen.
Let's pass in some data i.e.Candles. You can use bundled function to generate some mock data.ImportgenerateCandlesData and call it to generate candles.
exportconstgenerateMockData=()=>{constcandles=generateCandlesData();chart.setData({ candles});};
Now you should see chart just like image below:
Here is full quick-start code example:
<html><head><scriptsrc="https://www.unpkg.com/@devexperts/dxcharts-lite@2.0.1/dist/dxchart.min.js"></script><scripttype="importmap">{"imports":{"@devexperts/dxcharts-lite/":"https://www.unpkg.com/@devexperts/dxcharts-lite@2.0.1/"}}</script></head><body><divid="chart_container"></div></body><scripttype="module">importgenerateCandlesDatafrom'@devexperts/dxcharts-lite/dist/chart/utils/candles-generator.utils';// create chart instance, pass parent container as 1st argumentconstcontainer=document.getElementById('chart_container');constchart=DXChart.createChart(container);// create and set candles dataconstcandles=generateCandlesData();chart.setData({ candles});</script></html>
You can configure chart withChartConfig object. It is optional.
ChartConfig is used to set initial properties for chart instance.Below you can see full table of it, and other options, thatChartConfig consists of.
Every chart component has an API allowing change a lot of params on the fly.Change appearance at runtime.Subscribe on different events in chart (like HOVER on candle)
Here are the links of the main components:
ChartComponent- set data, subscribe on data changesXAxisComponent- configure x-labelsYAxisComponent- configure labels and set y-axis typeCrossToolComponent- cross-hair type, OHLC magnetEventsComponent- set events dataVolumesComponent- set volumesWaterMarkComponent- create and manage a watermarkNavigationMapComponent- create a navigation mapSnapshotComponent- create a snapshotHighlightsComponent- allows to draw highlights of some canvas objects such as labelsPaneManager- create and manage panesPaneComponent- create and manage panes data series
We have created a lot of examples with different chart configuration.You can find themhere.
To show you how it's beautiful, we have createdDemo version, based on DXCharts Lite. Feel all power of our library!
About
Flexible financial charts based on HTML5 canvas