echarts | Apache ECharts is a powerful , interactive charting | Chart library

 by   apache TypeScript Version: 5.5.0-rc.2 License: Apache-2.0

kandi X-RAY | echarts Summary

kandi X-RAY | echarts Summary

echarts is a TypeScript library typically used in User Interface, Chart, WebGL, D3 applications. echarts has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can download it from GitHub.

Apache ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly customizable charts to your commercial products. It is written in pure JavaScript and based on zrender, which is a whole new lightweight canvas library. 中文官网 | ENGLISH HOMEPAGE.

            kandi-support Support

              echarts has a medium active ecosystem.
              It has 55504 star(s) with 19503 fork(s). There are 2003 watchers for this library.
              There were 3 major release(s) in the last 6 months.
              There are 2198 open issues and 14836 have been closed. On average issues are closed in 389 days. There are 114 open pull requests and 0 closed requests.
              It has a neutral sentiment in the developer community.
              The latest version of echarts is 5.5.0-rc.2

            kandi-Quality Quality

              echarts has 0 bugs and 0 code smells.

            kandi-Security Security

              echarts has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
              echarts code analysis shows 0 unresolved vulnerabilities.
              There are 0 security hotspots that need review.

            kandi-License License

              echarts is licensed under the Apache-2.0 License. This license is Permissive.
              Permissive licenses have the least restrictions, and you can use them in most projects.

            kandi-Reuse Reuse

              echarts releases are available to install and integrate.
              Installation instructions, examples and code snippets are available.
              It has 130883 lines of code, 0 functions and 1236 files.
              It has low code complexity. Code complexity directly impacts maintainability of the code.

            Top functions reviewed by kandi - BETA

            kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.
            Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of echarts
            Get all kandi verified functions for this library.

            echarts Key Features

            No Key Features are available at this moment for echarts.

            echarts Examples and Code Snippets

            how do i make echarts resize together with the react-grid-layout?
            Lines of Code : 45dot img1License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            const chartRef = useRef();
            const size = useComponentSize(chartRef);
            useEffect(() => {
              const chart = chartRef.current && echarts.getInstanceByDom(chartRef.current);
              if (chart) {
            }, [size]);
            NullInjectorError: No provider for InjectionToken NGX_ECHARTS_CONFIG
            Lines of Code : 25dot img2License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            import { NgxEchartsModule } from 'ngx-echarts';
              imports: [
                  echarts: () => import('echarts')
            export class AppModule { }
            import { NgxEcha
            can't see any chart with echart in angular 7 by programmatically updating
            Lines of Code : 78dot img3License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            import { Component, OnInit,OnDestroy, Input, Output,ViewChild, EventEmitter,ElementRef, OnChanges } from '@angular/core';
            import { EChartOption } from 'echarts';
            import * as echarts from 'echarts';
              selector: 'app-admin-cha
            Importing and using Echarts results in [object error] in Internet Explorer
            Lines of Code : 4dot img4License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            import ECharts from "vue-echarts/components/ECharts.vue";
            import ECharts from 'vue-echarts'
            Load and use echarts.format in Angular 6
            Lines of Code : 4dot img5License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            import * as echarts from 'echarts'
            formatUtil: any = (echarts).format;
            Connect echart graphics with Java ServerFaces
            Javadot img6Lines of Code : 150dot img6License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            private String titulo;
            private String dataY;
            private String chartDataTic;
            private String chartDataComp;
            private String chartDataImpr;
            private String chartDataComu;
            private BigDecimal miny

            Community Discussions


            Why yAxis axisLabel align left is resulting position label inside the bar in Apache ECharts
            Asked 2022-Mar-29 at 04:40

            The expetacion result is like this post: How to set labels align left in Horizontal Bar using chart.js? but it's implemented in Apache ECharts

            Any idea?



            Answered 2022-Mar-24 at 16:42

            You can set margin for axisLabel, to make the labels visible. Updated your code snippet



            The unauthenticated git protocol on port 9418 is no longer supported
            Asked 2022-Mar-27 at 13:23

            I have been using github actions for quite sometime but today my deployments started failing. Below is the error from github action logs



            Answered 2022-Mar-16 at 07:01

            First, this error message is indeed expected on Jan. 11th, 2022.
            See "Improving Git protocol security on GitHub".

            January 11, 2022 Final brownout.

            This is the full brownout period where we’ll temporarily stop accepting the deprecated key and signature types, ciphers, and MACs, and the unencrypted Git protocol.
            This will help clients discover any lingering use of older keys or old URLs.

            Second, check your package.json dependencies for any git:// URL, as in this example, fixed in this PR.

            As noted by Jörg W Mittag:

            There was a 4-month warning.
            The entire Internet has been moving away from unauthenticated, unencrypted protocols for a decade, it's not like this is a huge surprise.

            Personally, I consider it less an "issue" and more "detecting unmaintained dependencies".

            Plus, this is still only the brownout period, so the protocol will only be disabled for a short period of time, allowing developers to discover the problem.

            The permanent shutdown is not until March 15th.

            For GitHub Actions:

            As in actions/checkout issue 14, you can add as a first step:



            Error: Node Sass does not yet support your current environment
            Asked 2022-Mar-04 at 13:55

            When I start my react project in Fedora 32 using command yarn start, it shows error like this:



            Answered 2022-Mar-04 at 13:55
            First solution

            First, make sure your node.js version is not superior than the latest stable version(currently 16.14.0). You can check here on

            Then, to compile .scss or .sass files you should be using sass package instead of node-sass. Fo that do :



            Use Ajax Json Data to Chart
            Asked 2022-Feb-13 at 09:14

            I have ajax response like this



            Answered 2022-Feb-13 at 09:14

            If you want to pass the Day data as an array to xAxis data you should make an array like this:



            Custom background for area's chart
            Asked 2022-Jan-28 at 03:50

            I'm trying to create a chart with echarts.apache which resembles the chart below...also if any other charting library makes this easier then please shout!

            The chart needs to have Coloured areas which highlight the data, for ex :

            • xAxis (start: 0, end: 4) and yAxis (start: 0, end: 6) => Green background

            • xAxis (start: 0, end: 4) and yAxis (start: 0, end: -6) => Blue background

            • xAxis (start: 0, end: -4) and yAxis (start: 0, end: 6) => Red background

            • xAxis (start: 0, end: -4) and yAxis (start: 0, end: -6) => Orange background

            I'm at a slight loss on how to do this natively by extending echarts.apache so any help would be appreciated for custom chart examples or an idea of how to execute this.

            I can only get the background of the full chart example



            Answered 2022-Jan-28 at 03:50

            Use 'MarkArea' to go to mark the four quadrants.



            Show tooltip in ECharts given all input values null
            Asked 2022-Jan-20 at 21:45

            I got an issue with showing hover tooltips with ECharts line graph when all input values of the graph are null.

            The use case is a graph that might have some null/undefined values at certain points in time. For normal values, the graph would show the tooltip as usual. Whenever the value of the graph is null or undefined, I want the graph still show the hover tooltip but with custom format, for instance, 'N/A'.

            The example code snippet is a simple EChart configuration that I took from EChart line graph examples and change the input data to null.



            Answered 2022-Jan-20 at 21:45

            This is actually a bug in ECharts 5.2 and previous versions. I opened a ticket with the ECharts team and they will fix and release the fix in v5.3.0.

            Relevant bug ticket:



            Change the legend in highcharts heatmap to show instead of a color bar, a set of fixed icons with hide and show on click
            Asked 2022-Jan-13 at 11:25

            Is it possible to have the same feature that you get in Apache echarts. Refer to the following Apache echarts example in JS snippet, where the legend given by type:"piecewise" allows the user to hide on click particular color values. How can i get the same thing in Highcharts. The usual heatmap shows a bar legend, but I want the conventional legend that you see in line or bar charts. Thanks.



            Answered 2022-Jan-13 at 11:25

            Yes, it is possible with Highcharts. You need to only use data-classes in color-axis settings.



            Convert json data to object
            Asked 2022-Jan-13 at 07:25

            Good Day Developers!

            I'm facing issue in JSON object received from MVC controller to AJAX success request.

            The response which received is below.



            Answered 2022-Jan-13 at 05:43

            you can just map through array and extract values into another array



            Is it possible to rotate whole echarts Instance in Apache ECharts?
            Asked 2022-Jan-05 at 08:08

            I'm new to echarts so please forgive me if this is stupid newbie request. I'm trying to rotate whole chart just like in this example of Vega Edge Bundling Example. On the right corner there is a tool and one option is also "rotate". Example Image of Vega I would like to do the same thing (rotate whole graph) in echarts but I can't find a way to do it. If it is possible to do it please let me know how I can do it. Thank you for any reply!



            Answered 2022-Jan-05 at 08:08

            It's not perfect but I tried.
            I use function to change startAngle,I don't know why the rotation is delayed.



            How to group weekly data in it respective months and plot using Apache Echarts
            Asked 2021-Dec-15 at 19:58

            I have the weekly avg from last 5 years, last year, and the year to date.

            I would like to show them in a line graph, but showing the respective months in the xaxis...

            for example and based on this year:

            January has 4 weeks, so xaxis shows jan and there are 4 marks in the chart representing weeks 1,2,3 and 4;

            February also has 4 weeks, so xaxis shows feb and there are 3 marks in the chart representing week 5,6,7 and 8; and so on;

            i'm using:



            Answered 2021-Dec-03 at 22:26

            [UPDATE 1]

            I added a function that translate the week number to the respective month:


            Community Discussions, Code Snippets contain sources that include Stack Exchange Network


            No vulnerabilities reported

            Install echarts

            Build echarts source code:. Execute the instructions in the root directory of the echarts: (Node.js is required). Then the "production" files are generated in the dist directory. More custom build approaches can be checked in this tutorial: Create Custom Build of ECharts please.


            If you wish to debug locally or make pull requests, please refer to the contributing document.
            Find more information at:

            Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items

            Find more libraries
          • npm

            npm i echarts

          • CLONE
          • HTTPS


          • CLI

            gh repo clone apache/echarts

          • sshUrl


          • Stay Updated

            Subscribe to our newsletter for trending solutions and developer bootcamps

            Agree to Sign up and Terms & Conditions

            Share this Page

            share link