Horizontal Stacked Bar Chart
Horizontal stacked bar charts are a combination of horizontal stacked bar charts and stacked bar charts. They are used to display the total value of multiple categories and their individual contributions to that total, with the bars oriented horizontally. This type of chart is especially helpful when:
- Labels for categories are long or complex: Horizontal stacked bars can make it easier to read and understand the labels.
- The chart is designed for a widescreen display: Horizontal stacked bars can better utilize the available space.
- The chart is intended to be printed in a landscape orientation: Horizontal stacked bars can fit more information on a page.
- You want to show the composition of a total value: How different categories contribute to a whole.
- You want to compare the total values of different groups: Identify which groups have higher or lower total values.
- You want to analyze how the composition of the total value changes across different groups: Understand the differences in the contributions of various categories to the total value.
Here's a detailed guide on creating a horizontal stacked bar chart with LiveGap charts.
How to create and customize a horizontal stacked Bar Chart
Step 1: Create a Horizontal Stacked Bar Chart
To create a new horizontal stacked bar Chart, click the Make your Chart button on the LiveGap Charts Home screen and select Stacked Horizontal Bar from the list of options.
This will open the Chart editor with the default horizontal stacked bar chart loaded.
You can load a different horizontal stacked bar chart from the Gallery by clicking the SELECT CHART button under the CHART tab in the right sidebar.
Step 2: Add data to your chart
Add your data to your horizontal stacked bar chart using the spreadsheet at the bottom of the screen.
Customize chart in editor
You may also import data from an existing spreadsheet (.csv file) by clicking the DATA tab in the header and then click Import.
Step 3: Customize your Chart
Customize your chart using the various customization options in the right sidebar.
This table describes what each option does.
Step 4: Save your Chart
First, edit your chart's title and subtitle by clicking Chart Title and Add SubTitle Here or by using the Text tab in the right sidebar.
To save your chart locally to your device, click the download icon beneath your chart and choose your desired download option by clicking on one of the popup icons.
You can choose to save your chart as an Image, Video, or in HTML.
To save your chart online, click the FILE tab in the header and then click Save Online from the dropdown.
Tip
Click My Charts under the VIEW tab in the header to open a chart previously saved online.
Step 5: Export data (Optional)
If desired, export the data used to create the chart as a spreadsheet (.csv file) by clicking the DATA tab in the header and then click Export.
Customization Options
Chart
| Option | Type | Function |
|---|---|---|
| Gallery | Menu | Opens the gallery, allowing you to select from a range of pre-made chart templates. |
| Chart Type | Dropdown | Allows selection of the type of chart (e.g., Line Chart, Bar Chart, etc.). |
| Link Type | Dropdown | Determines how data points are connected (e.g., point-to-point, spline). |
| Width | Slider | Adjusts the overall width of the chart. |
| Height | Slider | Adjusts the overall height of the chart. |
| BackColor | Color Picker | Changes the background color of the chart. Click the + button to add more colors. |
| Canvas | Button | Opens additional options for adjusting the canvas (padding, margin, color, border, etc.). |
| Border | Button + Toggle | Toggles border around the chart and opens additional settings for customizing it. |
| Box Shadow | Toggle | Toggles a shadow effect around the chart and opens additional settings for customizing it. |
| Format | Section | Opens settings for customizing how numbers are displayed on the chart. |
Colors
| Option | Type | Function |
|---|---|---|
| Multi Colors | Checkbox | Toggles the use of different colors for each bar in the chart. |
| Fill | Section | Settings to customize the bar fill appearance, allowing for tailored color and style options. |
| Fill style | Button | Opens options to set the fill style for each set of bars (between color, gradient, and pattern). |
| Color Picker | Button | Opens a color picker to set the fill color. |
| Fill pattern | Dropdown | Opens options to set the fill pattern type for each set of bars (only available when fill style is set to pattern) |
| Style | Button | Opens the color scheme selection window. |
| Stroke | Switch + section | Enables or disables stroke (border) for the bars and opens settings to customize them |
In-Graph Data
| Option | Type | Function |
|---|---|---|
| In-Graph Data | Switch + Button | Toggle the display of in-graph data on or off and opens customization options. |
| Type | Dropdown | Selects the type of data to display in-graph, such as value, percentage, or label |
| Position | Button + Section | Opens configuration options for the position of in-graph data. |
| Padding X | Slider | Adjusts horizontal padding of the in-graph text. |
| Padding Y | Slider | Adjusts vertical padding of the in-graph text. |
| Align | Dropdown | Sets horizontal alignment of the in-graph text. Options include left, center, and right. |
| VAlign | Dropdown | Sets the vertical alignment of the in-graph text. Options include top, middle, and bottom. |
| Rotate | Slider | Adjusts the rotation angle of the in-graph text. |
| BackgroundColor | Checkbox + Color pricker | Enables a background color for the in-graph text. |
| Border | Checkbox + Color picker | Enables a border around the in-graph text and enables you to change its color. Click the + button to add separate colors for each set of data points. |
| Padding | Slider | Adjusts the padding of the in-graph text's bounding box. |
| Font | Button + Section | Allows customization of the font settings for in-graph data. |
| Font Family | Dropdown | Selects the font family. Default is 'Open Sans'. |
| Font Style | Icons | Options to change the font color or make the font bold or italic. Click the + button to add separate colors for each set of data points. |
| Font Size | Slider | Adjusts the font size for in-graph text. |
Bar
| Option | Type | Function |
|---|---|---|
| Multi Colors | Checkbox | Enables multi-color bars in the chart for different datasets. |
| Show Stroke | Checkbox + section | Toggles the stroke (outline) for each bar and opens additional customization settings for them. |
| Border Radius | Slider | Adjusts the corner radius of the bars, making them rounded or square. |
| Value Spacing | Slider | Controls the spacing between values (bars) in the dataset. |
| Dataset Spacing | Slider | Adjusts the spacing between different datasets (e.g., 2023 vs 2024). |
Legend
| Option | Type | Function |
|---|---|---|
| Columns | Slider | Adjusts the number of columns in the legend. |
| BlockSize | Slider | Modifies the size of each block of text and icons in the legend. |
| Position | Section | Controls the position of the legend on the chart. Options include X Position (Left, Center, Right) and Y Position (Top, Middle, Bottom). |
| Padding X | Slider | Adjusts the horizontal padding around the legend. |
| Padding Y | Slider | Adjusts the vertical padding around the legend. |
| Background Color | Color Picker | Sets the background color for the legend. |
| Margin | Slider | Adjusts the margin around the entire legend box. |
| Border | Multiple | Lets you set a border around the Legend and change its color, line type, etc. |
| Padding | Slider | Adjusts the padding inside the legend box. |
| Space | Multiple sliders | Adjusts the legend's logo and text spacing. |
| Font | Section | Allows customization of the font settings for the legend. |
| Font Family | Dropdown | Selects the font family. Default is 'Open Sans'. |
| Font Style | Icons | Options to change the font color or make the font bold or italic. |
| Font Size | Slider | Adjusts the font size for the legend. |
Scale
| Option | Type | Function |
|---|---|---|
| Show Labels | Checkbox | Toggles the visibility of labels on the scale. |
| Label | Input Field | Sets the text for the scale labels. |
| Line Color | Color Picker | Selects the color of the scale lines. |
| Line Width | Slider | Adjusts the width of the scale lines. |
| Line Style | Dropdown | Selects the style of the scale lines (e.g., solid, dashed). |
| Override | Button | Allows manual adjustment of scale starting value, step, and width. |
| Tick Size | Sliders | Adjusts the size of ticks on the scale (Top, Bottom, Left, Right). |
| Font | Section | Allows customization of the font settings for the scale. |
| Font Family | Dropdown | Selects the font family. Default is 'Open Sans'. |
| Font Style | Icons | Options to change the font color, or make the font bold or italic. |
| Font Size | Slider | Adjusts the font size for the scale. |
Axis
| Option | Type | Function |
|---|---|---|
| X Axis | Section + Toggle | Toggles the X-axis visibility and enables settings to customize it. |
| Text Rotate | Slider | Rotates X-axis points labels. |
| Label | Toggle | Toggles X-axis label visibility. |
| Font | Section | Allows customization of the font settings for the X-axis label. |
| Font Family | Dropdown | Selects the font family. Default is 'Open Sans'. |
| Font Style | Icons | Options to change the font color, or make the font bold or italic. |
| Font Size | Slider | Adjusts the font size for the X-axis label. |
| Y Axis | Section | Provides options to customize the Y-axis' label, position, and font. |
Grid
| Option | Type | Function |
|---|---|---|
| Line Color | Color Picker | Selects the color of the grid lines. |
| Overlay | Checkbox | Toggles the overlay of grid lines on the chart. |
| Line Style | Dropdown | Selects the style of the grid lines (e.g., solid, dashed). |
| Line Width | Slider | Adjusts the width of the grid lines. |
| X Lines Step | Slider | Adjusts the spacing between vertical grid lines. |
| Y Lines Step | Slider | Adjusts the spacing between horizontal grid lines. |
Text
| Option | Type | Function |
|---|---|---|
| Title | Section | Options to customize the chart's title's text, color, fonts, etc. |
| SubTitle | Section | Options to customize the chart's subtitle's text, color, fonts, etc. |
| Footnote | Section | Options to customize the chart's footnote's text, color, fonts, etc. |
Annotations
| Option | Type | Function |
|---|---|---|
| Annotations | Toggle | Toggles the display of data annotations on the chart when hovering over points with the mouse. |
| Value | Dropdown | Selects the data value to annotate on the chart (percentage, label, or value). |
| BackColor | Color Picker | Sets the background color for the annotation. |
| Padding | Sliders | Adjusts the padding around the annotation (Top, Left, Right, Bottom). |
| Border | Button + Toggle | Configures the border settings for the annotation. |
| Font | Button | Opens font customization options for the annotation text. |
Animation
| Option | Type | Function |
|---|---|---|
| Steps | Slider | Adjusts the number of steps in the animation. |
| Easing | Dropdown | Selects the easing function for the animation (e.g., Linear). |
| In & Out | Dropdown | Chooses the animation direction (In, Out). |
| By Dataset | Checkbox | Animates the chart according to the dataset. |
| Left To Right | Checkbox | Animates the chart from left to right. |
| Animate | Button | Starts the animation. |
Freehand
| Option | Type | Function |
|---|---|---|
| Stroke Roughness | Slider | Adjusts the roughness of the stroke lines. |
| Stroke Bowing | Slider | Controls the bowing effect of the stroke lines. |
| Fill Style | Dropdown | Selects the fill style for the chart elements (e.g., Hachure). |
| Fill Weight | Slider | Adjusts the weight of the fill lines. |
| Fill Roughness | Slider | Controls the roughness of the fill. |
| Fill Bowing | Slider | Adjusts the bowing of the fill lines. |
| Hachure Angle | Dropdown | Sets the angle of the hachure lines. |
| Hachure Gap | Slider | Adjusts the gap between hachure lines. |