Как создать горизонтальную гистограмму с d c. js?

Question

Мне удалось создать несколько гистограмм в d c. js:

Мои метки ординатной оси могут стать довольно длинными , Поэтому я бы хотел показывать горизонтальные полосы вместо вертикальных. Таким образом, длинные тиковые метки (например, «Price_Fuel», «Обычный», ...) больше не нуждаются в наклоне.

Вот пример d3 для того, что я хочу:

https://www.d3-graph-gallery.com/graph/barplot_horizontal.html

Я попытался заменить звонки типа

barChart.x(d3.scaleBand())

с

barChart.y(d3.scaleBand())

, но это не помогло.

Кроме того, гистограмма, похоже, не обеспечивает свойства направления, такие как

barChart.direction('horizontal')

=> Как создать горизонтальные гистограммы с помощью d c. js?

Некоторые фрагменты кода:

async __createBarChart(progressBar){

    let entries = await this.entries(this.__entry, progressBar);

    let element = ReactDOM.findDOMNode(this.__container);

    var barChart = dc.barChart(element)
        .xUnits(dc.units.ordinal)
        .margins({top:10,left:50,right:15,bottom:60})
        .barPadding(0.1)
        .transitionDuration(0)
        .outerPadding(0.1);

    let barColors =  ColorFactory.createColumnColors(this.__entry.letter, entries.length);
    FamilyChart.__defineBarColors(barChart, barColors);

    barChart
        //.xAxisLabel(this.__entry.label)
        .x(d3.scaleBand())
        .dimension(this.__dimension)
        .yAxisLabel(this.__yAxisLabel)
        .group(this.__group);

    barChart
        .xAxis()
        .tickFormat(id => this.__tickFormat(id, entries));

     dc.renderAll();

     return barChart;
}

Некоторые CSS:

.family-chart-container svg .x.axis text {
    text-anchor: end !important;
    transform: rotate(-30deg);
}