Version: 1.2.0

Bar Chart

A bar chart is a data visualization where each category is represented by a rectangle, with the width of the rectangle being proportional to the values being plotted. Idea is to develop a bar chart in react-vis. React-vis is a charting library that provides chart components. In other words, the chart is composed of multiple sub-components like XYPlot, xAxis, yAxis.

Live Editor

Usage

1 . Import BarChart after installation

import { BarChart } from "@k2/rv-viz";

2 . Add data or URL to BarChart component.

<BarChart data={BarChartData} />
// or
<BarChart url="server/api/data" />

Examples

Basic BarChart With X and Y Axis: Demo

<BarChart
  data={[
    {
      color: "#5579ae",
      data: [
        {
          labelColor: "#777777",
          x: 20.5,
          y: "Critical",
        },
        {
          labelColor: "#777777",
          x: 34,
          y: "High",
        },
        {
          labelColor: "#777777",
          x: 22,
          y: "Mid",
        },
        {
          labelColor: "#777777",
          x: 80.55,
          y: "Low",
        },
      ],
      name: "Series 1",
    },
  ]}
  title={<span>Heading</span>}
  xAxis={{
    style: {
      strokeWidth: 0.5,
    },
    tickFormat: function noRefCheck() {},
    tickSize: 0,
    tickTotal: 100,
    tickValues: [0, 20, 40, 60, 80, 100],
  }}
  xyPlot={{
    margin: {
      left: 50,
      right: 30,
    },
    xDomain: [0.5, 100],
  }}
  yAxis={{
    hideLine: true,
    tickSize: 0,
  }}
/>

Basic BarChart with Labels: Demo

<BarChart
  data={[
    {
      data: [
        {
          color: "#e77355",
          labelColor: "#777777",
          x: 20.5,
          y: "Critical",
        },
        {
          color: "#f29d56",
          labelColor: "#777777",
          x: 34,
          y: "High",
        },
        {
          color: "#f1bf43",
          labelColor: "#777777",
          x: 22,
          y: "Mid",
        },
        {
          color: "#6ab04c",
          labelColor: "#777777",
          x: 80.55,
          y: "Low",
        },
      ],
      name: "Series 1",
    },
  ]}
  label={({ data }: { data: HorizontalBarSeriesPoint }) => {
    return <div>{data.x}%</div>;
  }}
  title={<span>Heading</span>}
  xyPlot={{
    margin: {
      left: 50,
      right: 30,
    },
    xDomain: [0.5, 100],
  }}
/>

Stacked BarChart With Legends: Demo

<BarChart
  xyPlot={{
    stackBy: "x",
  }}
  data={[
    {
      data: [
        {
          x: 100,
          y: "Jun 1",
        },
        {
          x: 200,
          y: "Jun 2",
        },
        {
          x: 30,
          y: "Jun 3",
        },
        {
          x: 200,
          y: "Jun 4",
        },
        {
          x: 50,
          y: "Jun 5",
        },
      ],
      name: "External Links",
    },
    {
      data: [
        {
          x: 200,
          y: "Jun 1",
        },
        {
          x: 60,
          y: "Jun 2",
        },
        {
          x: 80,
          y: "Jun 3",
        },
        {
          x: 200,
          y: "Jun 4",
        },
        {
          x: 80,
          y: "Jun 5",
        },
      ],
      name: "Inside Links",
    },
    {
      data: [
        {
          x: 50,
          y: "Jun 1",
        },
        {
          x: 140,
          y: "Jun 2",
        },
        {
          x: 200,
          y: "Jun 3",
        },
        {
          x: 100,
          y: "Jun 4",
        },
        {
          x: 100,
          y: "Jun 5",
        },
      ],
      name: "Outside Links",
    },
  ]}
/>

Grouped BarChart With Legends: Demo

