1

I would like to make my hAxis scrollable and show all my hAxis label values. On the hAxis, the IDs of certain stores are displayed. I have written the following code for the graph:

let array = [[
                                            'Store', 'Amount',
                                        ]];
                                        for (let item of response){
                                            array.push([item.store_id.toString(), item.count]);
                                        }
                                        console.log(array);
                                        let data = google.visualization.arrayToDataTable(array);
                                        let options = {
                                            chartArea: {
                                                top: 20,
                                                height: '65%',
                                                width: '75%'
                                            },
                                            hAxis: {
                                                title: 'Store ID',
                                                slantedText: true,
                                                slantedTextAngle: 90,
                                            },
                                            bar: {
                                                groupWidth: 1
                                            },
                                            legend: {
                                                position: 'none'
                                            }
                                        };
                                        let chart = new google.visualization.ColumnChart(document.getElementById('chart-canvas-3'));

                                        chart.draw(data, options);

And the .scss code:

.card-image {
        display: block;
        box-sizing: border-box;
        position: relative;
        overflow-x: scroll;

        margin-bottom: sz(10pt);
        padding-left: 10px;
        padding-top: 10px;
        padding-right: 10px;

        .card-image-inner {
            width: 100%;
        }
    }

So my question is, how can I display all 53 store ID labels on the hAxis (with scroll functionality)?

Thanks!

Current graph

Hadishu
  • 11
  • 6
  • google's answer for this is the [ChartRangeFilter](https://developers.google.com/chart/interactive/docs/gallery/controls#chartrangefilter), if you'd rather have the scroll, check [this answer](https://stackoverflow.com/a/43788639/5090771)... – WhiteHat Jun 28 '21 at 11:56
  • @WhiteHat Your first suggestion is only working for continuous data, while my data is discrete. I've already tried to implement your second suggestion, but that's also not working. The scrollbar appears, but the graph's width is smaller. Changing the width's values is also not working. Any other suggestions? – Hadishu Jun 28 '21 at 13:03
  • @WhiteHat nevermind! Made a stupid mistake by thinking that I had to adjust the chartArea.width, but it is just the general width attribute... Thanks for pointing me in the right direction! – Hadishu Jun 28 '21 at 13:08
  • cheers! glad to help. and if you want to go with the range filter, I can help convert the data to continuous while keeping the same labels on the x-axis. just share a sample of the data... – WhiteHat Jun 28 '21 at 13:09
  • actually, I think you could change data to --> `array.push([{v: item.store_id, f: item.store_id.toString()}, item.count]);` -- for continuous to work and not have the number formatted... – WhiteHat Jun 28 '21 at 13:14

0 Answers0