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.

Filter by
Sorted by
Tagged with
0 votes
0 answers
7 views

Vue3+gridstack js responsive

i am trying to create a responsive dashboard in vue3 using gridstack js, the problem is that when i instance a component inside a widget and resize the widget, the component is not resized, i mainly ...
JDGab's user avatar
  • 1
1 vote
0 answers
8 views

eCharts(4r) bar plot - how to prevent x-axis categories from being plotted if there is no data

How can I adjust an echart so that if there is no data for a combination of x-axis category and grouping variable, the empty space is removed? ie in the chart below, the group2/A combo and the group1/...
jzadra's user avatar
  • 4,032
0 votes
1 answer
25 views

On graph data is there any way to add margin between nodes and links

I would like to put a space between nodes and connection lines on graph chart. I tried to draw custom connection links between nodes, but there is no way to do that or I couldn't find anything. Look ...
Bekir Kaplan's user avatar
1 vote
1 answer
23 views

How to add different color for your liquid using e_liquid() in R

I'm trying to create a liquifill chart using e_liquid() from echarts4R library. So this is a code from https://echarts4r.john-coene.com/articles/chart_types.html#liquifill: liquid <- data.frame(val ...
Golem's user avatar
  • 156
0 votes
1 answer
54 views

Can we display more than one property from the geo.json file in the ToolTips in Echarts maps?

I am implementing Apache echarts maps in my angular application. The '.geo.json' file I use to import the map has two properties in the properties array of the geo.json file. One is the 'name' and the ...
MiMoy's user avatar
  • 11
1 vote
1 answer
38 views

How to plot multiple pie charts with Apache ECharts using dataset and source

I have a dataset like this: Headers Array: ["a", "b", "c"] Data Array: [[5, 15, 25], [10, 20, 30]] I want my chart to look like the chart below, but I prefer not to pre-...
a5hk's user avatar
  • 7,564
0 votes
0 answers
14 views

eChart... How do I refine the polar graph?

I need to implement this picture . GOAL CURRENT, MINE I'm done like this, but I have no idea to complete, gpt said wrong answer. As shown above, How can I paint the edges with the background color(...
Shale's user avatar
  • 338
0 votes
1 answer
33 views

How can I paint only graph area in echart, not axis label