<BarChart
  data={[
    {
      data: [
        {
          x: 100,
          y: "Jun 1",
        },
        {
          x: 200,
          y: "Jun 2",
        },
        {
          x: 30,
          y: "Jun 3",
        },
      ],
      name: "External Links",
    },
    {
      data: [
        {
          x: 200,
          y: "Jun 1",
        },
        {
          x: 60,
          y: "Jun 2",
        },
        {
          x: 80,
          y: "Jun 3",
        },
      ],
      name: "Inside Links",
    },
    {
      data: [
        {
          x: 130,
          y: "Jun 1",
        },
        {
          x: 40,
          y: "Jun 2",
        },
        {
          x: 90,
          y: "Jun 3",
        },
      ],
      name: "Other Links",
    },
  ]}
/>

Props

Note: External props are mostly derived from react-vis & K2. All external props are linked. You can click highlighted props to get more details from official sites.

Property	Type	Required	Default value	Description
data	BarChartData[]	yes		Data for the chart.
xyPlot	XYPlotProps	no	None	Customize XYPlot. Inherited from "react-vis".
xAxis	boolean \| XAxisProps	no	true	Enable or customize XAxis. Inherited from "react-vis".
yAxis	boolean \| YAxisProps	no	true	Enable or customize YAxis. Inherited from "react-vis".
verticalGridLines	boolean \| VerticalGridLinesProps	no	true	Enable or customize VerticalGridLines. Inherited from "react-vis".
horizontalGridLines	boolean \| HorizontalGridLinesProps	no	true	Enable or customize HorizontalGridLines. Inherited from "react-vis".
barWidth	number	no	0.3	Inherited from "react-vis" BarSeries
title	string \| JSX.Element	no	None	Title of the chart.
animate	boolean	no	true	Enable the animation.
colors	{[theme-name: e.g "light" or "dark"] : string[] \| GradientColor[]	no	{ dark: ["#5579ae", "#e5c238", "#CF7373", "#85BE50"], light: ["#5579ae", "#e5c238", "#CF7373", "#85BE50"], }	Colors of visual in different theme modes
label	boolean \| LabelComponent	no	true	Enable or customize the labels(Note: Labels appear only in case of single series).
tooltip	boolean \| TooltipProps	no	true	Enable or customize the tooltip.
legends	boolean \| LegendsProps	no	false	Enable or customize the legends.
onClick	onClick?: (event: { data: HorizontalBarSeriesPoint }) => void;	no	None	Callback for bar click.
style	CSSProperties	no	None	Styles applied to the root element of chart.
className	string	no	None	Class applied to the root element of chart.
classes	Classes	no	None	Classes of chart.

BarChart is wrapped with fetchData HoC, to perform data handling tasks, which adds support for some additional props.

Custom Types

BarChartData

Here is the format of the data accepted by BarChart.

interface BarChartData extends Omit<HorizontalBarSeriesProps, "data"> {
  name: string;
  data: HorizontalBarSeriesPoint[];
}

HorizontalBarSeriesProps and HorizontalBarSeriesPoint are derived from react-vis

LabelComponent

This is a type of custom label component. You can create a custom label component by this.

type LabelComponent =
  | boolean
  | ((props: { data: HorizontalBarSeriesPoint }) => JSX.Element);

HorizontalBarSeriesPoint is derived from react-vis

GradientColor

Type of GradientColor object.

type GradientColor = {
  name: string,
  startingColor: string,
  endingColor: string,
  startingColorStopOpacity?: number,
  endingColorStopOpacity?: number,
  x1?: string,
  x2?: string,
  y1?: string,
  y2?: string,
};

Classes

Classes enable customization and styling of chart elements through their classes.

ClassName	Type	Required	Default value	Description
root	string	no	None	Applied to root element of chart.
header	string	no	None	Applied to header of chart.
title	string	no	None	Applied to title of chart.
legends	string	no	None	Applied to legends of chart.
tooltip	string	no	None	Applied to tooltip of chart.
chart	string	no	None	Applied to svg component of chart.
barSeries	string	no	None	Applied to bar series of chart.
xAxis	string	no	None	Applied to x axis of chart.
yAxis	string	no	None	Applied to y axis of chart.
label	string	no	None	Applied to labels of chart.

Please see Class Specificity for correctly defining it.

Usage#

Examples#

Props#

Custom Types#

BarChartData#

LabelComponent#

GradientColor#

Classes#