如何为PrimeFaces的JSF柱状图实现横向滚动条？

我正在参与一个基于JSF技术与PrimeFaces库的项目，现在遇到一个问题：需要为BarChart实现横向滚动条，因为后端可能返回大量数据，必须通过滚动条完整展示所有数据。目前滚动条指针无法正常工作，以下是相关代码和现状：

相关代码 #

XHTML代码 #

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui">

    <div class="dashboardPercentualEntregasPorBase-card rounded">
            <p:barChart model="#{MB.percentualEntregaPorBase}" styleClass="percentual-de-entregas" style="width: 100%; height: 250px;" />
    </div>

</ui:composition>

CSS代码 #

.dashboardPercentualEntregasPorBase-card{
    width: 98%;
    height: 100%;
    box-shadow: 3px 7px 9px -1px rgba(0,0,0,0.64);
    -webkit-box-shadow: 3px 7px 9px -1px rgba(0,0,0,0.64);
    -moz-box-shadow: 3px 7px 9px -1px rgba(0,0,0,0.64);
}
.percentual-de-entregas{
    overflow: auto;
    overflow-x: scroll;
}

Java后端代码 #

private void createPercentualEntregaPorBase() {
    this.percentualEntregaPorBase = new BarChartModel();
    ChartData data = new ChartData();
    
    BarChartDataSet barDataSet = new BarChartDataSet();
    barDataSet.setLabel("Concluidos");
    barDataSet.setBackgroundColor("#08B408");
    barDataSet.setStack("Stack 0");
    List<Number> dataVal = Arrays.asList(45, 68, 84, 58, 57, 48, 86, 60, 94, 45,100,90,80,70,60,50,90, 45, 68, 84, 58, 57, 48, 86, 60, 94, 45,100,90,80,70,60,50,90,100,90,80,70,60,50,90, 50,90,100,90,80,70,60,50,90,50,90,100,90,80,70,60,50,90);
    barDataSet.setData(dataVal);
    
    BarChartDataSet barDataSet2 = new BarChartDataSet();
    barDataSet2.setLabel("Retornos");
    barDataSet2.setBackgroundColor("#FF0000");
    barDataSet2.setStack("Stack 0");
    List<Number> dataVal2 = Arrays.asList(40, 55, 80, 56, 55, 40, 81, 56, 90, 40,80,95,83,74,68,57,80, 40, 55, 80, 56, 55, 40, 81, 56, 90, 40,80,95,83,74,68,57,80, 101,92,81,71,62,51,91);
    barDataSet2.setData(dataVal2);
 
    data.addChartDataSet(barDataSet);
    data.addChartDataSet(barDataSet2);

    List<String> labels =  new ArrayList<>();

    for (int i = 1; i <= 42; i++) {
        labels.add("CD " + i);
    }

    data.setLabels(labels);
    this.percentualEntregaPorBase.setData(data);
    
    //Options
    BarChartOptions options = new BarChartOptions();
    CartesianScales cScales = new CartesianScales();
    CartesianLinearAxes linearAxes = new CartesianLinearAxes();
    linearAxes.setStacked(true);    
    cScales.addXAxesData(linearAxes);
    cScales.addYAxesData(linearAxes);
    options.setScales(cScales);
    
    Title title = new Title();
    title.setDisplay(true);
    title.setText("Percentual de entregas por base");
    options.setTitle(title);
    
    Tooltip tooltip = new Tooltip();
    tooltip.setMode("index");
    tooltip.setIntersect(false);
    options.setTooltip(tooltip);
    Legend legend = new Legend();
    legend.setDisplay(false);
    options.setLegend(legend);

    this.percentualEntregaPorBase.setOptions(options);
}

当前问题现状 #

当前配置后，横向滚动条的指针无法正常工作，图表内容被挤压，无法通过滚动查看完整数据，效果如下：

内容的提问来源于stack exchange，提问作者Dev_Edimar FUll stack