Vertical chart

General information

Vertical chart is one of the simplest chart in the surf-charts library, designed to display a small amount of simple structured information in the form of vertical columns with field names below them and values expressed in column size and tooltip inscriptions, chart also has values line at the left.

Example of a vertical chart

The example below shows the default behavior of the chart with only the necessary props.

import { VerticalChart } from '@surf/charts';
 
const data = [
  { label: 'January', value: 1200 },
  { label: 'February', value: 800 },
  { label: 'March', value: 1500 },
  { label: 'April', value: 1100 },
  { label: 'May', value: 1400 }
];
 
function App() {
  return <VerticalChart label='Sales' data={data} />;
}

Result

Handling dynamic data

Charts often need to handle dynamic data, such as when data is fetched from a server. The VerticalChart component is designed to handle various data scenarios gracefully:

• Incomplete Data: If the number of data points is less than the maxBars, only the available data will be displayed without leaving empty spaces.
• Excess Data: If there are more data points than the specified maxBars, only the first few data points will be displayed according to the maxBars value.

For full information about async data you can read here.

Customization

The VerticalChart component provides a certain number of props for customization. The properties are given in table below.

Props