[Bug] BAR Chart with Log Axis enabled, seems to perform log transformation on the DataSet Itself and therefore Renders incorrect chart.
- Dominant language
- TypeScript
- Stars
- 67.3k
- Forks
- 19.8k
- Avg merge
- 11d 14h
- Merged PRs (30d)
- 8
Description
### Version
5.6.0
### Link to Minimal Reproduction
https://echarts.apache.org/examples/en/editor.html?c=bar-simple&code=PYBwLglsB2AEC8sDeAoWtJgDYFMBcya6GOAHmAQOQBqOATpAMYCGWsAQs3bAMIAWXMLADuEMH1gAZYAHNYAZRa5KAGiLowZMPLABPXAVTFiAMxjaIAL3ywATAAZ1sAL5FnajcGBZIIQ07A6CBkZeipmUggAZ1UnCOiABWAIaE06f2MNXRAbSiiBABNgYUonV3R3IhkggoziXBMKWEoAZgBSWOMgmT4mygAWDo9iACNgMDBgAFsqds7iRnNmFMlmEZwsAkCAVxw3YdIAQUiouqycqhZNGWA6XXn0AuYwZgIAbUoeZ5wbu9hD1TNL7XW66DiAz7fX5gngQ4E_UGwAAilAAusN0NBmFNcvDfhAcDEMbAsTjpFcoNAqFMIAUCspiaScABxZh-WAtACsxPiUVW602hEysDMqXkVhsAEZ-mV9kRdMdomcMNlclhZA8SdjctRWLsorAABTquRRJQ4ACUmqZ5OelOptPpOGt2tZ7M59mJNKpsHsADp7IHJTyTvyNsr0KKLNYCJLbLKKsMovQCadYG8nEZMkyqPIU4TYJLNedciMuMXYE8Xu9_UGVL6A8GG03JeinOgxDgpjp9DYs8LFur0s0AMS2EwAdhwBQAHBX0GM6AV6AAlZgFCDbNNvbmwXee32o9suYnoLBrcNC4WwfLFLZ0Xan4ggYBRMT25qTEClYXlYh_o9nAAbiAA
### Steps to Reproduce
As you can see in the [example](https://echarts.apache.org/examples/en/editor.html?c=bar-simple&code=PYBwLglsB2AEC8sDeAoWtJgDYFMBcya6GOAHmAQOQBqOATpAMYCGWsAQs3bAMIAWXMLADuEMH1gAZYAHNYAZRa5KAGiLowZMPLABPXAVTFiAMxjaIAL3ywATAAZ1sAL5FnajcGBZIIQ07A6CBkZeipmUggAZ1UnCOiABWAIaE06f2MNXRAbSiiBABNgYUonV3R3IhkggoziXBMKWEoAZgBSWOMgmT4mygAWDo9iACNgMDBgAFsqds7iRnNmFMlmEZwsAkCAVxw3YdIAQUiouqycqhZNGWA6XXn0AuYwZgIAbUoeZ5wbu9hD1TNL7XW66DiAz7fX5gngQ4E_UGwAAilAAusN0NBmFNcvDfhAcDEMbAsTjpFcoNAqFMIAUCspiaScABxZh-WAtACsxPiUVW602hEysDMqXkVhsAEZ-mV9kRdMdomcMNlclhZA8SdjctRWLsorAABTquRRJQ4ACUmqZ5OelOptPpOGt2tZ7M59mJNKpsHsADp7IHJTyTvyNsr0KKLNYCJLbLKKsMovQCadYG8nEZMkyqPIU4TYJLNedciMuMXYE8Xu9_UGVL6A8GG03JeinOgxDgpjp9DYs8LFur0s0AMS2EwAdhwBQAHBX0GM6AV6AAlZgFCDbNNvbmwXee32o9suYnoLBrcNC4WwfLFLZ0Xan4ggYBRMT25qTEClYXlYh_o9nAAbiAA), the dataset contains `data: [0.001, 0.01, 0.1, 1]`.
> **Issue 1:** When using Log axis, The Chart seems to transform the dataset into the following => [0.001, 0.01, 0.1, 1].map(Math.log). This should not happen. Ideally only the Scale is supposed to be adjusted and not the data.
I tried the same thing with `HighCharts` and there it seems to work fine.
> **Issue 2:** The Y axis min cannot be set to 0. Why would that be the case? It should not shift the chart. Rather it should just start rendering the bar chart from there itself.
Below is a sample HTML code to show highcharts & Echarts together to prove the point and issue:
```html
Highcharts vs ECharts Comparison
.container-wrapper {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
justify-content: center;
}
.chart-container {
width: 800px;
height: 500px;
}
.chart-title {
text-align: center;
font-family: Arial, sans-serif;
font-size: 24px;
margin-bottom: 10px;
color: #333;
}
document.addEventListener('DOMContentLoaded', function() {
// Highcharts Implementation
Highcharts.chart('highcharts-container', {
chart: {
type: 'column'
},
title: {
text: 'Vertical Bar Chart with Log Scale',
style: {
fontSize: '20px'
}
},
xAxis: {
categories: ['Category A', 'Category B', 'Category C', 'Category D'],
title: {
text: 'Categories'
},
labels: {
style: {
fontSize: '14px'
}
}
},
yAxis: {
type: 'logarithmic',
title: {
text: 'Values (log scale)'
},
minorTickInterval: 0.1,
gridLineWidth: 1,
min: 0.0001,
labels: {
style: {
fontSize: '12px'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y}</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
borderRadius: 5,
dataLabels: {
enabled: true,
format: '{point.y}'
}
}
},
series: [{
name: 'Series 1',
data: [0.001, 0.01, 0.1, 1],
color: '#2f7ed8'
}],
credits: {
enabled: false
}
});
// ECharts Implementation
const eChart = echarts.init(document.getElementById('echarts-container'));
const eChartOption = {
title: {
text: 'Vertical Bar Chart with Log Scale',
textStyle: {
fontSize: 20
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['Category A', 'Category B', 'Category C', 'Category D'],
name: 'Categories',
nameLocation: 'middle',
nameGap: 35,
axisLabel: {
fontSize: 14
}
},
yAxis: {
type: 'log',
name: 'Values (log scale)',
nameLocation: 'middle',
nameGap: 50,
min: 0.0001,
axisLabel: {
fontSize: 12
}
},
series: [{
name: 'Series 1',
type: 'bar',
data: [0.001, 0.01, 0.1, 1],
itemStyle: {
color: '#2f7ed8',
borderRadius: [5, 5, 0, 0]
},
label: {
show: true,
position: 'top'
}
}]
};
eChart.setOption(eChartOption);
// Make both charts responsive
window.addEventListener('resize', function() {
eChart.resize();
});
});
```
### Current Behavior
As you can see in the [example](https://echarts.apache.org/examples/en/editor.html?c=bar-simple&code=PYBwLglsB2AEC8sDeAoWtJgDYFMBcya6GOAHmAQOQBqOATpAMYCGWsAQs3bAMIAWXMLADuEMH1gAZYAHNYAZRa5KAGiLowZMPLABPXAVTFiAMxjaIAL3ywATAAZ1sAL5FnajcGBZIIQ07A6CBkZeipmUggAZ1UnCOiABWAIaE06f2MNXRAbSiiBABNgYUonV3R3IhkggoziXBMKWEoAZgBSWOMgmT4mygAWDo9iACNgMDBgAFsqds7iRnNmFMlmEZwsAkCAVxw3YdIAQUiouqycqhZNGWA6XXn0AuYwZgIAbUoeZ5wbu9hD1TNL7XW66DiAz7fX5gngQ4E_UGwAAilAAusN0NBmFNcvDfhAcDEMbAsTjpFcoNAqFMIAUCspiaScABxZh-WAtACsxPiUVW602hEysDMqXkVhsAEZ-mV9kRdMdomcMNlclhZA8SdjctRWLsorAABTquRRJQ4ACUmqZ5OelOptPpOGt2tZ7M59mJNKpsHsADp7IHJTyTvyNsr0KKLNYCJLbLKKsMovQCadYG8nEZMkyqPIU4TYJLNedciMuMXYE8Xu9_UGVL6A8GG03JeinOgxDgpjp9DYs8LFur0s0AMS2EwAdhwBQAHBX0GM6AV6AAlZgFCDbNNvbmwXee32o9suYnoLBrcNC4WwfLFLZ0Xan4ggYBRMT25qTEClYXlYh_o9nAAbiAA), the dataset contains `data: [0.001, 0.01, 0.1, 1]`.
> **For Issue 1:** When using Log axis, The Chart seems to transform the dataset into the following => [0.001, 0.01, 0.1, 1].map(Math.log)
> **For Issue 2:** The Y axis min cannot be set to 0. Why would that be the case? It should not shift the chart. Rather it should just start rendering the bar chart from there itself.
---
### Expected Behavior
As you can see in the [example](https://echarts.apache.org/examples/en/editor.html?c=bar-simple&code=PYBwLglsB2AEC8sDeAoWtJgDYFMBcya6GOAHmAQOQBqOATpAMYCGWsAQs3bAMIAWXMLADuEMH1gAZYAHNYAZRa5KAGiLowZMPLABPXAVTFiAMxjaIAL3ywATAAZ1sAL5FnajcGBZIIQ07A6CBkZeipmUggAZ1UnCOiABWAIaE06f2MNXRAbSiiBABNgYUonV3R3IhkggoziXBMKWEoAZgBSWOMgmT4mygAWDo9iACNgMDBgAFsqds7iRnNmFMlmEZwsAkCAVxw3YdIAQUiouqycqhZNGWA6XXn0AuYwZgIAbUoeZ5wbu9hD1TNL7XW66DiAz7fX5gngQ4E_UGwAAilAAusN0NBmFNcvDfhAcDEMbAsTjpFcoNAqFMIAUCspiaScABxZh-WAtACsxPiUVW602hEysDMqXkVhsAEZ-mV9kRdMdomcMNlclhZA8SdjctRWLsorAABTquRRJQ4ACUmqZ5OelOptPpOGt2tZ7M59mJNKpsHsADp7IHJTyTvyNsr0KKLNYCJLbLKKsMovQCadYG8nEZMkyqPIU4TYJLNedciMuMXYE8Xu9_UGVL6A8GG03JeinOgxDgpjp9DYs8LFur0s0AMS2EwAdhwBQAHBX0GM6AV6AAlZgFCDbNNvbmwXee32o9suYnoLBrcNC4WwfLFLZ0Xan4ggYBRMT25qTEClYXlYh_o9nAAbiAA), the dataset contains `data: [0.001, 0.01, 0.1, 1]`.
> **For Issue 1:** Ideally only the Scale is supposed to be adjusted and not the data. I tried the same thing with `HighCharts` and there it seems to work fine.
> **For Issue 2:** The Y axis min should be allowed to be set as any number. As it's just the axis value and no Log should be performed there.
### Environment
```markdown
- OS: MacOS
- Browser: Chrome 134.0.6998.118 (Official Build) (arm64)
- Framework: Vanilla JS
```
### Any additional comments?
_No response_
Contributor guide
Assessment
This issue has not been assessed yet.