Uncaught TypeError: yScaleSet.bandwidth is not a function #10
Description
I've got a horizontal bar group chart but I'm getting this error. I want date on the y axis and with x I just have some integers. Here I went ahead and set the yDomain.
`import React, { PropTypes } from 'react';
import {BarGroupHorizontalChart} from 'react-d3-basic';
export default class AccountChart extends React.Component {
static propTypes = {
data: PropTypes.array.isRequired, // this is passed from the Rails controller
};
constructor(props, context) {
super(props, context);
}
render() {
let barchartData = [];
this.props.data.forEach((item) => {
if (item.date != "Total") {
barchartData.push({"date": item.date, "deliverable": item.deliverable, "successful": item.successful});
}
});
var parseDate = d3.time.format("%Y-%m-%d").parse;
let width = 1400, height = 800, margins = {left: 100, right: 100, top: 50, bottom: 50},
title = "Deliveries by Date",
chartSeries = [
{
field: 'deliverable',
name: 'Deliverable Numbers',
color: 'blue'
},
{
field: 'successful',
name: 'Successful Numbers',
color: 'green'
}
],
y = function(d) { return parseDate(d.date); },
yScale = 'time',
yDomain = [parseDate(this.props.data[0].date), parseDate(this.props.data[this.props.data.length - 2].date)];
return (
<BarGroupHorizontalChart data={barchartData} width={width} height={height} title={title} margins={margins}
yScale={yScale} yDomain={yDomain} chartSeries={chartSeries} y={y} />
);
}
}`
I tried it also with a BarGroupChart and flipped the axes but then I get xScaleSet.bandwidth is not a function. For this one I didn't set the xDomain.
`import React, { PropTypes } from 'react';
import {BarGroupChart} from 'react-d3-basic';
export default class AccountChart extends React.Component {
static propTypes = {
data: PropTypes.array.isRequired, // this is passed from the Rails controller
};
constructor(props, context) {
super(props, context);
}
render() {
let barchartData = [];
this.props.data.forEach((item) => {
if (item.date != "Total") {
barchartData.push({"date": item.date, "deliverable": item.deliverable, "successful": item.successful});
}
});
var parseDate = d3.time.format("%Y-%m-%d").parse;
let width = 1400, height = 800, margins = {left: 100, right: 100, top: 50, bottom: 50},
title = "Deliveries by Date",
chartSeries = [
{
field: 'deliverable',
name: 'Deliverable Numbers',
color: 'blue'
},
{
field: 'successful',
name: 'Successful Numbers',
color: 'green'
}
],
x = function(d) { return parseDate(d.date); },
xScale = 'time';
return (
<BarGroupChart data={barchartData} width={width} height={height} title={title} margins={margins}
xScale={xScale} chartSeries={chartSeries} x={x} />
);
}
}`
I looked at the previous revision and tried manually monkey patched the previous function call of yScaleSet.rangeBand() but that throws a yScalSet.rangeBand() is not a function. Any ideas?