I am trying to eliminate the black background of the letters that appear in each column, in order to make the data readable, but I am not successful.
If you can help me thank you very much.
$(function () {
Highcharts.setOptions({
lang: {
thousandsSep: ','
}
});
$('#grafico0').highcharts({
colors: ['#263238', '#00BCD4'],
chart: {
type: 'column'
},
title: {
text: 'Horas'
},
xAxis: {
title: { enabled: true, text: ''}, categories: [{ name: 'Frentes<br><br>Frentes<br><br>Frentes<br>', categories: [
'01','02','03','04','96','97',]},{ name: 'Frentes<br><br>Frentes<br>', categories: [
'06','07',]},{ name: 'Frentes<br><br>PxP<br>', categories: [
'11','17','19','41',]},{ name: 'Frentes<br><br>Frentes<br>', categories: [
'84',]},{ name: 'Frentes<br><br>Frentes<br><br><br>', categories: [
'26',]},{ name: 'Promedio<br>', categories: [
'Promedio',]},]
},
yAxis: {
min: 0,
title: {
text: '',
},
stackLabels: {
enabled: false,
style: {
fontWeight: 'normal',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'left',
},
plotOptions: {
spline: {dataLabels:{enabled: true}}, column: {
stacking: 'normal',
dataLabels: {
enabled: true,
formatter: function() {
if(this.y > -1)
return this.point.label;
},
style: { fontWeight: 'normal', color: 'white', fontSize: '8px' } }
}
},
series: [{
name: 'Porcentaje1',
data: [
{ y: 19.12,
label: ' 19.12% ; 2,562'
},{ y: 7.13,
label: ' 7.13% ; 857'
},{ y: 41.85,
label: ' 41.85% ; 1,827'
},{ y: 34.94,
label: ' 34.94% ; 5,114'
},{ y: 100.00,
label: ' 100.00% ; 1,210'
},{ y: 95.90,
label: ' 95.90% ; 1,211'
},{ y: 11.35,
label: ' 11.35% ; 1,151'
},{ y: 5.99,
label: ' 5.99% ; 538'
},{ y: 5.44,
label: ' 5.44% ; 538'
},{ y: 0.00,
label: ' 0.00% ; 0'
},{ y: 0.00,
label: ' 0.00% ; 0'
},{ y: 19.55,
label: ' 19.55% ; 608'
},{ y: 33.20,
label: ' 33.20% ; 971'
},{ y: 46.77,
label: ' 46.77% ; 611'
},{ y: 20.38,
label: ' 20.38% ; 17,202'
}
]
}, { name: ' Porcentaje2',
data: [{ y: 80.88,
label: ' 80.88% ; 10,841'
},{ y: 92.87,
label: ' 92.87% ; 11,170'
},{ y: 58.15,
label: ' 58.15% ; 2,539'
},{ y: 65.06,
label: ' 65.06% ; 9,523'
},{ y: 0.00,
label: ' 0.00% ; 0'
},{ y: 4.10,
label: ' 4.10% ; 51'
},{ y: 88.65,
label: ' 88.65% ; 8,997'
},{ y: 94.01,
label: ' 94.01% ; 8,446'
},{ y: 94.56,
label: ' 94.56% ; 9,373'
},{ y: 100.00,
label: ' 100.00% ; 1,023'
},{ y: 100.00,
label: ' 100.00% ; 96'
},{ y: 80.45,
label: ' 80.45% ; 2,502'
},{ y: 66.80,
label: ' 66.80% ; 1,955'
},{ y: 53.23,
label: ' 53.23% ; 695'
},{ y: 79.62,
label: ' 79.62% ; 67,218'
}
]
},{ name: 'Meta',
type: 'spline', color: '#FF9800',
data: [91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00],
}]
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://blacklabel.github.io/grouped_categories/grouped-categories.js"></script>
<div id="grafico0" style="min-width: 310px; height: 400px; margin: 0 auto"></div>What I'm looking for is to be able to remove the background of these letters:
Show those letters without the outline.
You can do "strictly" what you say with a couple of lines of css, but I don't know if it will be the result you intend to achieve, I think it reads worse. The border is precisely to prevent the letters from mixing with the bars. I have softened the colors of the bars a bit to avoid it
Do you mean something like this?