option = {
backgroundColor: ‘#ffffff’,
title: {
text: ‘PERFORMANCE COMPARISON IN 12 MONTHS’,
subtext: ‘Protective Fund vs VN30 Index’,
left: ‘center’,
top: 10,
textStyle: {
color: ‘#0000FF’, // Blue main title
fontWeight: ‘bold’,
fontSize: 18,
fontFamily: ‘Arial, sans-serif’
},
subtextStyle: {
color: ‘#FF0000’, // Red subtitle
fontWeight: ‘bold’,
fontSize: 16,
fontFamily: ‘Arial, sans-serif’
}
},
tooltip: {
trigger: ‘axis’,
axisPointer: {
type: ‘shadow’
}
},
legend: {
data: [‘Protective Fund’, ‘VN30 Index’],
bottom: 20,
left: ‘center’,
icon: ’roundRect’,
itemWidth: 20,
itemHeight: 14,
textStyle: {
fontFamily: ‘Arial, sans-serif’,
fontSize: 12
}
},
grid: {
left: ‘5%’,
right: ‘5%’,
top: ‘15%’,
bottom: ‘12%’,
containLabel: true
},
xAxis: [
{
type: ‘category’,
name: ‘Month’,
nameLocation: ‘middle’,
nameGap: 35,
nameTextStyle: {
fontWeight: ‘bold’,
fontSize: 13,
color: ‘#000000’
},
axisTick: { show: false },
axisLine: {
onZero: true, // Crucial for drawing the line at 0%
lineStyle: {
color: ‘#000000’,
width: 2
}
},
axisLabel: {
color: ‘#000000’,
fontWeight: ‘bold’,
margin: 15,
fontFamily: ‘Arial, sans-serif’
},
data: [
’06/2025′, ’07/2025′, ’08/2025′, ’09/2025′, ’10/2025′, ’11/2025′,
’12/2025′, ’01/2026′, ’02/2026′, ’03/2026′, ’04/2026′, ’05/2026′
]
}
],
yAxis: [
{
type: ‘value’,
name: ‘Performance (%)’,
nameLocation: ‘middle’,
nameGap: 40,
nameTextStyle: {
fontWeight: ‘bold’,
fontSize: 13,
color: ‘#000000’
},
min: -15,
max: 15,
interval: 10,
axisLabel: {
formatter: ‘{value}%’,
color: ‘#000000’,
fontWeight: ‘bold’
},
splitLine: {
show: true,
lineStyle: {
color: ‘#E0E0E0’,
type: ‘solid’
}
}
}
],
series: [
{
name: ‘Protective Fund’,
type: ‘bar’,
barGap: ‘10%’, // Adjust spacing between bars within the same month
itemStyle: {
color: ‘#1A4D62’ // Deep Blue-Green/Teal color
},
label: {
show: true,
position: ‘top’, // Will automatically flip to bottom if negative
formatter: ‘{c}%’,
color: ‘#000000’,
fontWeight: ‘bold’,
fontFamily: ‘Arial, sans-serif’
},
data: [4.5, 11.7, 15.2, 10.6, 2.6, 6.0, 5.3, 2.0, 2.3, 5.4, 14.3, 1.0]
},
{
name: ‘VN30 Index’,
type: ‘bar’,
itemStyle: {
color: ‘#FF7315’ // Vibrant Orange color
},
label: {
show: true,
// Using a function dynamically forces negative values below the bar
position: ‘top’,
formatter: function (params) {
return params.value + ‘%’;
},
color: ‘#000000’,
fontWeight: ‘bold’,
fontFamily: ‘Arial, sans-serif’
},
data: [3.8, 8.4, 14.7, -0.0, 1.6, 2.2, 5.6, 0.1, 1.6, -11.4, 10.2, -1.2]
}
]
};