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
0 answers

Apache Echarts: dataZoom's miniature misrepresents data in a managed plot (the plot drawn over the slider doesn't match the main plot's data)

When I create simple line plot/chart using Apache Echarts I also can add built-in data scaling mechanism: dataZoom. It reaches its main goal, but there is a question to scaled data representation, made by dataZoom. By default, dataZoom doesn't take…
Monerig
  • 51
  • 3
4
votes
1 answer

How to increase number of breaks on x axis in echarts4r plot?

I am making a simple histogram in echarts4r, but I am struggling to override the default x axis labels. For example in the plot below, I would like to have a label at every 3rd, instead of intervals of 5. library(echarts4r) mtcars |> …
L Smeets
  • 888
  • 4
  • 17
4
votes
1 answer

How do you use ECharts' formatter to specify international number formats?

I'm building an API to create ECharts configs and would like the data labels to appear in the correct format based on where the end user is reading the chart from. For example, if a number in a chart is 10,000 I would like it to appear as 10,000 in…
hughess
  • 121
  • 1
  • 6
4
votes
1 answer

Got error when testing vue-echarts component with Jest

I have problem with component testing when using 'vue-echarts' InfoBoard.spec.ts import { render } from '@testing-library/vue' import InfoBoard from '@/components/InfoBoard.vue' describe('InfoBoard', () => { test('Should be truthy', () => { …
Mr.Brown
  • 41
  • 1
  • 2
4
votes
2 answers

Add extra variables to tooltip pie chart echarts4r

I am creating a doughnut chart using echarts4r. Now I am trying to add a custom tooltip and I am able to replicate the examples given here Echarts4r : Create stacked area chart with percentage from total in tooltip and here Displaying extra…
L Smeets
  • 888
  • 4
  • 17
4
votes
0 answers

Echarts.js tooltip not showing with formatter function

Echarts.js on Angular 10 and these are my toltip options : tooltip: { show: true, trigger: 'axis', axisPointer: { type: 'line', lineStyle: { color: eTheme.tooltipLineColor, width: eTheme.tooltipLineWidth, …
PokerJoker
  • 189
  • 1
  • 1
  • 11
4
votes
1 answer

SyntaxError Unexpected token 'export' (nuxt vue-echarts)

Update - fixed, see my comment for link to resolution. I am unable to work around the error "SyntaxError Unexpected token 'export'. I am using vue-echarts 6.0.0-beta.5 echarts 5.0.2, and nuxt 2.15.4. I have echarts v4 working fine within nuxt…
Jeff Bluemel
  • 476
  • 9
  • 22
4
votes
3 answers

echarts format tooltip round decimal numbers

I'm using echarts to graph float values and I want to round the decimal numbers to 2 decimal places in the tooltip from the series (keeping the current tooltip style). My option var is: var truckTurnAroundTimeOption = { color: ['dodgerblue',…
Eduardo G
  • 370
  • 4
  • 17
4
votes
1 answer

Apache ECharts - Brush with line chart range selection

Setting up a line chart with line series and a horizontal selection brush (lineX) doesn't seem to provide a way of reading the selected range values. Changing the series type to bar or scatter seems to work as expected. I'm wondering if this is a…
tamersalama
  • 4,093
  • 1
  • 32
  • 35
4
votes
2 answers

Activate/deactivate chart line using HTML button in ECharts?

I am trying to activate/deactivate a chart line using an HTML button in ECharts js. I do not want to use the ECharts legend to perform this action. I want this HTML button to have this functionality. How is that possible? Thank you! This is my…
costastg
  • 139
  • 1
  • 6
4
votes
1 answer

Echarts show additional info in tooltip

I am using echarts for a scatter plot. Upon hover of a point, I want to show some more data in the tooltip, such as a date and unique ID - this data is not an axis in the plot. So far I have the following below, however I cannot figure out how to…
Kyle Walden
  • 105
  • 1
  • 9
4
votes
0 answers

Test Echarts react component using cypress

I am using ReactEcharts to draw the graphs. Is it possible to test echarts graph tooltip value using cypress? Any link to example will be good starting point
Sowmya
  • 453
  • 1
  • 5
  • 18
4
votes
2 answers

Echarts: How to do a continuous visualmap range by row in a cartesian2d heatmap?

I have an Echarts (v4.8.0) cartesian2d heatmap and I'd like to use a different continuous visualmap range [min,max] for each row (which I could filter by the second parameter value 'y' of each data). Is there a way to do it? I can only think in…
4
votes
3 answers

ECharts - How to prevent changing background color on hover

I would like to prevent background-color from changing when I hover on ECharts map. For example, see this link https://echarts.apache.org/examples/en/editor.html?c=map-usa. How can I hover over the map but the colors of the map remain unchanged. I…
bdfios
  • 657
  • 6
  • 17
  • 29
4
votes
1 answer

Legend not displaying for vue.js project using Echarts

I am working on a vue.js project and I am using the v-charts plugin. I cannot get the legend to display for any of the line graphs I am producing. I am able to produce the appropriate chart with x-axis and y-axis labels and a title for the chart. I…