I am working on a Google chart that will be generated through a database search to populate it. However, I have encountered an issue where if there are too many columns (representing different companies in my case), the size of the column bars keeps shrinking. You can see examples of this in the images below.
Image 1 with search limited to 10:
https://i.sstatic.net/cWIEe.png
But when I add more companies without limiting my search results, I face this problem:
https://i.sstatic.net/QS2C3.png
Is there a way to limit the size of the columns to that of the first image and create a scroll bar if it exceeds that size?
I have tried using the following CSS code but it did not work as expected:
#detailedCharts {
overflow-x: scroll;
overflow-y: hidden;
min-height: 500px;
min-width: 100px;
width: 100%;
height: 100%;
margin-bottom: 5%;
}
The code I am using for the chart is shown below:
static drawChartGetTotalIssuesByCategoryAllCompanies(data) {
let dataTable = new google.visualization.DataTable();
dataTable.addColumn("string", "Company Name");
dataTable.addColumn("number", "Issue Count");
data.forEach(row => { dataTable.addRow([row.name, row.issueCount]) });
let chart = new google.visualization.ColumnChart(document.getElementById("detailedCharts"));
const options = {
title: "Issues per Company for category",
hAxis: {
title: "Company Name"
},
vAxis: {
title: "Issue Count"
},
};
chart.draw(dataTable, options);
}
}
The data I am passing in is an array of objects structured like this:
public int IssueCount { get; set; }
public string Name { get; set; }
The HTML structure where the chart will be placed is as follows:
<div class="row">
<div id="detailedCharts" class="col-sm-12">
</div>
Do you have any suggestions on how I can achieve this layout while maintaining the appropriate size of the columns?