How to keep the size of google chart columns and force scroll bar?

Question

I have a google chart that will be generated via a database search to populate it. However, if this columns which in my case are companies are too many, it will keep shrinking the size of the column bars. See the image examples below.

Image 1 limit search to 10:

But if I add a lot more companies, that means not limit my search result this will happen:

Is there a way to limit the size of my colums to the one of the first image, and if it exceeds that to create a scroll bar?

I already have something like:

 #detailedCharts {
 overflow-x: scroll; 
 overflow-y: hidden;
 min-height: 500px;
 min-width: 100px;   
 width: 100%;
 height: 100%;
    margin-bottom: 5%;
}   

As CSS in hopes it would get to big and overflow so it would create a scroll bar on the div but this didnt work as expected.

The code I am using for the chart is as follows:

 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 that look like this:

 public int IssueCount { get; set; }
 public string Name { get; set; }

And the html this chart will be placed in will be this:

<div class="row">
            <div id="detailedCharts" class="col-sm-12">
                
            </div>

How to achieve this?

Answer 1

It's a bit hard to assume the rest of your code, but there is potential solution. Maybe CSS is not the best option, because chart width is usually decided based on it's parent's width. I would add flexible width inside chart functionality: First, get number of elements in a chart:

var numberOfElements = data.qg.length;

Then multiply them with the value you'd like:

  var newWidth = (numberOfElements * 100);

Then add this value to the options array, as a width parameter:

  var options = {
    width: newWidth
  };

If you have not enough elements, you can limit your width to be generated only when more than x elements. If less, it will keep default value. Example (to generate width only when more than 4 elements):

var newWidth =  (numberOfElements > 4) ? (numberOfElements * 100) : 0;

You can do the same for minimum width. Example (to generate width only if calculated width will be more than 400):

var newGeneratedWidth =  (newWidth > 400) ? newWidth : 0;

And then update your width value with the new newGeneratedWidth:

width: newGeneratedWidth,

Here is an example: https://jsfiddle.net/e7de4e4h/