Version: 1.2.0

Column Chart

A column chart is a data visualization where each category is represented by a rectangle, with the height of the rectangle being proportional to the values being plotted. Column charts are also known as vertical bar charts. Idea is to develop column charts 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. The following are the components that are used to develop a column chart.

Live Editor

Usage

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

2 . Add data or URL to ColumnChart component.

<ColumnChart data={ColumnChartData} />
// or
<ColumnChart url="server/api/data" />

Examples

Basic ColumnChart With X and Y Axis: Demo

<ColumnChart
  barWidth={0.1}
  data={[
    {
      data: [
        {
          x: "bar-1",
          y: 100,
        },
        {
          x: "bar-2",
          y: 200,
        },
        {
          x: "bar-3",
          y: 300,
        },
        {
          x: "bar-4",
          y: 400,
        },
        {
          x: "bar-11",
          y: 100,
        },
        {
          x: "bar-12",
          y: 200,
        },
        {
          x: "bar-13",
          y: 300,
        },
        {
          x: "bar-14",
          y: 400,
        },
      ],
      name: "series 1",
    },
  ]}
  title={<span>Heading</span>}
  xAxis={{
    style: {
      fontSize: "12px",
      strokeWidth: 0.6,
    },
    tickPadding: 15,
    tickSizeInner: 0,
    tickSizeOuter: 6,
  }}
  xyPlot={{
    yDomain: [0, 400],
  }}
  yAxis={{
    hideLine: true,
    style: {
      fontSize: "12px",
    },
    tickPadding: 15,
    tickSize: 0,
    tickTotal: 2,
  }}
/>

Basic ColumnChart with Labels: Demo

<ColumnChart
  barWidth={0.1}
  data={[
    {
      data: [
        {
          x: "Jun 1",
          y: 100,
        },
        {
          x: "Jun 2",
          y: 200,
        },
        {
          x: "Jun 3",
          y: 300,
        },
        {
          x: "Jun 4",
          y: 400,
        },
        {
          x: "Jun 5",
          y: 100,
        },
        {
          x: "Jun 6",
          y: 200,
        },
        {
          x: "Jun 7",
          y: 300,
        },
        {
          x: "Jun 8",
          y: 400,
        },
      ],
      name: "Inside Links",
    },
    {
      data: [
        {
          x: "Jun 1",
          y: 100,
        },
        {
          x: "Jun 2",
          y: 200,
        },
        {
          x: "Jun 3",
          y: 300,
        },
        {
          x: "Jun 4",
          y: 400,
        },
        {
          x: "Jun 5",
          y: 100,
        },
        {
          x: "Jun 6",
          y: 200,
        },
        {
          x: "Jun 7",
          y: 300,
        },
        {
          x: "Jun 8",
          y: 400,
        },
      ],
      name: "Outside Links",
    },
  ]}
  title={<span>Heading</span>}
  tooltip={{
    component: function noRefCheck() {},
  }}
  xyPlot={{
    stackBy: "y",
  }}
/>

Stacked ColumnChart With Legends: Demo

<ColumnChart
  barWidth={0.1}
  data={[
    {
      data: [
        {
          x: "Jun 1",
          y: 100,
        },
        {
          x: "Jun 2",
          y: 200,
        },
        {
          x: "Jun 3",
          y: 300,
        },
        {
          x: "Jun 4",
          y: 400,
        },
        {
          x: "Jun 5",
          y: 100,
        },
        {
          x: "Jun 6",
          y: 200,
        },
        {
          x: "Jun 7",
          y: 300,
        },
        {
          x: "Jun 8",
          y: 400,
        },
      ],
      name: "Inside Links",
    },
    {
      data: [
        {
          x: "Jun 1",
          y: 100,
        },
        {
          x: "Jun 2",
          y: 200,
        },
        {
          x: "Jun 3",
          y: 300,
        },
        {
          x: "Jun 4",
          y: 400,
        },
        {
          x: "Jun 5",
          y: 100,
        },
        {
          x: "Jun 6",
          y: 200,
        },
        {
          x: "Jun 7",
          y: 300,
        },
        {
          x: "Jun 8",
          y: 400,
        },
      ],
      name: "Outside Links",
    },
  ]}
  title={<span>Heading</span>}
  xyPlot={{
    stackBy: "y",
  }}
/>

Grouped ColumnChart With Legends: Demo

<ColumnChart
  barWidth={0.2}
  data={[
    {
      data: [
        {
          x: "Jun 1",
          y: 100,
        },
        {
          x: "Jun 2",
          y: 200,
        },
        {
          x: "Jun 3",
          y: 300,
        },
        {
          x: "Jun 4",
          y: 400,
        },
        {
          x: "Jun 5",
          y: 100,
        },
        {
          x: "Jun 6",
          y: 200,
        },
        {
          x: "Jun 7",
          y: 300,
        },
        {
          x: "Jun 8",
          y: 400,
        },
      ],
      name: "Embedded Links",
    },
    {
      data: [
        {
          x: "Jun 1",
          y: 100,
        },
        {
          x: "Jun 2",
          y: 200,
        },
        {
          x: "Jun 3",
          y: 300,
        },
        {
          x: "Jun 4",
          y: 400,
        },
        {
          x: "Jun 5",
          y: 100,
        },
        {
          x: "Jun 6",
          y: 200,
        },
        {
          x: "Jun 7",
          y: 300,
        },
        {
          x: "Jun 8",
          y: 400,
        },
      ],
      name: "Inside Links",
    },
    {
      color: "#b177bb",
      data: [
        {
          x: "Jun 1",
          y: 100,
        },
        {
          x: "Jun 2",
          y: 200,
        },
        {
          x: "Jun 3",
          y: 300,
        },
        {
          x: "Jun 4",
          y: 400,
        },
        {
          x: "Jun 5",
          y: 100,
        },
        {
          x: "Jun 6",
          y: 200,
        },
        {
          x: "Jun 7",
          y: 300,
        },
        {
          x: "Jun 8",
          y: 400,
        },
      ],
      name: "Outside Links",
    },
  ]}
  title={<span>Heading</span>}
/>

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	ColumnChartData[]	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	false	Enable or customize VerticalGridLines. Inherited from "react-vis".
horizontalGridLines	boolean \| HorizontalGridLinesProps	no	false	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	true	Enable or customize the legends.
onClick	onClick?: (event: { data: VerticalBarSeriesPoint }) => void;	no	None	Callback for column 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.

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

Custom Types

ColumnChartData

Here is the format of the data accepted by ColumnChart.

interface ColumnChartData extends Omit<VerticalBarSeriesProps, "data"> {
  name: string;
  data: VerticalBarSeriesPoint[];
}

VerticalBarSeriesProps and VerticalBarSeriesPoint 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: VerticalBarSeriesPoint }) => JSX.Element);

VerticalBarSeriesPoint 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#

ColumnChartData#

LabelComponent#

GradientColor#

Classes#