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
Metadata
Metadata
Assignees
Type
Projects
Milestone
Relationships
Development
Participants
Activity
helgasoft commentedon Mar 27, 2025
replace min with startValue
📌 please close issue if problem solved.
tuhinkarmakar3882 commentedon Mar 28, 2025
@helgasoft Thank you so much for the reply. I just tried this and here're the results.
StartValueinstead ofminindeed make the chart look normal. But, I'm curious to know, why would this fixes this?minto0changes the Chart completely, by removing the other bars? See ExamplestartValueto0fails to render the chart? See Exampletuhinkarmakar3882 commentedon Mar 28, 2025
FYI. Just found this JSFiddle Link for HighCharts which showcases, Log Axis with Negative values.
Can we take any inspiration from here? May be add something like this as part of the ECharts Library?
helgasoft commentedon Mar 29, 2025
@tuhinkarmakar3882, good of you to investigate this. I am unable to respond to all of your questions, but negative values has been a long-standing feature request #17459, #15558.
Noticed @Antti-Palola did already work on a fix PR#20872. Hope it gets approved ASAP, why not even for incoming v.6.0.
Got inspired to hack a workaround - Demo. It works for scatter and bar series, but not for line (and log line crossing zero does not make much sense anyway).
tuhinkarmakar3882 commentedon Apr 3, 2025
@helgasoft Interesting finding! Let's hope for the that the changes gets merged. Until then, we'll have to use such workaround.
The example code that you provided, uses ECharts to render a dual-grid logarithmic bar chart that distinguishes positive and negative values. It first imports the ECharts library, selects an HTML element with the id "main," and initializes the chart instance.
A set of sample data and category labels is defined. A helper function computes the closest power of 10 for each data point to determine a suitable starting value for the logarithmic y-axes. The data is then split into two arrays: one for positive values and one for negative values (converted to their absolute values for proper logarithmic scaling).
The configuration defines two grids and matching axes. The top grid (with a hidden x-axis) displays positive values using a standard logarithmic scale, while the bottom grid displays negative values on an inverted logarithmic scale with custom tooltips and labels that prepend a minus sign. Finally, the chart is rendered by applying this configuration to the initialized ECharts instance.