Back edit Edit This Example

Horizontal Bars

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.

© Arction Ltd 2009-2020. All rights reserved.