JavaScript Horizontal Bar Chart

Also known as Bar Graph, Column Chart or Column Graph

Similarly to Column Chart or Vertical Bar Chart, this example shows the creation of a column chart made on user side by utilizing RectangleSeries, but displays data as horizontal bars. Bar Charts show discrete numerical comparisons across categories, where the value represents the length of a bar.

The following code below shows the creation of a Horizontal Bar Chart using a pre-defined interface. Moreover, the current interface allows visualizing columns with negative values.

The bar series accepts points in format { category: string, value: number }. Any number of points can be added with a single call.

// Create Chart.
const chart = barChart()

// Add bars.
chart.addValues([
    { category: 'A', value: 20 },
    { category: 'B', value: -30 },
])

The actual Bar Chart logic just serves to provide a starting point for users to create their own API based on their needs and preferences.