Mapbox GL JS: How to draw an horizontal separator inside a circle point - mapbox-gl-js

Question

I'm trying to display two values separated by a horizontal separator inside a cluster point rendered using Mapbox GL JS.
Example (using leaflet) :
So far I've achieved to have this kind of point but I'm missing the 1px bar in the center.
How would you do this?
The code I'm using:
this.map.addLayer({
id: 'clusters',
type: 'circle',
source: 'markers',
filter: ['has', 'point_count'],
paint: {
'circle-color': '#ffffff',
'circle-radius': 20,
'circle-stroke-width': 3,
'circle-stroke-color': '#5eb3e4',
}
});
this.map.addLayer({
id: 'cluster-count',
type: 'symbol',
source: 'markers',
filter: ['has', 'point_count'],
layout: {
'text-field': '{point_count}\n{sum}',
'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
'text-size': 12,
},
paint: {
'text-color': '#00214e'
}
});

Answer 1

So I've managed to do this using a generated image, added as an icon to the layer:
const createLineImage = (width) => {
const bytesPerPixel = 4; // Each pixel is 4 bytes: red, green, blue, and alpha.
const data = new Uint8Array(width * bytesPerPixel);
for (let x = 0; x < width; x++) {
const offset = x * bytesPerPixel;
data[offset] = 0; // red
data[offset + 1] = 0; // green
data[offset + 2] = 0; // blue
data[offset + 3] = 255; // alpha
}
return { data, width, height: 1 };
};
this.map.addImage('line', createLineImage(25));
this.map.addLayer({
id: 'cluster-count',
type: 'symbol',
source: 'markers',
filter: ['has', 'point_count'],
layout: {
'text-field': '{point_count}\n{sum}',
'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
'text-size': 12,
'text-line-height': 1.5,
'icon-image': 'line',
},
});
Result is