{"id":23982419,"url":"https://github.com/datahint-eu/vizor-echarts","last_synced_at":"2025-09-13T12:32:21.131Z","repository":{"id":182837316,"uuid":"667517056","full_name":"datahint-eu/vizor-echarts","owner":"datahint-eu","description":"Blazor Apache ECharts library","archived":false,"fork":false,"pushed_at":"2024-06-26T21:32:13.000Z","size":4463,"stargazers_count":29,"open_issues_count":9,"forks_count":11,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-12-28T23:50:19.358Z","etag":null,"topics":["apache","blazor","boxplot","candlestick","chart","charting","charting-library","dotnet","echarts","echarts5","gauge","sankey","scatter"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/datahint-eu.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}},"created_at":"2023-07-17T17:24:57.000Z","updated_at":"2024-12-05T22:36:26.000Z","dependencies_parsed_at":"2024-05-07T10:38:04.627Z","dependency_job_id":"c35644e3-2b28-485b-b91f-bb28501679f6","html_url":"https://github.com/datahint-eu/vizor-echarts","commit_stats":null,"previous_names":["datahint-eu/vizor-echarts"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datahint-eu%2Fvizor-echarts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datahint-eu%2Fvizor-echarts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datahint-eu%2Fvizor-echarts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datahint-eu%2Fvizor-echarts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/datahint-eu","download_url":"https://codeload.github.com/datahint-eu/vizor-echarts/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":232867351,"owners_count":18588785,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["apache","blazor","boxplot","candlestick","chart","charting","charting-library","dotnet","echarts","echarts5","gauge","sankey","scatter"],"created_at":"2025-01-07T11:17:58.402Z","updated_at":"2025-09-13T12:32:21.090Z","avatar_url":"https://github.com/datahint-eu.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vizor.ECharts\n\nBlazor wrapper for [Apache ECharts](https://echarts.apache.org/en/index.html).\n\n - Supports .NET \u003e= 6.0\n - Ships with echarts 5.6.0\n - `Apache-2.0` Licensed (same as echarts)\n - Lots of examples in the `Vizor.ECharts.Demo` project\n - Refer to the official echarts [cheat sheet](https://echarts.apache.org/en/cheat-sheet.html) for a quick introduction\n \nSupported Chart Types:\n - Line\n - Bar\n - Pie\n - Scatter\n - Geo/Map\n - Candlestick\n - Radar\n - Boxplot\n - Heatmap\n - Graph\n - Tree\n - Treemap\n - Sunburst\n - Parallel\n - Sankey\n - Funnel\n - Gauge\n - Pictorial Bar\n - Theme River\n - Custom\n\n## How to include\n\n1. Add a package reference to `Vizor.ECharts`\n2. Add `vizor-echarts-bundle-min.js` OR `vizor-echarts-min.js` to your `_Host.cshtml` or `_Layout.cshtml` file\n    - `vizor-echarts-bundle-min.js` includes apache echarts and echarts-stat.\n\t- `vizor-echarts-min.js` ONLY contains the binding code and requires you to manually include apache-echarts and plugins.\n\t\n```\n\u003cscript src=\"_content/Vizor.ECharts/js/vizor-echarts-bundle-min.js\"\u003e\u003c/script\u003e\n```\n\nSee the [example](https://github.com/datahint-eu/vizor-echarts/blob/main/src/Vizor.ECharts.Demo/Pages/_Host.cshtml) from the demo application.\n\n## How to use\n\nThe bindings are nearly identical to the javascript/typescript version.\nThis makes it very easy to translate the examples from the official documentation to C#.\n\nFor example: [a simple pie chart](https://echarts.apache.org/examples/en/editor.html?c=pie-simple).\n\nAdd a using statement:\n```\n@using Vizor.ECharts;\n```\n\nChart component in your .razor file:\n```\n\u003cVizor.ECharts.EChart Options=\"@options\" Width=\"auto\" Height=\"400px\" /\u003e\n```\n\nChart options in the code section of your razor file:\n```\nprivate ChartOptions options = new()\n{\n\tTitle = new()\n\t{\n\t\tText = \"Referer of a Website\",\n\t\tSubtext = \"Fake Data\",\n\t\tLeft = \"center\"\n\t},\n\tTooltip = new()\n\t{\n\t\tTrigger = ECharts.TooltipTrigger.Item\n\t},\n\tLegend = new()\n\t{\n\t\tOrient = Orient.Vertical,\n\t\tLeft = \"left\"\n\t},\n\tSeries = new()\n\t{\n\t\tnew PieSeries()\n\t\t{\n\t\t\tName = \"Access From\",\n\t\t\tRadius = new CircleRadius(\"50%\"),\n\t\t\tData = new List\u003cPieSeriesData\u003e()\n\t\t\t{\n\t\t\t\tnew() { Value = 1048, Name = \"Search Engine\" },\n\t\t\t\tnew() { Value = 735, Name = \"Direct\" },\n\t\t\t\tnew() { Value = 580, Name = \"Email\" },\n\t\t\t\tnew() { Value = 484, Name = \"Union Ads\" },\n\t\t\t\tnew() { Value = 300, Name = \"Video Ads\" },\n\t\t\t},\n\t\t\tEmphasis = new()\n\t\t\t{\n\t\t\t\tItemStyle = new()\n\t\t\t\t{\n\t\t\t\t\tShadowBlur = 10,\n\t\t\t\t\tShadowOffsetX = 0,\n\t\t\t\t\tShadowColor = Color.FromRGBA(0, 0, 0, 0.5)\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n};\n```\n\nSee the [full C# code](https://github.com/datahint-eu/vizor-echarts/blob/main/src/Vizor.ECharts.Samples/Areas/Pie/SimplePieChart.razor).\n\n## Data loading\n\nMost examples that you will find online have very basic datasets.\nHowever, in real life, data sets are often huge and come from various different sources.\n\nVizor.ECharts allows you to define data in 3 different ways:\n1. Inside the ChartOptions, as demonstrated in most examples.\n2. Using async data loaders in C#, allowing you to fetch data directly from the database.\n3. Using external data sources (e.g.: REST API) fetched by the browser.\n\n### Async data loading\n\nSpecify the DataLoader parameter, this can be a sync or async function.\n```\n\u003cVizor.ECharts.EChart Options=\"@options\" DataLoader=\"@LoadChartData\" Width=\"800px\" Height=\"400px\" /\u003e\n```\n\nTypically in the data loader function you update the Series property. However, you can update any chart option.\n```\nprivate async Task LoadChartData()\n{\n\toptions.Series = ... ;\n}\n```\n\nSee [full example](https://github.com/datahint-eu/vizor-echarts/blob/main/src/Vizor.ECharts.Samples/Areas/Misc/DataLoaderSampleChart.razor).\n\n### External Data Sources (fetch)\n\nThe short version: `ExternalDataSource` is provided as an `EChart` parameter, `ExternalDataSourceRef` is used in the `ChartOptions` to refer to a specific `ExternalDataSource`.\n\nAny `Data` property inside the `ChartOptions` of type `object?` accepts a `ExternalDataSourceRef` allowing you to specify a reference to an external data source.\n```\n... = new ExternalDataSourceRef(dataSource);\n```\n\nAn array of `ExternalDataSource` instances must be supplied to the the `EChart` `ExternalDataSources` parameter.\n```\n\u003cVizor.ECharts.EChart ExternalDataSources=\"@(new[] { extData })\" ... /\u003e\n```\n\nAn example on how to construct an `ExternalDataSource` instance:\n```\n... = new ExternalDataSource(\"https://example.com/api/data/sunburst_simple.json\")\n```\nSee [full example](https://github.com/datahint-eu/vizor-echarts/blob/main/src/Vizor.ECharts.Samples/Areas/Sunburst/SimpleSunburstChart.razor).\n\n\nIt is also possible to provide a *simple* path expression to retrieve only a part of the external data:\n```\n... = new ExternalDataSource(\"https://example.com/api/data/sankey_simple.json\", path: \"nodes\")\n```\nSee [full example](https://github.com/datahint-eu/vizor-echarts/blob/main/src/Vizor.ECharts.Samples/Areas/Sankey/SankeyWithLevelsChart.razor).\n\n\nOr you can execute a function after load to manipulate the loaded data:\n```\n... = new ExternalDataSource(\"/data/les-miserables.json\", ExternalDataFetchAs.Json)\n{\n\tAfterLoad = new JavascriptFunction(@\"function (graph) {\n\t\tgraph.nodes.forEach(function (node) { node.symbolSize = 5; });\n\t\treturn graph;\n\t}\")\n};\n```\nSee [full example](https://github.com/datahint-eu/vizor-echarts/blob/main/src/Vizor.ECharts.Samples/Areas/Graph/ForceLayoutGraphChart.razor).\n\nSee *Javascript functions* chapter in the readme for more details about JS functions.\n\n\nAn `ExternalDataSourceRef` also supports a path expression to select a child object.\n```\n... = new ExternalDataSourceRef(graph, \"nodes\")\n... = new ExternalDataSourceRef(graph, \"links\")\n... = new ExternalDataSourceRef(graph, \"categories\")\n}\n```\n\nSee [example](https://github.com/datahint-eu/vizor-echarts/blob/main/src/Vizor.ECharts.Samples/Areas/Graph/ForceLayoutGraphChart.razor).\n\n\nAdditional credentials, headers, policies, ... can also be supplied.\nSee [ExternalDataSource](https://github.com/datahint-eu/vizor-echarts/blob/main/src/Vizor.ECharts/Types/ExternalDataSource.cs) and [FetchOptions](https://github.com/datahint-eu/vizor-echarts/blob/main/src/Vizor.ECharts/Types/FetchOptions.cs) for more details.\n\n\n**Remark 1:** Never make an `ExternalDataSource` static, you need 1 instance per chart.\n\n**Remark 2:** You will get a `InvalidOperationException` if you try to use `ExternalDataSource` in the chart options.\n\n\n### Datasets\n\nECharts supports dataset transformations.\nThis allows for simplified data retrieval, without the need to have a separate dataset for different charts or chart types.\n\nSee [example #](https://github.com/datahint-eu/vizor-echarts/blob/main/src/Vizor.ECharts.Samples/Areas/Bar/SimpleDatasetBarChart.razor) and [example 2](https://github.com/datahint-eu/vizor-echarts/blob/main/src/Vizor.ECharts.Samples/Areas/Bar/StackedBarTimeSeriesChart.razor) .\n\nSee also the [echarts dataset documentation](https://echarts.apache.org/en/option.html#dataset) and [tutorial](https://echarts.apache.org/en/tutorial.html#Dataset) .\n\n## Javascript functions\n\nECharts sometimes allows you to assign custom functions instead of values.\nThis can be achieved with the `JavascriptFunction` class.\nThe class accepts a string literal containing the Javascript function. The function is evaluated inside the brower.\nBe carefull: syntax errors in the JS function will break the chart serialization.\n\nFor example:\n```\nFormatter = new JavascriptFunction(\"function (param) { return param.name + ' (' + param.percent * 2 + '%)'; }\")\n```\n\nSee [full example](https://github.com/datahint-eu/vizor-echarts/blob/main/src/Vizor.ECharts.Samples/Areas/Pie/HalfDoughnutChart.razor).\n\n## Updating charts\n\nChart options and/or data can be updated. For example: to show a never ending line chart, a temperature gauge, ... .\n\nFirst store a reference to your chart.\n```\n\u003cVizor.ECharts.EChart @ref=\"chart\" Options=\"@options\" Width=\"800px\" Height=\"400px\" /\u003e\n...\nprivate Vizor.ECharts.EChart? chart;\n```\n\nNext modify the chart options.\nModified options have full support for Javascript functions and external data sources.\n```\nprivate async Task UpdateChartAsync()\n{\n\tif (chart == null)\n\t\treturn;\n\n\t// modify chart options\n\t\n\tawait chart.UpdateAsync();\n}\n```\n\nSee [full example](https://github.com/datahint-eu/vizor-echarts/blob/main/src/Vizor.ECharts.Samples/Areas/Gauge/TempGaugeChart.razor).\n\n\n# Filing Bugs / Future Development\n\nSee [Issues](https://github.com/datahint-eu/vizor-echarts/issues) for a list of open tasks/bugs.\n\nPlease provide a runnable sample using the [ECharts Online Editor](https://echarts.apache.org/examples/en/editor.html) and a description of what is wrong with the C# mapping.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdatahint-eu%2Fvizor-echarts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdatahint-eu%2Fvizor-echarts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdatahint-eu%2Fvizor-echarts/lists"}