You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by "jcasadogp (via GitHub)" <gi...@apache.org> on 2024/05/28 15:06:49 UTC
[I] Overlapping labels in xAxis with type="time" [echarts]
jcasadogp opened a new issue, #19980:
URL: https://github.com/apache/echarts/issues/19980
### Version
5.5.0
### Link to Minimal Reproduction
https://echarts.apache.org/examples/en/editor.html
### Steps to Reproduce
The data and the code are provided above so the chart is created when running it. The plot looks like this:
### Current Behavior
The problem is that the x axis labels overlap and I have not found a way of solving this.
I have seen the parameter interval in the [documentation](https://echarts.apache.org/en/option.html#xAxis.interval), but I think it cannot be used with type='time' in the xAxis. If I try to add it in the code I get the following error in VS Code (but not on the URL provided):
```
Object literal may only specify known properties, and 'interval' does not exist in type 'AxisLabelBaseOption | AxisLabelOption<"time">'.ts(2353)
```
### Expected Behavior
I want to get a chart where labels do NOT overlap. It would be great if I could add a label per month of data (i.e., 1st May, 1st June...).
### Environment
```markdown
- OS: macOS Big Sur
- Browser: Chrome 124.0.6367.208
- Framework: Ionic 7.2.0 + Angular
```
### Any additional comments?
Thank you!
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [I] Overlapping labels in xAxis with type="time" [echarts]
Posted by "andyg2 (via GitHub)" <gi...@apache.org>.
andyg2 commented on issue #19980:
URL: https://github.com/apache/echarts/issues/19980#issuecomment-2763367792
Using xAxis.type: category fixes the overlapping dates but it's far from perfect in many use cases.
https://jsfiddle.net/andyg2/5mjh43gn/
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [I] Overlapping labels in xAxis with type="time" [echarts]
Posted by "helgasoft (via GitHub)" <gi...@apache.org>.
helgasoft commented on issue #19980:
URL: https://github.com/apache/echarts/issues/19980#issuecomment-3712045074
@jcasadogp, use ```hideOverlap: true```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [I] Overlapping labels in xAxis with type="time" [echarts]
Posted by "jcasadogp (via GitHub)" <gi...@apache.org>.
jcasadogp commented on issue #19980:
URL: https://github.com/apache/echarts/issues/19980#issuecomment-2135470447
I am sorry, but the link above did not include my code. I am providing it below:
```
const formattedData = [
{fecha_eva: '30 abr 2024', eva: '6', eva_complete: '2'},
{fecha_eva: '1 may 2024', eva: '7', eva_complete: '2'},
{fecha_eva: '3 may 2024', eva: '6', eva_complete: '2'},
{fecha_eva: '4 may 2024', eva: '5', eva_complete: '2'},
{fecha_eva: '5 may 2024', eva: '10', eva_complete: '2'},
{fecha_eva: '14 may 2024', eva: '6', eva_complete: '2'},
{fecha_eva: '15 may 2024', eva: '6', eva_complete: '2'},
{fecha_eva: '17 may 2024', eva: '7', eva_complete: '2'},
{fecha_eva: '20 may 2024', eva: '5', eva_complete: '2'},
{fecha_eva: '20 may 2024', eva: '4', eva_complete: '2'},
{fecha_eva: '26 jul 2024', eva: '10', eva_complete: '2'}
];
const processedData = formattedData.map(obj => ({
fecha_eva: new Date(obj.fecha_eva),
eva: typeof obj.eva === 'string' ? parseInt(obj.eva, 10) : obj.eva
})).sort((a, b) => a.fecha_eva.getTime() - b.fecha_eva.getTime());
const seriesData = processedData.map(obj => [obj.fecha_eva, obj.eva]);
option = {
title: {
text: "Cuestionario EVA",
subtext: "Niveles de dolor introducidos"
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
xAxis: {
type: 'time',
axisLabel: {
formatter: (value) => {
const date = new Date(value);
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
},
},
splitLine: {
show: false,
},
},
yAxis: {
type: 'value',
splitLine: {
show: true,
},
},
series: [
{
name: 'EVA Level',
type: 'line',
data: seriesData,
lineStyle: {
color: '#E67E22',
width: 2.5,
},
itemStyle: {
color: '#E67E22',
},
animationDelay: idx => idx * 10,
}
],
animationEasing: 'elasticOut',
animationDelayUpdate: idx => idx * 5,
};
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org