How to make only the text label 'FontWeight: Bold' on Tooltip EChartJS - charts

Question

I need help here from you guys, Is there a way to make the text label in my tooltip BOLD ?? I mean only the label.
I try using the fontWeight: 'bold' but all text on my tooltip is bold.
i just want the label bold, not the data.
this is my script
var echartsConfig = function() {
if( $('#e_chart_07').length > 0 ){
var eChart_07 = echarts.init(document.getElementById('e_chart_07'));
var option07 = {
legend: {
display: true,
position: 'top',
labels: {
boxWidth: 15,
fontColor: 'black'
}
},
color: ['blue','purple','orange','red'],
tooltip: {
show: true,
trigger: 'axis',
backgroundColor: '#fff',
borderRadius:10,
padding:10,
axisPointer:{
lineStyle:{
width:0,
}
},
textStyle: {
color: '#324148',
fontFamily: '"Poppins", sans-serif',
fontSize: 12,
// fontWeight: 'bold'
}
},
grid: {
top: '13%',
left: '3%',
right: '3%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : [<?php foreach($duta as $dba){
echo '"'.$dba->agj_month_name.' '.$dba->agj_year.'",';
}?>
],
axisLine: {
show:false
},
axisTick: {
show:false
},
axisLabel: {
textStyle: {
color: 'Black'
}
}
}
],
yAxis : [
{
type : 'value',
axisLine: {
show:false
},
axisTick: {
show:false
},
axisLabel: {
textStyle: {
color: 'Black'
}
},
splitLine: {
lineStyle: {
color: 'transparent',
}
}
}
],
series : [
{
name:'0-30 ',
type:'bar',
barMaxWidth: 30,
data:[<?php foreach($duta as $dba){
echo '"'.$dba->agj_030.'",';
}?>],
itemStyle: {
normal: {
barBorderRadius: [3, 3, 0, 0] ,
}
}
},
{
name:'31-60 ',
type:'bar',
barMaxWidth: 30,
data:[<?php foreach($duta as $dba){
echo '"'.$dba->agj_3160.'",';
}?>],
itemStyle: {
normal: {
barBorderRadius: [3, 3, 0, 0] ,
}
},
},
{
name:'61-90 ',
type:'bar',
barMaxWidth: 30,
data:[<?php foreach($duta as $dba){
echo '"'.$dba->agj_6190.'",';
}?>],
itemStyle: {
normal: {
barBorderRadius: [3, 3, 0, 0] ,
}
},
},
{
name:'>90 ',
type:'bar',
barMaxWidth: 30,
data:[<?php foreach($duta as $dba){
echo '"'.$dba->agj_more90.'",';
}?>],
itemStyle: {
normal: {
barBorderRadius: [3, 3, 0, 0] ,
}
},
}
]
};
eChart_07.setOption(option07);
eChart_07.resize();
}
<div id="e_chart_07" class="echart" style="height:294px;"></div>

Answer 1

you should use formatter for that. you can see the code below.
tooltip: {
show: true,
trigger: 'axis',
backgroundColor: '#fff',
borderRadius:10,
padding:10,
axisPointer:{
lineStyle:{
width:0,
}
},
textStyle: {
color: '#324148',
fontFamily: '"Poppins", sans-serif',
fontSize: 12,
// fontWeight: 'bold'
},
formatter: (params) => {
let dataStr = `<div>${params[0].name}</div>`;
console.log(params[0]);
params.forEach((item) => {
let valueCal = ((params[1].value/params[0].value)*100).toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ",") == undefined ? "-" : ((params[1].value/params[0].value)*100).toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
dataStr = `
<div><strong>Persentase</strong></div>
<div>
<i class="fa fa-circle" style="color:${item.color}"></i>
${params[1].seriesName} :
${valueCal}
</div>
`;
});
return dataStr;
},
},