I have implemented HighCharts for displaying charts on my website. Specifically, I am utilizing the chart type solidgauge. The charts are dynamic and I am looking to arrange them horizontally across the page.
My goal is to align the charts in a layout similar to the image provided below: https://i.sstatic.net/G6m5N.jpg
function getChartOptions(data) {
debugger;
var rawData = data;
var chartData = getData(rawData);
function getData(rawData) {
var data = [],
start = Math.round(Math.floor(rawData / 10) * 10);
data.push(rawData);
for (i = start; i > 0; i -= 10) {
data.push({
y: i
});
}
return data;
}
var options = {
chart: {
type: 'solidgauge',
height: 250
},
credits: {
enabled: false
},
title: {
//
},
tooltip: {
enabled: false
/*valueSuffix: ' km/h'*/
},
pane: {
startAngle: -120,
endAngle: 120,
background: [{ // Track for Move
outerRadius: '100%',
innerRadius: '80%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.3).get(),
borderWidth: 0,
shape: 'arc'
}],
},
yAxis: {
min: 0,
max: 100,
lineWidth: 2,
lineColor: 'white',
tickInterval: 10,
labels: {
enabled: false
},
minorTickWidth: 0,
tickLength: 50,
tickWidth: 5,
tickColor: 'white',
zIndex
: 6,
stops: [
[0, '#f06'],
[0.101, '#f03'],
[0.201, '#e10'],
[0.301, '#c30'],
[0.401, '#a50'],
[0.501, '#870'],
[0.601, '#690'],
[0.701, '#4b0'],
[0.801, '#2d0'],
[0.901, '#0f0'],
[1, '#fff']
]
},
// other options, including series data, go here
series: [{
data: chartData,
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:12px">{y}%</span><br/>',
borderWidth: 0,
y: -20
},
tooltip: {
enabled: false
/*valueSuffix: ' km/h'*/
},
borderWidth: 0,
color: Highcharts.getOptions().colors[0],
radius: '100%',
innerRadius: '80%',
}]
};
return options;
}
/*debugger;*/
$(function () {
debugger;
// Define your data sets here
var dataSet1 = [20];
var dataSet2 = [10];
var dataSet3 = [5];
// Define an array of data sets
var dataSets = [dataSet1, dataSet2, dataSet3];
// Iterate over the data sets and create a new chart for each one
for (var i = 0; i < dataSets.length; i++) {
// Create a new container element for the chart
var $chartContainer = $('<div>').appendTo('#chart-container');
// Get the chart options for this data set
var chartOptions = getChartOptions(dataSets[i]);
// Create the chart using Highcharts
Highcharts.chart($chartContainer[0], chartOptions);
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<div id="chart-container"></div>I would like to organize these charts within a Bootstrap row, with three charts displayed side by side as indicated in the image provided. Any assistance on aligning these dynamic charts accordingly would be greatly appreciated.