{"id":30246862,"url":"https://github.com/devexperts/dxcharts-lite","last_synced_at":"2026-05-25T11:00:59.281Z","repository":{"id":187489649,"uuid":"676136992","full_name":"devexperts/dxcharts-lite","owner":"devexperts","description":"Flexible financial charts based on HTML5 canvas","archived":false,"fork":false,"pushed_at":"2026-05-25T09:03:24.000Z","size":4365,"stargazers_count":92,"open_issues_count":11,"forks_count":17,"subscribers_count":10,"default_branch":"master","last_synced_at":"2026-05-25T10:26:54.087Z","etag":null,"topics":["canvas","chart","charting","charting-library","charts","finance","html5-charts","javascript","typescript"],"latest_commit_sha":null,"homepage":"https://devexperts.com/dxcharts/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/devexperts.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-08-08T14:08:58.000Z","updated_at":"2026-05-25T09:02:30.000Z","dependencies_parsed_at":"2023-12-25T13:55:43.139Z","dependency_job_id":"171f9ca8-1d69-4e7f-8b4f-4a81653a7e01","html_url":"https://github.com/devexperts/dxcharts-lite","commit_stats":null,"previous_names":["devexperts/dxcharts-lite"],"tags_count":60,"template":false,"template_full_name":null,"purl":"pkg:github/devexperts/dxcharts-lite","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devexperts%2Fdxcharts-lite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devexperts%2Fdxcharts-lite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devexperts%2Fdxcharts-lite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devexperts%2Fdxcharts-lite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devexperts","download_url":"https://codeload.github.com/devexperts/dxcharts-lite/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devexperts%2Fdxcharts-lite/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33471530,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-25T06:32:55.349Z","status":"ssl_error","status_checked_at":"2026-05-25T06:32:35.322Z","response_time":57,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","chart","charting","charting-library","charts","finance","html5-charts","javascript","typescript"],"created_at":"2025-08-15T06:01:10.426Z","updated_at":"2026-05-25T11:00:59.270Z","avatar_url":"https://github.com/devexperts.png","language":"TypeScript","funding_links":[],"categories":["Analytics \u0026 Visualization","Visualization"],"sub_categories":[],"readme":" \u003cbr\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"docs/images/logo.png\" alt=\"devexperts-logo\" width=\"294px\" height=\"100px\"/\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eDXCharts Lite: Powerful financial charting tool\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ci\u003e\n    DXcharts Lite is a modern solution for visualizing financial data with a wide variety of chart types.\u003cbr\u003e\n    Originally developed as part of large tradings applications used by millions of users,\u003cbr\u003e\n\t  DXcharts Lite has matured into an independent product.\u003cbr\u003e\n    It can be used as a simple widget for blogs or as a component in enterprise trading solutions.\u003cbr\u003e\n  \u003c/i\u003e\n  \u003cbr\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://opensource.org/licenses/MPL-2.0\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/License-MPL_2.0-brightgreen.svg\" alt=\"License: MPL 2.0\" /\u003e\n  \u003c/a\u003e\u0026nbsp;\n  \u003ca href=\"https://devexperts.com/kb/dxcharts/docs/how-to-contribute\"\u003e\n    \u003cimg src=\"https://img.shields.io/static/v1?label=PRs\u0026message=Welcome\u0026color=blue\" alt=\"PRs: Welcome\" /\u003e\n  \u003c/a\u003e\u0026nbsp;\n  \u003ca href=\"https://devexperts.com/dxcharts-demo/?lang=en\"\u003e\n    \u003cimg src=\"https://img.shields.io/static/v1?label=Latest%20version\u0026message=2.2.0\u0026color=blue\" alt=\"Version\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cbr\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"docs/images/fourbasiccharts.png\" width=\"1000px\" alt=\"4 charts example\"/\u003e\n\u003c/p\u003e\n\n\u003chr\u003e\n\n## Overview\n\nGet started with DXCharts Lite by installing the library and configuring it to your needs.\n\n- 🚀 [Quick start](#quick-start)\n    - 📦 [Installation](#installation)\n    - 🛠️ [Create Chart](#create-chart)\n    - 📈 [Set data](#set-data)\n    - 📄 [HTML markup](#html-markup)\n- ⚙️ [Configuration](#configuration)\n- 🔌 [API](#api)\n- 📒 [Examples](#examples)\n- 🧮 [Demo](#demo)\n\n## Quick-start\n\n### Installation\n\nInstall the library in your project:\n\n```js\nnpm install @devexperts/dxcharts-lite\n```\n\nYour `package.json` after installation:\n\n```json\n\"dependencies\": {\n\t\"@devexperts/dxcharts-lite\": \"1.0.0\",\n\t...\n}\n```\n\n### Create chart\n\nIf you use webpack or another bundler, import the `createChart` method and pass the element where the chart will be rendered as the first argument.\n\n```js\nexport const createChartInstance = () =\u003e {\n\tconst container = document.getElementById('chart_container');\n\tconst chartInstance = DXChart.createChart(container);\n\treturn chartInstance;\n};\n```\n\nThe `createChart` method creates a new chart instance using `ChartBootstrap` class and returns it.\n\nIt accepts two parameters:\n\n- `element`: The HTML element where the chart will be rendered.\n- `config` (optional): An instance of [ChartConfig](/chart/chart-config/overview).\n\n\u003e Note: Set `width: 100%` and `height: 100%` for the parent container.\n\u003e By default, the chart auto-resizes to the parent, but you can change this by setting `fixedSize` in the config.\n\nYou should now see an empty chart on the screen.\n\n### Set data\n\nTo display data (e.g. `Candles`), you can use the bundled function to generate mock data.\nImport `generateCandlesData` and use it to generate candles.\n\n```js\nexport const generateMockData = () =\u003e {\n\tconst candles = generateCandlesData();\n\tchart.setData({ candles });\n};\n```\n\nYou should now see a basic chart like the image below:\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"docs/images/basicchart.png\" width=\"1000px\" alt=\"Basic chart\"/\u003e\n\u003c/p\u003e\n\n### HTML-markup\n\nHere is complete quick-start code example:\n\n```html\n\u003chtml\u003e\n\t\u003chead\u003e\n\t\t\u003cscript src=\"https://www.unpkg.com/@devexperts/dxcharts-lite@2.0.1/dist/dxchart.min.js\"\u003e\u003c/script\u003e\n\t\t\u003cscript type=\"importmap\"\u003e\n\t\t\t{\n\t\t\t\t\"imports\": {\n\t\t\t\t\t\"@devexperts/dxcharts-lite/\": \"https://www.unpkg.com/@devexperts/dxcharts-lite@2.0.1/\"\n\t\t\t\t}\n\t\t\t}\n\t\t\u003c/script\u003e\n\t\u003c/head\u003e\n\t\u003cbody\u003e\n\t\t\u003cdiv id=\"chart_container\"\u003e\u003c/div\u003e\n\t\u003c/body\u003e\n\t\u003cscript type=\"module\"\u003e\n\t\timport generateCandlesData from '@devexperts/dxcharts-lite/dist/chart/utils/candles-generator.utils';\n\n\t\t// create chart instance, pass parent container as 1st argument\n\t\tconst container = document.getElementById('chart_container');\n\t\tconst chart = DXChart.createChart(container);\n\t\t// create and set candles data\n\t\tconst candles = generateCandlesData();\n\t\tchart.setData({ candles });\n\t\u003c/script\u003e\n\u003c/html\u003e\n```\n\n## Configuration\n\nYou can configure the chart using a `ChartConfig` object (optional).\n\n`ChartConfig` sets the initial properties for the chart instance.\nBelow is a table of available options (see documentation for details).\n\n- [`FullChartConfig`](docs/generated/FullChartConfig.md)\n\n## API\n\nEach chart component has an API that allows you to change many parameters on the fly, modify appearance at runtime, and subscribe to various chart events (such as hovering over a candle).\n\nMain components include:\n\n- [`ChartComponent`](docs/generated/ChartComponent.md): Set data, subscribe to data changes\n- [`XAxisComponent`](docs/generated/XAxisComponent.md): Configure x-axis labels\n- [`YAxisComponent`](docs/generated/YAxisComponent.md): Configure y-axis labels and type\n- [`CrossToolComponent`](docs/generated/CrossToolComponent.md): Crosshair type, OHLC magnet\n- [`EventsComponent`](docs/generated/EventsComponent.md): Set events data\n- [`VolumesComponent`](docs/generated/VolumesComponent.md): Set volume data\n- [`WaterMarkComponent`](docs/generated/WaterMarkComponent.md): Create and manage a watermark\n- [`NavigationMapComponent`](docs/generated/NavigationMapComponent.md): Create a navigation map\n- [`SnapshotComponent`](docs/generated/SnapshotComponent.md): Create a snapshot\n- [`HighlightsComponent`](docs/generated/HighlightsComponent.md): Draw highlights on canvas objects such as labels\n- [`PaneManager`](docs/generated/PaneManager.md): Create and manage panes\n- [`PaneComponent`](docs/generated/PaneComponent.md): Create and manage pane data series\n\n## Examples\n\nWe have created many examples with different chart configurations.\nYou can find them [here](https://github.com/devexperts/dxcharts-lite/tree/master/docs/how-to).\n\n## Demo\n\nTo demonstrate its capabilities, we've created a [Demo version](https://devexperts.com/dxcharts-demo/) based on DXCharts Lite.\nExplore the full power of our library!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevexperts%2Fdxcharts-lite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevexperts%2Fdxcharts-lite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevexperts%2Fdxcharts-lite/lists"}