D3 horizontal Barchart using react-d3-components package

Question

I am using react-d3-components for D3 chart. i am successfully generating the Bar chart. but my requirement is to generate horizontal bar chart

var React = require('react');
var ReactDOM = require('react-dom');
var d3 = require('d3');
var BarChart = require('react-d3-components').BarChart;

var data = [{
    label: 'somethingA',
    values: [{x: 'SomethingA', y: 10}, {x: 'SomethingB', y: 4}, {x: 'SomethingC', y: 3}]
}];

ReactDOM.render(
    <BarChart
        data={data}
        width={400}
        height={400}
        margin={{top: 10, bottom: 50, left: 50, right: 10}}/>,
        document.getElementById('root')
);

And i need output horizontal bar chart.

Looks like d3-react-components doesn't have this feature. You could build your own d3 chart like [this example](https://bl.ocks.org/alandunning/7008d0332cc28a826b37b3cf6e7bd998). — Razzildinho, Mar 30 '18 at 08:49

score 2 · Answer 1 · answered Jun 08 '18 at 09:22

I achieved this by following this tutorial: https://medium.com/@caspg/responsive-chart-with-react-and-d3v4-afd717e57583

I then swapped the x axis and y axis details around. So in our case the y axis will be scaleBand() and the x axis is scaleLinear()

I also swapped the width and height of the bars in the Bars component to get the correct orientation of the bars.

D3 horizontal Barchart using react-d3-components package

1 Answers1