Bar Chart

Overview

A bar chart draws data values as vertical or horizontal lines. The main components of a bar chart are:

• Axes
• Series
• Legend

The Axes typically include an X axis and Y axis. Each Axis can include options to draw separator lines, tick marks, labels and more.

The Series defines the data elements to add to the chart. Each series can define its own color, geometry and various other options.

The Legend displays a small graphic indicating the color and shape of the series data points along with a label describing the data.

Complete documentation on Bar Charts can be found at LiveCharts2.

Examples

Column Bar Chart

Component Definition

{
    "type": "BarChart",
    "title": "Network Traffic",
    "chartStyle": {
        "titleStyle": {
            "textOptions": {
                "fontSize": 14
            }
        },
        "legendPosition": "Bottom",
        "legendStyle": {
            "textOptions": {
                "fontSize": 12
            }
        }
    },
    "style": {
        "layoutOptions": {
            "height": 300
        }
    },
    "yAxes": [
        {
            "minLimit": 0
        }
    ],
    "series": [
        {
            "name": "@(basicChart[2].name)",
            "dataQuery": "basicChart[2].values",
            "style": {
                "fill": {
                    "color": "#8CB84C"
                }
            }
        },
        {
            "name": "@(basicChart[1].name)",
            "dataQuery": "basicChart[1].values",
            "style": {
                "fill": {
                    "color": "#4B84C2"
                }
            }
        },
        {
            "name": "@(basicChart[0].name)",
            "dataQuery": "basicChart[0].values",
            "style": {
                "fill": {
                    "color": "#DB4B37"
                }
            }
        }
    ]
}

Data

{
  "basicChart": [
    {
      "name": "High",
      "values": [7,9,8,9,11]
    },
    {
      "name": "Med",
      "values": [5,4,6,6,7]
    },
    {
      "name": "Low",
      "values": [2,3,3,4,3]
    }
  ]
}

Row Bar Chart

Component Definition

{
    "type": "BarChart",
    "title": "Network Traffic",
    "chartStyle": {
        "titleStyle": {
            "textOptions": {
                "fontSize": 14
            }
        },
        "legendPosition": "Bottom",
        "legendStyle": {
            "textOptions": {
                "fontSize": 12
            }
        }
    },
    "style": {
        "layoutOptions": {
            "height": 300
        }
    },
    "yAxes": [
        {
            "minLimit": 0
        }
    ],
    "defaultSeriesStyle": {
        "orientation": "Row"
    },
    "series": [
        {
            "name": "@(basicChart[2].name)",
            "dataQuery": "basicChart[2].values",
            "style": {
                "fill": {
                    "color": "#8CB84C"
                }
            }
        },
        {
            "name": "@(basicChart[1].name)",
            "dataQuery": "basicChart[1].values",
            "style": {
                "fill": {
                    "color": "#4B84C2"
                }
            }
        },
        {
            "name": "@(basicChart[0].name)",
            "dataQuery": "basicChart[0].values",
            "style": {
                "fill": {
                    "color": "#DB4B37"
                }
            }
        }
    ]
}

Data

{
  "basicChart": [
    {
      "name": "High",
      "values": [7,9,8,9,11]
    },
    {
      "name": "Med",
      "values": [5,4,6,6,7]
    },
    {
      "name": "Low",
      "values": [2,3,3,4,3]
    }
  ]
}

Schemas

BarChart

key	type	required	description
type	string	required	A string defining the component type as a BarChart.
title	string	optional	An optional Title for the chart. Location, formatting and other settings for the title are set in the ChartStyle.
chartStyle	string or ChartStyle	optional	Either a style identifier or a style object used to define various settings for the chart.
series	BarChartSeries[]	required	An array of BarChartSeries objects that define each data series to display in the chart.
seriesQuery	string	optional	A JSONata query selecting the series data to display in the chart. The return value of the query must be an array of ChartSeries objects. This value is not allowed if series is defined.
seriesQueryStyles	BarChartSeriesStyle[]	optional	An array of styles to use if using seriesQuery. Styles are applied in order and reused once exhausted. Required if seriesQuery is defined.
defaultSeriesStyle	string or BarChartSeriesStyle	optional	Either a style identifier or a style object used to define default settings for all Series in the chart. Series styles can be overridden at the Series level in the chart definition.
xAxes	ChartAxis[]	optional	An array of ChartAxis objects that will define the X axes of the chart. Typically, a chart only has a single X axis, but multiple axes are supported.
yAxes	ChartAxis[]	optional	An array of ChartAxis objects that will define the Y axes of the chart. Typically, a chart only has a single Y axis, but multiple axes are supported.
gridRow	integer	optional	The grid row to place the component. Only applicable when inside a GridV2 component.
gridColumn	integer	optional	The grid column to place the component. Only applicable when inside a GridV2 component.
gridRowSpan	integer	optional	The number of rows to span inside the grid. Only applicable when inside a GridV2 component. Default value is 1.
gridColumnSpan	integer	optional	The number of columns to span inside the grid. Only applicable when inside a GridV2 component. Default value is 1.
rowWidth	float	optional	A fixed width for the component inside the row. Only applicable when inside a RowV2 component.
rowRelativeWidth	float	optional	A proportional width for the component inside the row. Only applicable when inside a RowV2 component.

BarChartSeries

key	type	required	description
name	string	required	A string defining the name of the series. As with any other string, string substitution is possible with a JSONata query by using @(QUERY) syntax.
seriesData	ChartSeriesData[]	optional	An array of ChartSeriesData objects that will define the data for the series. If defined, the dataQuery and labelQuery settings are ignored.
dataQuery	string	optional	A JSONata query string that will be used to extract values for this data series. The return value of the query must be an array of floats or integers.
labelQuery	string	optional	A JSONata query string that will be used to extract labels for this data series. The return value of the query must be an array of strings.
style	string or BarChartSeriesStyle	optional	Either a style identifier or a style object used to define options for the series. For a more detailed explanation of the style system, see Styles.

BarChartSeriesStyle

key	type	required	description
fill	Paint	optional	A Paint object that describes the fill color of the data series.
stroke	Paint	optional	A Paint object that describes the stroke color and width of the data series.
showDataLabels	bool	optional	If true, data labels will be drawn for each data point in the series.
dataLabelsStyle	string or ChartLabelStyle	optional	Either a style identifier or a ChartLabelStyle object used to define the style for the series labels.
legendSize	number	optional	The size of the legend for the series, in pixels.
dataPadding	Point	optional	Sets the minimum distance from the edges of the series to the axis. Valid values are 0 to 1, where 0 is no padding and 1 is the max padding.
geometryType	string	optional	Defines the shape of data points on the line. Valid options are square and circle.
geometrySize	number	optional	Sets the size of the data points in pixels.
geometryFill	Paint	optional	A Paint object that describes the fill color of the data points in the series.
geometryStroke	Paint	optional	A Paint object that describes the stroke color and width of the data points in the series
orientation	string	optional	Sets the orientation for bars in the series. Valid options are Column and Row. Default value is Column.
maxBarWidth	number	optional	Sets the maximum width for bars in the series.
barPadding	number	optional	Sets the amount of space between groups of bars in the series.
drawInBackground	bool	optional	Draws the series in the background of other series in the chart.
rx	numbers	optional	Sets the x corner radius for bars in the series. Set this value to 0 for completely square bars.
ry	numbers	optional	Sets the y corner radius for bars in the series. Set this value to 0 for completely square bars.