Questions tagged [echarts]

Apache ECharts is a free open-source charting and data visualization library written in JavaScript. ECharts provides a powerful, interactive charting and data visualization library and framework for web browser, mobile App and backend usage.

Description

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.

Currently (May, 2019) ECharts is an incubator project of Apache Software Foundation. Please check its incubator status here

History

ECharts (a contraction of Enterprise Charts) was previously a commercial charting solution originally intended to address the report need of the Company's various business systems, such as Baidu Promotion (凤巢), Advertising Manager (广告管家).

Previously we used Flash to fulfill those needs, but the problem is, due to Baidu's highly clear-cut division of labor, there is a special team in charge of Flash. As a result, everything – from the design of data interface to personalized needs - has to be negotiated and agreed upon, leaving little room for front-end engineers to control completely. Moreover, there is no Flash common to all the scenes in a system. Worse still, Steve Jobs, the co-founder and then CEO of Apple Inc., insisted that Apple wouldn't allow Flash on the iPhone, iPod touch and iPad. For all these reasons, and given the soaring popularity of html5, we decided to try something else. Therefore in early 2012 Lin Feng (Kener), the then front-end technical director of Baidu Promotion, tried to make charts via Canvas in the Data Platform Project of Baidu Promotion. He wrote a whole new lightweight Canvas library ZRender, which is actually the prototype of ECharts, albeit miles from the one in front of you now.

References

1257 questions
4
votes
2 answers

Change color of specific echarts bar using dataset and encode API

I have an bar chart made with echarts in Angular (ngx-echarts), using the dataset + encode API: const options: EChartOption = { tooltip: {}, dataset: {source: dataSource}, xAxis: { name: xAxisLabel, nameLocation: 'middle', nameGap:…
liamhawkins
  • 1,301
  • 2
  • 12
  • 30
4
votes
1 answer

Hide data series from tooltip

How can I exclude a specific data series from showing in the tooltip with tooltip.trigger = axis? I'm asking because I have a very complex graph with one line chart, two bar charts and one heatmap. And the heatmap has so many data that the tooltip…
user8977154
  • 363
  • 1
  • 4
  • 14
4
votes
1 answer

How to customize Echart series label text?

I need to show custom Series label instead of data array value. here my series data array is data: [820, 932, 901, 934, 1290, 1330, 1320], When i enable label : label: { show: true, position: 'top', color: "black", …
ArunKumar
  • 179
  • 1
  • 1
  • 11
4
votes
0 answers

chrome-aws-lambda rendered image is different than chrome

Environment chrome-aws-lambda Version: 2.0.1 puppeteer / puppeteer-core Version: 2.0.0 OS: Amazon Linux 2 Node.js Version: 10.x Lambda / GCF Runtime: nodejs10.x Expected Behavior Text lines are not overlapped. (This image is rendered from my PC…
wgihan
  • 87
  • 4
4
votes
1 answer

echarts: dataZoom slider doesn't show the correct data preview

I'm trying to create a zoomable line chart with echarts. The chart should show at first only 5 days. I use the dataZoom type 'inside' and also 'slider'. But the slider box isn't shown properly. I played around a bit with the code, but I'm not able…
Nele
  • 83
  • 1
  • 13
4
votes
1 answer

auto-resize for vue echarts is not working

I have tried chart using Echart library.when i try to resize page the chart is not resizing .I am using auto-resize attribute
Anukul Bansod
  • 116
  • 1
  • 6
4
votes
0 answers

Reduce gap between bars in Echart

Is there a way to reduce gap between BARS in a bar chart made using Echarts. I tried the option barCategoryGap as mentioned in the docs but it had no effect. option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed',…
Peter
  • 10,492
  • 21
  • 82
  • 132
4
votes
1 answer

How to set different weight of line according to the data?

The problem I'm creating a tree diagram using Echarts. I want to change the weight of the line according to the value of data. Expected image: Image is for illustration purposes. It would be helpful if you could give me advice. The code This is my…
megstar
  • 41
  • 3
4
votes
1 answer

How to create Forecast Chart using ECharts

I want to create a forecast chart with Actual (a line chart) and projected values (a dotted chart). Here is an example made with Excel: I want to create the same chart using the ECharts library but I couldn't find any example to use from their web…
Programmer Man
  • 1,314
  • 1
  • 9
  • 29
4
votes
3 answers

Catching click event in line graph(ngx-echarts)

I am using echarts Angular version- ngx-echarts in my project. I want to catch click event done on a line graph. chartClick or any of the mouse event of ngx-echarts library is not working for line graphs but they are working for barGraphs. How can I…
Anisha
  • 45
  • 1
  • 5
4
votes
2 answers

ECharts: change line color

This is my EChart init code: var option = { tooltip : { trigger: 'axis' }, calculable : true, xAxis : [ { type : 'category', boundaryGap : false, data : cat } ], yAxis : [ { …
gigapico00
  • 417
  • 1
  • 7
  • 24
4
votes
1 answer

How to display sum stack bar in echarts

I'm using eChatrs as chart library. Needed chart should look like this : What i need, is to show totals above each column. What is the best practise for doing this ?
voice
  • 830
  • 10
  • 17
4
votes
1 answer

How to convert numbers to currency in echarts?

I want to convert numbers to Turkish Lira currency in my charts that was built with echarts.js (v1) (https://ecomfe.github.io/). You can see my charts and echarts js codes below. My chart: As you can see the example, the numbers are not readable…
John Valdetine
  • 416
  • 2
  • 9
  • 26
4
votes
1 answer

custom color gridLine echarts

its possible customize color of the gridLine in eCharts? I want to custom the color of horizontal white line
Medina
  • 47
  • 2
  • 4
4
votes
2 answers

TypeError: Object(...) is not a function in Ionic 4 app with ECharts

I'm trying to integrate ECharts into an Ionic (4) app following this guide: https://golb.hplar.ch/2017/02/Integrate-ECharts-into-an-Ionic-2-app.html I installed all the modules as follows (i add "ionic info" output): D:\e-charts-debug>ionic info √…
Ansharja
  • 1,237
  • 1
  • 14
  • 37