Description
Version
5.6.0
Link to Minimal Reproduction
Steps to Reproduce
As you can see in the example, 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:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Highcharts vs ECharts Comparison</title>
<!-- Include both libraries -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<style>
.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;
}
</style>
</head>
<body>
<div class="container-wrapper">
<div>
<div class="chart-title">Highcharts Implementation</div>
<div id="highcharts-container" class="chart-container"></div>
</div>
<div>
<div class="chart-title">ECharts Implementation</div>
<div id="echarts-container" class="chart-container"></div>
</div>
</div>
<script>
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();
});
});
</script>
</body>
</html>Current Behavior
As you can see in the example, 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, 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
HighChartsand 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
- OS: MacOS
- Browser: Chrome 134.0.6998.118 (Official Build) (arm64)
- Framework: Vanilla JSAny additional comments?
No response