Horizontal chart

General information

Horizontal 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 horizontal columns with field names on the left side of them and values expressed in row size and tooltip inscriptions, chart also has values line at the bottom.

Example of a vertical chart

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

import { HorizontalChart } 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 <HorizontalChart 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 HorizontalChart 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 HorizontalChart component provides a certain number of props for customization. The properties are given in table below.

Props