Understanding grouped bar charts

[swetakedia]

I have few data which I have implemented using Bar chart using grouped bar chart. However the rendering is not as expected. The numbers in Y axis is getting defined randomly. Really want to implement this successfully. Appreciate any help.

PFB my code:

import React from 'react';
import Panel from 'muicss/lib/react/panel';
import axios from 'axios';
import {scale, format} from 'd3';
import BarChart from 'react-d3-components/lib/BarChart';
import clone from 'lodash/clone';
import each from 'lodash/each';

export default class PublicNetworkLedgersHistoryChart extends React.Component {
  constructor(props) {
    super(props);
    this.panel = null;
    this.colorScale = scale.category10();
    this.state = {loading: true, chartWidth: 400, chartHeight: this.props.chartHeight || 120};
  }

  componentDidMount() {
    this.getLedgers();
    setInterval(() => this.getLedgers(), 1000*60*5);
    // Update chart width
    setInterval(() => {
      let value = this.panel.offsetWidth-20;
      if (this.state.chartWidth != value) {
        this.setState({chartWidth: value});
      }
    }, 5000);
  }

  getLedgers() {
        axios.get('/ledgers/public')
      .then(response => {
        let data = [{
          label: "Transactions",
          values: []
        }, {
          label: "Operations",
          values: []
        }];
        each(response.data, day => {
          data[0].values.unshift({x: day.date, y: day.transaction_count});
          data[1].values.unshift({x: day.date, y: day.operation_count});
        });
        this.setState({loading: false, data});
      });
  }

  render() {
    return (
      <div ref={(el) => { this.panel = el; }}>
        <Panel>
          <div className="widget-name">
            <span style={{borderBottom: '2px solid #0074B7'}}>Txs
            </span> &amp; <span style={{borderBottom: '2px solid #FF6F00'}}>Ops</span> in the last 30 days: Live Network
          </div>
          {this.state.loading ?
            'Loading...'
            :
            <BarChart
              groupedBars              

              data={this.state.data}
              width={this.state.chartWidth}
              colorScale={this.colorScale}
              height={this.state.chartHeight}
              margin={{top: 10, bottom: 28, left: 50, right: 10}}/>
          }
        </Panel>
      </div>
    );
  }
}

Also I have attached the output which axios.get('/ledgers/public') is returning. data.txt

Following is screenshot of the rendered chart as per data:

I am wondering why the min value in Y axis is not 0? and the chart is also not rendered properly.

[codesuki]

I did some debugging and figured out that some values you give are null. That confuses the automatic scale generation. There are two ways forward. Either set your own scales or replace the null with 0 so the code recognizes your data as numeric.

https://github.com/codesuki/react-d3-components/blob/master/src/DefaultScalesMixin.jsx#L98

[guptasaumya]

Hi @codesuki what type of function am I supposed to write in order to get the legends too.

[codesuki]

If you supply your own colorScale you can use the same scale to build any legend you like with any react code.

[guptasaumya]

This tooltipHtml feature isn't working for me. I have also declared this variable:

var tooltip = function(x, y0, y, total) { console.log(y.toString()) return y.toString(); };

the console.log(y.toString()) works here but doesn't show on the UI?

[guptasaumya]

Hi @codesuki

This tooltipHtml feature isn't working for me. I have also declared this variable:

var tooltip = function(x, y0, y, total) { console.log(y.toString()) return y.toString(); };

the console.log(y.toString()) works here but doesn't show on the UI?

[guptasaumya]

It's for grouped bar chart @codesuki .