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
6
votes
2 answers

How to remove padding from Pie Echarts?

I've searched through all similar questions but I couldn't find a solution. The Pie chart I've developed looks like below picture and I want to remove that empty space and force the chart to strech itself inside its container. The config: { grid:…
Pooria Han
  • 597
  • 1
  • 4
  • 19
6
votes
2 answers

Echarts: How to remove bottom space in gauge chart

I'm trying to implement a gauge chart using Baidu's Echarts. The grid properties applied to other charts are applied, but the bottom space is not removed in the gauge chart as shown in the figure below. Actually, the grid property removes the space…
Chris Joo
  • 577
  • 10
  • 24
6
votes
0 answers

Adding scrollbar to a custom series type in Echarts

I have create a custom series type to display the labels in Y Axis. When the label is large, then text is overlapping the main grid. I need to clip that overlapping text and also need to provide a scrollbar to display the remaining text. See the…
Vijay Nirmal
  • 5,239
  • 4
  • 26
  • 59
6
votes
2 answers

"echarts"' has no exported member named 'EChartOption'. Did you mean 'EChartsOption' instead?

I am using Angular 9 along with "ngx-echarts": "5.2.2" and "echarts": "5.0.0" Everything works fine accept while setting icon: 'circle' for legends. It says below thing. Type '{ icon: string; top: string; left: string; orient: "vertical"; }' is not…
Jayesh Dhandha
  • 1,983
  • 28
  • 50
6
votes
2 answers

How to place the text inside donut chart (echarts)

I'm new one of echarts, I need to set the text in centre of donuts chart. I tried and google it no use, I tried it by html also but I cant able to achieve it. Please any one suggest me, How can I resolved it. Thanks in advance. In options I add the…
Rockey
  • 131
  • 2
  • 4
6
votes
2 answers

How can I show all series in tooltip when series does not have same time values

I have a Chart that shows multiple time series. The different time series does not sample at the same time. Is there a way I can show all series in the tooltip? In the example, you can see that all series are included in the tooltip for the 2 first…
Kim
  • 4,593
  • 5
  • 21
  • 18
6
votes
3 answers

I am not able to change the legend icon colour in Echarts

The issue I'm having with echarts (v4.0.4) is that I'm not able to change the legend hover colour on an icon to match my bar graph hover colour that I have provided using series[].empahsis.itemStyle.color. Looking at the echarts legend api I have…
Stralos
  • 4,895
  • 4
  • 22
  • 40
6
votes
1 answer

How to make echart x-axis type time to display a time period for one day

I am using echarts and i am having problems when trying to make echarts display a time period of one day on the x-axis. Here is my code this.area = { color: ["#009C95","#21ba45"], title : { text: 'Fuel History', textStyle: { …
Geoffrey Kimani
  • 133
  • 1
  • 1
  • 7
6
votes
3 answers

Using 'time' type on X axis of ECharts for timeseries graphing

I'm using ECharts 4.0.4 (http://echarts.baidu.com/) to graph some sensor data with timestamps on the X axis. Have tried with legacy series data and datasets (new on v4), but 'time' axis type won't work properly. With 'category' it works fine: var…
6
votes
1 answer

Set value on top of bar charts- echarts

How to set value on the top of a bar chart in e-charts / ngx-echarts library? Let me know if any attribute is present for the same, I am not able to find any of the attribute? The result I desire for: The result I am able to achieve so far: The…
M.Chandna
  • 99
  • 2
  • 6
6
votes
1 answer

add drag option Polar in Echarts by baidu

I'm using Echarts by Baidu 3.0 and I'm wondering if it is possible to add drag option to a polar chart. The drag option is explained here I could use it only with the scatter chart. Here is the Polar chart example. thanks
khaled_bhar
  • 257
  • 1
  • 4
  • 21
6
votes
1 answer

ECharts generated label overlaps with dataZoom

Using ECharts I am giving it a data series that consists of a number of data against really values. (e.g plotting stock prices). I also have data zoom enabled. My issue is that the generated X axis' labels overlap with the dataZoom. I can't…
Conor
  • 441
  • 6
  • 12
6
votes
2 answers

Echarts3.0 display percent on y-axis in stacked bar chart

Using Echarts3.0 in Vuejs2.0 component, I am trying to assign percent on y-axis in a stacked bar chart. I tried boundaryGap, splitnumber, etc, but none of them worked. But i cannot achieve it, Anyone has idea how can i get % on y-axis? export…
WonderHeart
  • 678
  • 10
  • 28
6
votes
4 answers

echarts dataZoom event does not return timestamp but only percentages

I got a chart with a dataZoom component. The x-axis is of type time. Zooming and roaming the chart works perfectly. But when I listen for the dataZoom event to hook into the zooming process I only get percentage values (0-100) from the event as…
ManuKaracho
  • 1,180
  • 1
  • 14
  • 32
5
votes
3 answers

how do I clear a apache Echart? I need to re-initialize it

I have Stacked Horizontal Bar chart on a single page, and each chart changes based on what the user selects (Drop Down Select). I have an ajax call that retrieves the data, so the data varies and is dynamic based on user selection. I'm having a…
1 2
3
83 84