How to give value above each bar in bar chart of react-vis?

Question

I want to display string or numeric value above each rect(bar) element in VerticalBarSeries of react-vis. And value should be just above the bar height. Also, How can I change bar height,width and margin of barSeries. I have used display: flex to make multiply bar chart appear next to each is there any another way to do it? Below is my code:

import React from 'react';
import {
  XYPlot,
  XAxis,
  YAxis,
  makeVisFlexible,
  makeWidthFlexible,
  makeHeightFlexible,
  VerticalBarSeries,
  VerticalBarSeriesCanvas
} from 'react-vis';

const myDATA = [
  { y: 100, x: "Jan" },
  { y: 112, x: "Feb" },
  { y: 230, x: "Mar" },
  { y: 250,x: "Apr" },
  { y: 270,x: "grbd" },
];
const yDomain = myDATA.reduce(
  (res, row) => {
    return {
      max: Math.max(res.max, row.y),
      min: Math.min(res.min, row.y)
    };
  },
  {max: -Infinity, min: Infinity}
);

export default class Example extends React.Component {
  state = {
    useCanvas: false
  };

  render() {
    const FlexibleXYPlot = makeVisFlexible(XYPlot);
    const FlexibleWidthXYPlot = makeWidthFlexible(XYPlot);
    const FlexibleHeightXYPlot = makeHeightFlexible(XYPlot);
    const data = myDATA;
    const chartWidth = 150;
    const chartHeight = 300;
    const chartDomain = [0, chartHeight]
    return (
      <div style={{display: 'flex'}}>
        <FlexibleXYPlot
          xType="ordinal"
          width={chartWidth}
          height={chartHeight}
          yDomain={chartDomain}
          style={{float: 'left'}}
          margin={{left: 40, right: 10, top: 10, bottom: 40}}
        >
          <VerticalBarSeries
            data={data}
          />
        </FlexibleXYPlot>
        <XYPlot
          xType="ordinal"
          width={chartWidth}
          height={chartHeight}
          yDomain={chartDomain}
          style={{float: 'left'}}
        >
          <VerticalBarSeries
            data={data}
          />
        </XYPlot>
        <XYPlot
          xType="ordinal"
          width={chartWidth}
          height={chartHeight}
          yDomain={chartDomain}
          float='left'
          style={{float: 'left'}}
        >
          <VerticalBarSeries
            data={data}
          />
        </XYPlot>
      </div>


    )
  }
}

score 1 · Answer 1 · answered May 18 '20 at 11:12

to display values of bar chart , u can use Hint component provided in react vis. use onValueMouseOver onValueMouseOut in your VerticalBarSeries to call function to set and remove value in a variable. then use that value in Hint to display.

<Hint value={value}>
   <p>{value.x + " X Value"}</p>
   <p>{value.y + " Y Value"}</p>
</Hint>

React-vis Hint

Hope this solves your issue.

score 0 · Answer 2 · answered Dec 05 '19 at 13:51

To give value to each bar use LabelSeries.

There is an example in documentation:

https://github.com/uber/react-vis/blob/51aa38da2e01c9ad17ae4cb7594943349e87e687/showcase/plot/bar-chart.js

I'm not sure about bar height, but width and margin could be controllled by barWidth prop in VerticalBarSeries

How to give value above each bar in bar chart of react-vis?

2 Answers2

Linked