Bar-Line Chart
Bar-line charts combine bar charts and line charts into a single visualization. This type of chart is useful when you want to:
Compare two or more data sets with different measurement scales: One data set can be represented by bars, while the other is represented by a line. Show the relationship between two data sets over time: The bars can represent values at specific points in time, while the line can show the trend or pattern of change. Visualize both categorical and numerical data: The bars can represent categorical data, while the line can represent numerical data.
Here's a detailed guide on creating a bar-line chart with LiveGap charts.
How to create and customize a bar-line Chart
Step 1: Create a Bar-Line Chart
To create a new bar-line Chart, visit the LiveGap charts web app and click the Chart button in the sidebar to your right.
In the dropdown that opens, click the Chart Type dropdown and select Bar Line Chart.
This will load the default bar-line chart.
You can load a different bar-line 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 bar-line 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. |
Bar Line
| Option | Type | Function |
|---|---|---|
| Row 0 | Dropdown | Sets the chart type to display data on the first row of the data spreadsheet (bar or line). |
| Row 1 | Dropdown | Sets the chart type to display data on the second row of the data spreadsheet (bar or line). |
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 and line fill appearance, allowing for tailored color and style options. |
| Fill style | Button | Opens options to set the fill style for each set of bars and the line (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. |
| Bar Stroke | Switch + section | Enables or disables stroke (border) for the bars and opens settings to customize them |
| Line Stroke | Switch + section | Enables or disables the line that connects the data points on the chart and opens customization opens |
| Colors | Color Picker | Allows selection of colors for the lines on the chart. |
| Line Style | Dropdown | Provides options to select different styles for the line (e.g., solid, dashed). |
| Width | Slider | Adjusts the thickness of the lines connecting the data points. |
| Points | Toggle | Enables or disables the visibility of individual data points on the chart. |
| Point Colors | Color Picker | Allows selection of colors for the individual points on the chart. |
| Radius | Slider | Adjusts the size (radius) of the data points. |
| Points Stroke | Toggle | Enables or disables the stroke (border) around the individual data points. |
| Stroke Colors | Color Picker | Allows selection of colors for the individual lines on the chart. |
| Stroke Style | Dropdown | Provides options to select the style of the border around the data points (e.g., solid, dashed). |
| Stroke Width | Slider | Adjusts the thickness of the stroke (border) around the individual data points. |
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. |