Is it possible to show charts on Mapbox as a marker - mapbox

Question

I already have an example of the cluster feature and I like the donut chart that is given out. This donut however is generated based on the clustering of data of lower levels.
What I'd like to do is generate a donut, pie or bar chart based on certain fields against certain co-ordinates.
For example, if I'm referring to satisfaction
Location Happy Neutral Sad Longitude Latitude
London 5 2 6 123123 -5432
And then generate a chart based upon the Happy Neutral Sad fields, at the given co-ordinates.

Answer 1

No donut chart, but I made a sample of a line chart using Chart.min.js. and jQuery. You surely can fill the gap using donut charts available in Chart.min.js
Here is a fiddle I have created to show you how to create a popup with a chart.
Relevant code is below.
First of all add your links to jquery and chart.js
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- ChartJS -->
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.9.4/dist/Chart.min.js"></script>
Then you add a canvas that will be managed by chart.js
var popup = new mapboxgl.Popup({ closeOnClick: false })
.setLngLat([-96, 37.8])
.setHTML('<div class="chart"><canvas id="lineChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas></div>')
.addTo(map);
and then add the data sources, options and render the chart in the canvas
//this is fake data just for testing
var areaChartData = {
labels : ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label : 'Digital Goods',
backgroundColor : 'rgba(60,141,188,0.9)',
borderColor : 'rgba(60,141,188,0.8)',
pointRadius : false,
pointColor : '#3b8bba',
pointStrokeColor : 'rgba(60,141,188,1)',
pointHighlightFill : '#fff',
pointHighlightStroke: 'rgba(60,141,188,1)',
data : [28, 48, 40, 19, 86, 27, 90]
},
{
label : 'Electronics',
backgroundColor : 'rgba(210, 214, 222, 1)',
borderColor : 'rgba(210, 214, 222, 1)',
pointRadius : false,
pointColor : 'rgba(210, 214, 222, 1)',
pointStrokeColor : '#c1c7d1',
pointHighlightFill : '#fff',
pointHighlightStroke: 'rgba(220,220,220,1)',
data : [65, 59, 80, 81, 56, 55, 40]
},
]
}
//these are the options for testing
var areaChartOptions = {
maintainAspectRatio : false,
responsive : true,
legend: {
display: false
},
scales: {
xAxes: [{
gridLines : {
display : false,
}
}],
yAxes: [{
gridLines : {
display : false,
}
}]
}
}
var lineChartCanvas = $('#lineChart').get(0).getContext('2d')
var lineChartOptions = jQuery.extend(true, {}, areaChartOptions)
var lineChartData = jQuery.extend(true, {}, areaChartData)
lineChartData.datasets[0].fill = false;
lineChartData.datasets[1].fill = false;
lineChartOptions.datasetFill = false
var lineChart = new Chart(lineChartCanvas, {
type: 'line',
data: lineChartData,
options: lineChartOptions
})