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>- OS: MacOS
- Browser: Chrome 134.0.6998.118 (Official Build) (arm64)
- Framework: Vanilla JS
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, the dataset contains
data: [0.001, 0.01, 0.1, 1].I tried the same thing with
HighChartsand there it seems to work fine.Below is a sample HTML code to show highcharts & Echarts together to prove the point and issue:
Current Behavior
As you can see in the example, the dataset contains
data: [0.001, 0.01, 0.1, 1].Expected Behavior
As you can see in the example, the dataset contains
data: [0.001, 0.01, 0.1, 1].Environment
Any additional comments?
No response