Uncaught TypeError: yScaleSet.bandwidth is not a function

[stevesuh]

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?

[fyyyyy]

+1

[Elijen]

@fyyyyy @stevesuh Same issue here. Have you figured out how to fix this?

[fyyyyy]

Dont use non-integer data for bar charts axis, e.g. date

[allsportster023]

Has there been any update to this? I see that I can get a time axis with Line Charts, but I cannot seem do it with a basic bar chart - I am getting the same error stated above. There do not seem to be any examples online to compare against. Any help would be appreciated.

[servomac]

Same problem here:

         <BarChart
              height={30}
              data={this.props.history.map(function(item) { 
                return {
                  responseTime: item.response_time,
                  date: item.executed_at,
                } 
              })}
              chartSeries={[{
                field: 'responseTime',
                name: 'Frequency',
              }]}
              x={(d) => d3.time.format.utc("%Y-%m-%dT%H:%M:%S.%LZ")} //2017-05-26T13:41:53.759145
              xScale='time'
            />

[fyyyyy]

dont use date or other formats. only integer axis data seems to be supported

[praveenuics]

I stuck on same issue, is resolved by any chance?, if so please share, thank you.