Histogram

  • DataSet 1
  • DataSet 2

JSX
<Histogram
  axis={{
    x: {
      dateFormat: '%d-%b-%y',
      scale: 'TIME'
    },
    y: {
      ticks: 3
    }
  }}
  bar={{
    margin: 0,
    width: 10
  }}
  colorScheme={[
    '#449098',
    '#a9a9a9',
    '#cdcdcd',
    '#007656',
    '#f9c80e',
    '#7d5d2e',
    '#d7263d',
    '#D7263D',
    '#ff8d33',
    '#ff7101',
    '#FBD7D9',
    '#77c3cb',
    '#227839',
    '#888888',
    '#dbdbdb',
    '#56b4bf',
    '#00a97b',
    '#e6e6e6',
    '#cccccc',
    '#F9C80E',
    '#008762',
    '#FF7101',
    '#c5e5e9',
    '#33ba95',
    '#cc5a00'
  ]}
  data={{
    bins: [
      '3/8/2019, 12:34:34 PM',
      '3/9/2019, 12:34:34 PM',
      '3/10/2019, 12:34:34 PM',
      '3/11/2019, 12:34:34 PM'
    ],
    counts: [
      {
        data: [
          1,
          2,
          3,
          4
        ],
        label: 'DataSet 1'
      },
      {
        data: [
          13,
          14,
          15,
          16
        ],
        label: 'DataSet 2'
      }
    ]
  }}
  delay={0}
  duration={400}
  grid={{
    x: {
      style: {
        stroke: '#ccc',
        'stroke-opacity': 0.4
      },
      ticks: 5
    },
    y: {
      height: 20,
      style: {
        stroke: '#ccc',
        'stroke-opacity': 0.4
      },
      ticks: 5
    }
  }}
  height={300}
  margin={{
    left: 5,
    top: 5
  }}
  stroke={{
    color: function noRefCheck() {},
    width: 1
  }}
  tipContentFn={function noRefCheck() {}}
  visible={{}}
  width="100%"
/>
BinDataSet 1DataSet 2
3/8/2019, 12:34:34 PM113
3/9/2019, 12:34:34 PM214
3/10/2019, 12:34:34 PM315
3/11/2019, 12:34:34 PM416