apache / apache/echarts

[Feature] Line mode, detect missing time points and choose weither connect line or not or with which threshold

Open
#20,573 1 comment 0 reactions 0 assignees View on GitHub
en new-feature pending
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### What problem does this feature solve?

Seems like Echarts when it's 'line' mode is not able to understand a missing time point, it just connects the line.

const data = [
{ name: '2024-04-13', value: ['2024-04-13', '100'] },
{ name: '2024-04-15', value: ['2024-04-15', '400'] },
{ name: '2024-04-17', value: ['2024-04-17', '500'] },
{ name: '2024-04-18', value: ['2024-04-18', '600'] },
];
series: [{ data, type: 'line' }, ]

this data with line type:
![image](https://github.com/user-attachments/assets/7148fe05-0bec-48df-bac9-1c471a8c204e)

the same data with ‘bar’ type, will show empty time data points
![image](https://github.com/user-attachments/assets/31b25552-72ec-4f0b-a391-baabdfe4d036)

I noticed that if the series are different, Echarts is already able to generate the empty space, so I would like to achieve a similar result but without splitting the original serie in multiple series:

![image](https://github.com/user-attachments/assets/4d3c1392-f2a6-43a9-adac-f48ee5224dfb)

this was done with this data:
const data1= [
{ name: '2024-04-13', value: ['2024-04-13', '100'] },
{ name: '2024-04-14', value: ['2024-04-14', '300'] },
];
const data2 = [
{ name: '2024-04-16', value: ['2024-04-16', '400'] },
{ name: '2024-04-17', value: ['2024-04-17', '450'] },
];
const data3 = [
{ name: '2024-04-19', value: ['2024-04-19', '500'] },
{ name: '2024-04-20', value: ['2024-04-20', '200'] },
];
series: [
{ data: data1, type: 'line' },
{ data: data2, type: 'line' },
{ data: data3, type: 'line' },
]

### What does the proposed API look like?

It would be nice to be able to choose whether or not to connect/disconnect the line.

It would be very nice to solve this similar to how Grafana solves this problem: https://grafana.com/docs/grafana/latest/panels-visualizations/visualizations/time-series/#disconnect-values (using never or with a Threshold )

**Disconnect values**
Choose whether to set a threshold above which values in the data should be disconnected.

Never - Time series data points in the data are never disconnected.
Threshold - Specify a threshold above which values in the data are disconnected. This can be useful when desired values in the data are of a known size and/or within a known range, and values outside this range should no longer be connected.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.