I am implementing this screen with echart library ㅠ_ㅠ var option = { backgroundColor:"#fff" This echart background color option makes the entire Grid white like this. But how can I make ...
Shale's user avatar
  • 338
1 vote
1 answer
25 views

How to get the real splitNumber and interval of a axis of a Echarts instance

The default splitNumber for a axis like xAxis or yAxis is 5. As mentioned in Echarts documentation, this number may be adjusted based on readability. However, the adjusted number will be not given ...
Yang's user avatar
  • 13
0 votes
1 answer
57 views

How to show positive and negative series sum value for the stacked bar chart top and bottom column in Apache Echart.?

I have currently using Apache Echart (version - 15.0.2) in angular 15. I have created a stack bar chart, here I have created a sum of series values, If I am getting positive value able to show the top ...
Elavarasan's user avatar
0 votes
0 answers
34 views

Add tooltip option to ssr chart with echarts

I generate a chart thanks to echarts in server-side : getChart.ts const chart = echarts.init(null, null, { renderer: 'svg', ssr: true, width: 400, height: 300 }); chart.setOption({...
Putxe's user avatar
  • 1,054
0 votes
0 answers
44 views

Display legend in a stacked bar chart using ngx-echarts in Angular

I have a stacked bar chart which contains different categories of data based on month. I'm displaying it as a stacked bar chart, but I also need to display the legend to go along with the data so that ...
cozybutmessy's user avatar
0 votes
0 answers
19 views

How do I ensure that charts and dataZoom line up in ECharts?

current problem: I need to show two polylines in dataZoom, But now what I've achieved is this: expectation: dataZoom is the same as shown in the diagram.What should I do? Repeat step access: https://...
ubbcou's user avatar
  • 49
0 votes
1 answer
45 views

How to handle irregular time series charting

I have some data I'm getting from an api and graphing it. This is a sample of the data [ { "id": 10516560, "username": "acrawford69", "...
ACrawford's user avatar
0 votes
0 answers
16 views

Echarts xAxis dates overlapping and zooming echarts, forcing first date come without sequence/interval

enter image description here echart version used : 5.4.2 Vue 3 application. enter image description here The issue is regarding the xAxis labels, they are overlapping each other, the xAxis in my case ...
Saqeb Khan's user avatar
0 votes
1 answer
31 views

Echarts Sunburst Child with 2 Parents

I'm trying to create a sunburst where a child element can overlap 2 parent elements, like in the picture below. However, I haven't been able to find any way of recreating this. Does anyone have any ...
beginnercoder's user avatar
0 votes
1 answer
24 views

ECharts Xaxis name vertical position at top

my code in echarts is: option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], verticalAlign: 'left', axisLabel: { inside: true, }, ...
efxlab's user avatar
  • 15
0 votes
0 answers
25 views

How to Disable Drag-and-Drop Zooming or Set a Minimum Interval in React ECharts for a Line Chart?

I've been using React ECharts for a line chart, and I'm having trouble with zooming in on the data. I've managed to set a specific interval on the x-axis, but it changes when I try to drag and drop ...
Manicka Vasagar's user avatar
0 votes
0 answers
19 views

Need suggestions how to add hide/unhide and pin/unpin features on tooltip of bar graph

I Wanted to implement pin/unpin and hide/unhide feature on bar chart using echart-for-react. suggest me a way, so i can implement it my react component please find below configuration object for chart....
Pawan wani's user avatar
0 votes
1 answer
23 views

Types of property 'boundaryGap' are incompatible

Try to create the option for echarts, when I try to merge the initialXAxis and xAxis options, got an TS type error: Type '{ type: "category"; data: any[]; axisLabel: { formatter: (value: ...
Lin Du's user avatar
  • 88.9k
0 votes
0 answers
32 views

Echarts4r + Boxplot + Jitter points: How to make this combination work properly?

How to make this combination work? I can create the boxplot. I can create a scatter plot with jittered points, but I cannot put them together. Does anyone have any idea? The idea is to continue using ...
Wlademir Ribeiro Prates's user avatar
0 votes
1 answer
21 views

How to create graph with complex nodes using echarts and react?

I need to create a graph with complex nodes like this The only vizualization library I am familiar with is echarts, but I can't find a way to do this with echarts. Closest call is rich text on label, ...
Wilkolek's user avatar
1 vote
1 answer
34 views

Synchronizing zoom states between two ECharts in React leads to zoom "snap back"

I'm working with ECharts in a React application, and I've encountered an issue when synchronizing the zoom state between two line charts. The desired behavior is that when one chart's zoom is changed, ...
adjuric's user avatar
  • 170
0 votes
1 answer
22 views

ECharts visualMap with severals lines for each series

My modified ECharts option code can be copied in this url: https://echarts.apache.org/examples/en/editor.html?c=line-gradient or on codesandbox.io : https://codesandbox.io/s/apache-echarts-demo-forked-...
efxlab's user avatar
  • 15
0 votes
2 answers
49 views

Echarts line chart. Event on click line

How can I fire event on click line (not dots) on line chart using Echarts. This code fires only if I click the dot on chart myChart.on('mouseup', function (params) { console.log(params); }); Do you ...
autumnrustle's user avatar
1 vote
0 answers
36 views

Force a 2 indexes ECharts plot to match 0 on both Y axis

I have the following plot, which uses two axes: one for the differences and another for the accumulative differences. I would like to force that both y axis match on 0, scaling the second faster ...
Rodrigo_V's user avatar
  • 140
0 votes
0 answers
129 views

Different background color for tooltip based on seriesIndex?

Below is my Apache Echarts tooltip. How can I have different backgroundColor based on my series Index? For example from seriesIndex 0-30 having white and > 30 to be red. Also for my textStyle I ...
Strike's user avatar
  • 77
0 votes
1 answer
28 views

Echarts hover vertical line on multiple graphs

This is my config with echarts, it draw actually 2 graphs with the same instance of echarts : data = [ [1,82.60277,"VO",1441.74], [2,82.60302,"VI",1441.87], [3,82.60327,...
efxlab's user avatar
  • 15
0 votes
1 answer
36 views

Echarts markLine doesn't appear. (Bar Chart)

im trying to create two markLines with my averages (yearly and last 13 weeks) the first markline will be my yearly average with a small tooltip position around January. My second one will be my last ...
Strike's user avatar
  • 77
0 votes
1 answer
57 views

How to Dynamically Set MarkArea Labels Background Color Based on X-axis Range in Apache ECharts?

I am currently working on a project involving Apache ECharts, and I'm trying to achieve a dynamic visual effect with markArea labels. Specifically, I want to dynamically set the background color of ...
Yash1th's user avatar
  • 77
0 votes
1 answer
41 views

ECharts how to hide pie but show the labels?

I try following this example to make a 3D pie chart. But something went wrong when I set the itemStyle.opacity to 0. This is what it supposed to be. The 2D pie was hided, and the labels were still ...
XUX's user avatar
  • 99
0 votes
0 answers
15 views

How to add padding-x to inside echarts?

I using echarts to create a chart in angular. I want the chart to be completely stuck to the edges of its parent and have no padding outside of chart. I using this options: this.options = { grid: { ...
bardia's user avatar
  • 3
0 votes
2 answers
41 views

Echarts responsive Grid and Legend

I am looking for a way to get the bounding box of the echarts (SVGRenderer) legend item to get the height. I want to avoid an overlapping of legend and grid item.
StephanB's user avatar
  • 315
1 vote
1 answer
33 views

Apache Echarts YAxis ticks not visible when XAxis value is below zero

I'm facing an issue with Apache Echarts where the YAxis ticks are not visible when the XAxis value is below zero. A dark line is visible at the XAxis value 0 with axis ticks, which is also not ...
Yash1th's user avatar
  • 77
0 votes
0 answers
41 views

Splitting toolbox feature dataZoom into components

Having trouble splitting dataZoom into separate components, idea is [5] will have different configuration from the rest. Split works fine outside toolbox, doesn't work inside of toolbox. There is a [5]...
sinebur's user avatar
0 votes
1 answer
36 views

How to create vertically connected tree map via Echart

This code below is the example of treemap using Echart, what i expect is to order each series vertically and then connected to each series, then sizing by the data. In this example, each series will ...
user22362879's user avatar
0 votes
0 answers
21 views

How to default display echarts all tooltip

I didn't konw for default to show all tooltip for a echarts map. this is my tooltip: tooltip: { // trigger: 'none', trigger: 'item', position: function (point, params, ...
gool BEAR's user avatar
0 votes
0 answers
165 views

How does echarts fill the width of the parent element?

I have encapsulated an electrocharts component in Vue to display charts. It receives three parameters from the parent component: chartWidth, chartHeight, and options. When the chart is wrapped in a b-...
nieyuan1980's user avatar
2 votes
1 answer
92 views

How does the API for ECharts LinearGradient work?

As illustrated in this question we can add a linear gradient to an echart like this: areaStyle: { color: new graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, ...
Ole's user avatar
  • 42k
0 votes
0 answers
35 views

Removing top,bottom extra space without height changing?

Hello everyone is it possible to remove top and bottom white space without changing my chart height? grid: { bottom: 0, top: 0, } The above is not a good option. Destroys my graph because ...
Strike's user avatar
  • 77
0 votes
1 answer
16 views

Is there someting similar with ApexCharts dashedArray for Echarts?

In ApexCharts there is a property inside stroke called dashedArray dashArray: Number || Array of Numbers Creates dashes in borders of svg path. Higher number creates more space between dashes in the ...
Strike's user avatar
  • 77
0 votes
0 answers
73 views

Cannot add lines to a chart using Vaadin SOCharts

I've tried almost everything to solve it by myself but i cannot find a way to create a line with a start position and an end position and add it to a chart. From the documentation that I found on HERE ...
chillin.killer's user avatar
0 votes
1 answer
41 views

When data are zeros show on y axis only zeros. (ECharts)

Hello everyone here is my axisLabel formatter yAxis: { show: true, type: "value", min: 0, // max: function (value) { // return Math.ceil(value....
Strike's user avatar
  • 77
2 votes
1 answer
47 views

Is there a way to create an half pie chart filled with dots in ECharts?

I would like to create a chart like this in ECharts: Is there a way? I tried using an example from the ECharts page, but after trying to cut the chart in half, some dots were missing and the endAngle ...
zTekstorm's user avatar
0 votes
1 answer
36 views

Apply colour to filled area in line chart matching line colour with visualMap

I came across an almost complete solution for my needs in https://github.com/apache/echarts/issues/8034, however, the fill colour isn't being applied correctly, as seen in: and Compared to what the ...
jessicah's user avatar
  • 945
0 votes
1 answer
45 views

Configuring an ECharts themeRiver type chart

I am having trouble with some advanced configuration of an ECharts themeRiver chart. You can see my implementation here, and a codepen is attached below. Here are my questions: How can I remove the ...
GilShalit's user avatar
  • 6,189
0 votes
0 answers
57 views

Implementing a tree diagram

I would like to implement a tree diagram in the frontend. In this tree diagram, the child nodes need to be arranged vertically, rather than horizontally. I have tried using echarts to accomplish this,...
nieyuan1980's user avatar
0 votes
0 answers
45 views

Resizing ECharts Drag demo breaks dragging?

When the ECharts Draggable demo is resized it breaks dragging. This is a Stackblitz with the Demo running in Angular. If it is opened in a new tab by clicking the "Open in New Tab" button, ...
Ole's user avatar
  • 42k
0 votes
1 answer
39 views

In echarts, after the node is dragged and scaled, the node returns to its original position

I am a new user of echarts. When I set coordinateSystem: 'cartesian2d', the roam property does not take effect, so I use dataZoom to scale. However, I found that after I drag the node and scale it, ...
miniWorld's user avatar
1 vote
1 answer
52 views

line chart with log y axis and two series gets clipped

I am trying to make a line chart using echarts. The chart has a log scale on the y axis and has two series. The code is shown below (hopefully it will work, and is also available on codepen. Strangely,...
punkish's user avatar
  • 13.6k

1
2 3 4 5
26