@devexperts/dxcharts-lite
Advanced tools
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:
npm install @devexperts/dxcharts-lite
Your package.json after installation:
"dependencies": {
"@devexperts/dxcharts-lite": "1.0.0",
...
}
If you use webpack or any other bundler - import createChart method and pass element where the chart will be rendered as a first argument.
export const createChartInstance = () => {
const container = document.getElementById('chart_container');
const chartInstance = DXChart.createChart(container);
return chartInstance;
};
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 of ChartConfigAlso, please, set
width: 100%andheight: 100%for parent container by default chart is auto-resizing to parent you 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.
Import generateCandlesData and call it to generate candles.
export const generateMockData = () => {
const candles = generateCandlesData();
chart.setData({ candles });
};
Now you should see chart just like image below:
Here is full quick-start code example:
<html>
<head>
<script src="https://www.unpkg.com/@devexperts/dxcharts-lite@2.0.1/dist/dxchart.min.js"></script>
<script type="importmap">
{
"imports": {
"@devexperts/dxcharts-lite/": "https://www.unpkg.com/@devexperts/dxcharts-lite@2.0.1/"
}
}
</script>
</head>
<body>
<div id="chart_container"></div>
</body>
<script type="module">
import generateCandlesData from '@devexperts/dxcharts-lite/dist/chart/utils/candles-generator.utils';
// create chart instance, pass parent container as 1st argument
const container = document.getElementById('chart_container');
const chart = DXChart.createChart(container);
// create and set candles data
const candles = generateCandlesData();
chart.setData({ candles });
</script>
</html>
You can configure chart with ChartConfig 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, that ChartConfig 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 seriesWe have created a lot of examples with different chart configuration. You can find them here.
To show you how it's beautiful, we have created Demo version, based on DXCharts Lite. Feel all power of our library!
FAQs
DXCharts Lite
The npm package @devexperts/dxcharts-lite receives a total of 5,206 weekly downloads. As such, @devexperts/dxcharts-lite popularity was classified as popular.
We found that @devexperts/dxcharts-lite demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.