Bar and column charts
Use column and bar charts to compare field values across a data set.
Data formatting
Column and bar charts represent one or more data series. To make sure that a search generates one or more series, check the Statistics tab in Search & Reporting. The table should have multiple columns.
Search results not structured as a table with valid x-axis or y-axis values cannot generate column or bar charts. For example, using the eval or fields commands might change search result structure.
Statistics table order and chart axis
Column and bar charts each use the Statistics table values in different ways. Column charts get x-axis values from the first column in the table. The next table columns contain y-axis values.
Bar charts get y-axis values from the first column in the table. The next table columns contain x-axis values.
As an example, any search using the timechart reporting command generates a table where _time is the first column. A column chart generated with this search has a _time x-axis. A bar chart using this search has a _time y-axis.
Single and multiple data series
Column and bar charts can visualize single or multiple data series. The following examples show you how to generate these series.
Single series
over operator indicates that user is the first table column. index=_internal|chart count over user The search produces the following table. Column and bar charts represent this single series differently:
- A column chart places x-axis
uservalues horizontally and y-axiscountvalues vertically. - A bar chart places x-axis
uservalues vertically and y-axiscountvalues horizontally.
Multiple data series
sourcetype as a split-by field. ...| chart count over user by sourcetype The split-by field produces multiple data series. Each sourcetype is a data series with its own count values for each user. Generate a bar or column chart
- Select the Add chart button (
) in the editing toolbar and choose a bar or column chart.
- Set up a new data source by selecting + Create search and adding a search to the SPL query window or select an existing data source under the Search, Saved search, or Chain search sections.
- (Optional) You can also write a new ID that describes the search better than the default by changing the ID in Data source name.
- Select Apply and close.
Configuration Panel options for bar and column charts
You can use the Configuration panel to configure the following bar and column chart components.
Title
Give your visualization a name. This is also helpful when searching for individual visualizations in the dashboard definitions. This name is not the same as the automatically assigned unique ID.
Description
Give your visualization a description to explain what the user is viewing.
Data sources
Choose an existing ad hoc search or create a new one.
For column charts, you can configure an annotation data source to provide context to the data that the chart displays. See Add secondary data sources to your visualization.
- Enable When data is unavailable, hide element to hide the visualization when data is unavailable.
- Configure custom visibility conditions if desired. See Specify visibility conditions for panels and other dashboard elements.
Position and size
You can use your mouse to change the size of the panel, or the Position and size section of the Configuration panel for pixel perfect sizing and placement.
Data configurations
X: specify the field to use for the x-axis.
Y: specify the field to use for the y-axis.
Y2: specify the field to use for the y2-axis.
Additional tooltip fields: specify the fields to add to the default set of tooltips. Tooltips appear when you hover over events. These fields and their corresponding values show in addition to the ones displayed by default.
Result limit: specify the number of data points to render in the chart.
Annotation x: this option is only available for column charts. specify the data source field applied to the event annotation on the x-axis.
Annotation labels: this option is only available for column charts. Specify a list of labels used for the annotations. You may use a data source to apply the labels. For example, ["houston, we have a problem", "just close the jira", "looking good now"].
Data display
- Stack mode
Stack mode Column or bar appearance Use case Not stacked Columns or bars for different series appear next to each other. A chart that is not stacked is useful for a lower number of series. As the number of series increases, the chart can become more difficult to understand. Stacked Data points within a series appear as segments of a column or bar. The total column or bar value is the sum of all of the segments. Use a stacked column or bar chart to highlight the relative volume, frequency, or importance of data points in a series. Stacked 100% Each bar or column is divided into segments representing the distribution percentage for each data value in one series. Use stacked 100% to show data distributions when there is significant segment size variation in each column or bar. - Data value display: choose whether to show no data values (Off), all data values (All), or only the minimum and maximum (Min/Max).
Show tooltip on hover: this option is only available for column charts. Specify whether a tooltip should be visible on hover.
Overlay fields: specify field(s) that should be differentiated on the chart and displayed as chart overlays.
Split series: split a multi-series chart into separate charts: one for each series. When enabled, you can also enable independent y-ranges for each split chart.
Trellis layout: enable trellis layout to split the chart by field value or aggregation. See Trellis layout.
Column grouping mode: this option is only available for column charts. Specify the column grouping mode. If Stack mode is defined, it overrides grouping behavior.
Color and style
-
Title color: configure a font color for the visualization title.
-
Description color: configure a font color for the visualization description.
Background color: specify the color for the background. You may use a data source to apply the color. The default for enterprise light is "#ffffff". The default for enterprise dark is "#000000". The default for prisma dark is "#0b0c0e".
Series colors: specify the colors used for a series.
Series colors by field name: specify the colors used for specific fields in a series.
Spacing between column series: specify, in pixels, the spacing between clustered series in column charts.
Spacing between columns: this option is only available for column charts. Specifies, in pixels, the spacing between columns in a column chart.
Line width: specify the line width, in pixels, for chart overlay.
Annotation colors: this option is only available for column charts. Specify the annotation colors. You may use a data source to apply the color.
Series spacing: specify, in pixels, the spacing between clustered series in bar charts.
Bar spacing: this option is only available for bar charts. Specify, in pixels, the spacing between columns in a bar chart.
For corner radius options, see Round visualization corners.
Legend
- Use Legend display to choose the position of the legend.
- Use Legend truncation to choose how legend labels are truncated when they overflow the layout boundaries by choosing where to place ellipses (...)
Use Legend mode to specify visual and behavioral settings for the tooltip and legend.
Axis grid and labels
Axis title: specify whether to show or hide the title of the x-axis.
Axis title text: specify the title of the axis.
Show overlays on the y2-axis: only available for y2-axis. Enable a y2-axis for chart overlays. All overlay fields will be mapped to a second y-axis.
Scale: only available for y-axes. Specify the type of scale that applies to a numerical y-axis.
Label visibility: specify whether to show or hide labels on the x-axis.
Label rotation: only available fo the x-axis for column charts. Specify the rotation of the x-axis label in degrees.
Number of time label parts: only available for x-axis. Specify the maximum number of time-parts that a tick label will have, with the 3 possible parts being year, month, time.
Round axis labels: only available for y2-axis. Specify whether to round y2-axis values to the nearest integer.
SI prefix abbreviation for labels: only available for y-axes. Specify whether to abbreviate large y-axis values with the closest SI prefix.
Include zero: only available for y-axes. Specify whether the y-axis range includes zero.
Extend to whole grid: only available for y-axis. Specify whether the y-axis should be extended to include whole major tick marks.
Minimum axis value: only available for y-axes. Specify the minimum number for the visible y-axis range.
Maximum axis value: only available for y-axes. Specify the maximum number for the visible y-axis range.
Axis line visibility: specify whether to show or hide the y2-axis line.
Major gridlines: specify whether major grid lines are visible on the axis.
Major tick visibility: specify whether to show or hide major tick marks on the axis.
Major tick size: specify the size, in pixels, of major tick marks on the axis.
Minor gridlines: only available for y-axes. Specify whether minor grid lines are visible on the specified y-axis.
Minor tick visibility: only available for y-axes. Specify whether to show or hide minor tick marks on the y-axis.
Minor tick size: only available for y-axes. Specify the size, in pixels, of minor tick marks on the y-axis.
Interactions
Select + Add interaction to set up different visualization interactions such as linking to a custom URL, setting tokens, or linking to a report. For more details, see Add dashboard interactions.
Select your visualization or its search to view and edit the source code in real-time. You can also change the Visualization ID to a more readable ID to help identify this visualization in the source code.
Source options for bar and column charts
You can customize your dashboard with the Dashboard Studio UI or set options in the source editor for splunk.bar and splunk.column. The UI and source options both produce the same design results.
Additionally, you can write advanced configurations in the source editor using selector and formatting functions and dynamic options syntax. See Modify and write dynamic options syntax.
Add source options to the options field of the visualization stanza. The following example shows the addition of background color settings using a hexadecimal code.
"viz_25NNIqLF": {
"type": "splunk.bar",
"options": {
"backgroundColor": "#0000FF",
},
"dataSources": {
"primary": "ds_gcEN4c7Q"
}
}
For more on how visualization stanzas are structured, see The visualizations section. Following are all of the options available:
The following options are available for editing bar and column charts in the source editor. Some options are only available for column charts or only for bar charts, as noted in the Description column:
| Property | Type | Default | Description |
|---|---|---|---|
| x | (string | number) | > primary | seriesByIndex(0) | Specify the data source applied to the x-axis. |
| y | (string | number) | > primary | frameBySeriesIndexRange(1) | Specify the data source applied to the y-axis. |
| y2 | (string | number) | n/a | Specify the data source applied to the y2-axis |
| xField | string | > x | getField() | Specify the field that should be mapped to the x-axis. |
| yFields | string | > y | getField() | Specify the field that should be mapped to the y-axis. |
| y2Fields | (array | string) | > y2 | getField() | Specify field(s) that should be mapped to a second y-axis. |
| additionalTooltipFields | string[] | [] | Specify the fields to add to the default set of tooltips. Tooltips appear when you hover over events. These fields and their corresponding values are shown in addition to the ones displayed by default. |
| annotationColor | string | n/a | This option is only available for column charts. Specify the annotation colors. You may use a dataSource to apply the color. For example, ["#FF0000", "#0000FF", "#008000"]. |
| annotationLabel | string | n/a | This option is only available for column charts. Specify a list of labels used for the annotations. You may use a dataSource to apply the labels. For example, ["houston, we have a problem", "just close the jira", "looking good now"]. |
| annotationX | (string | number) | n/a | This option is only available for column charts. Specify the dataSource field applied to the event annotation on the x-axis. |
| backgroundColor | string | > themes.defaultBackgroundColor | Specify the color for the background. You may use a dataSource to apply the color. The default for enterprise light is "#ffffff". The default for enterprise dark is "#000000". The default for prisma dark is "#0b0c0e". |
| barSpacing | number | n/a | This option is only available for bar charts. Specify, in pixels, the spacing between columns in a bar chart. |
| columnGrouping | ("auto" | "overlay") | auto | This option is only available for column charts. Specify the column grouping mode. If chart.stackMode is defined it will override grouping behavior. |
| columnSpacing | number | n/a | This option is only available for column charts. Specifies, in pixels, the spacing between columns in a column chart. |
| dataValuesDisplay | ("off" | "all" | "minmax") | off | Specify whether chart should display no labels, all labels, or only the min and max labels. |
| legendDisplay | ("right" | "left" | "top" | "bottom" | "off") | right | Specify the location of the legend on the panel. |
| legendLabels | string | n/a | Specify a list of labels to pre-populate the legend. For example, ["percent", "count"]. |
| legendMode | ("standard" | "seriesCompare") | standard | Specify visual and behavioral settings for the tooltip and legend. "seriesCompare" is useful when comparing series. |
| legendReversed | boolean | false | This option is only available for bar charts. Specify whether to reverse the order of the legend items. |
| legendTruncation | ("ellipsisEnd" | "ellipsisMiddle" | "ellipsisStart" | "ellipsisOff") | ellipsisEnd | Specify how to display legend labels when they overflow the layout boundaries by replacing overflow text with an ellipsis. |
| lineDashStyle | ("solid" | "shortDash" | "shortDot" | "shortDashDot" | "shortDashDotDot" | "dot" | "dash" | "longDash" | "dashDot" | "longDashDot" | "longDashDotDot") | solid | Specify a dash style for all overlay field lines. |
| lineWidth | number | 2 | Specify the line width, in pixels, for chart overlay. |
| resultLimit | number | 50000 | Specify the number of data points rendered in a chart. |
| seriesColors | string | #7B56DB, #009CEB, #00CDAF, #DD9900, #FF677B, #CB2196, #813193, #0051B5, #008C80, #99B100, #FFA476, #FF6ACE, #AE8CFF, #00689D, #00490A, #465D00, #9D6300, #F6540B, #FF969E, #E47BFE | Specify the colors used for a series. For example, ["#FF0000", "#0000FF", "#008000"]. |
| seriesColorsByField | object | n/a | Specify the colors used for specific fields in a series. For example, {"count": "#008000", "percent": "#FFA500"}. |
| seriesSpacing | number | n/a | Specify, in pixels, the spacing between clustered series in column and bar charts. |
| stackMode | ("auto" | "stacked" | "stacked100") | auto | Specify stack mode. |
| showIndependentYRanges | boolean | FALSE | Specify whether split series charts have independent y-ranges. |
| showSplitSeries | boolean | FALSE | Set to "true" to split a multi-series chart into separate charts that are stacked from top to bottom; one for each series. |
| showXMajorGridLines | boolean | FALSE | Specify whether major grid lines are visible on the x-axis. |
| showYMajorGridLines | boolean | TRUE | Specify whether major grid lines are visible on the y-axis. |
| showY2MajorGridLines | boolean | FALSE | Specify whether major grid lines are visible on the y2-axis. |
| showYMinorGridLines | boolean | FALSE | Specify whether minor grid lines are visible on the y-axis. |
| showTooltip | boolean | TRUE | This option is only available for column charts. Specify whether a tooltip should be visible on hover. |
| showY2MinorGridLines | boolean | FALSE | Specify whether minor grid lines are visible on y2-axis. |
| showYAxisExtendedRange | boolean | TRUE | Specify whether the y-axis should be extended to include whole major tick marks. |
| showYAxisWithZero | boolean | FALSE | Specify whether the y-axis range includes zero. |
| showY2AxisWithZero | boolean | FALSE | Specify whether the y2-axis range includes zero. |
| xAxisLabelVisibility | ("auto" | "show" | "hide") | auto | Specify whether to show or hide labels on the x-axis. |
| yAxisLabelVisibility | ("auto" | "show" | "hide") | auto | Specify whether to show or hide labels on the y-axis. |
| y2AxisLabelVisibility | ("auto" | "show" | "hide") | auto | Specify whether to show or hide labels on the y2-axis. |
| xAxisLabelRotation | (-90 | -45 | 0 | 45 | 90) | 0 | This option is only available for column charts. Specify the rotation of the x-axis label in degrees. |
| xAxisLineVisibility | ("show" | "hide") | hide | Specify whether to show or hide the x-axis line. |
| yAxisLineVisibility | ("show" | "hide") | hide | Specify whether to show or hide the y-axis line. |
| y2AxisLineVisibility | ("show" | "hide") | hide | Specify whether to show or hide the y2-axis line. |
| xAxisMajorTickSize | number | 6 | Specify the size, in pixels, of major tick marks on the x-axis. |
| yAxisMajorTickSize | number | 6 | Specify the size, in pixels, of major tick marks on the y-axis. |
| y2AxisMajorTickSize | number | 6 | Specify the size, in pixels, of major tick marks on the y2-axis. |
| yAxisMinorTickSize | number | 6 | Specify the size, in pixels, of minor tick marks on the y-axis. |
| y2AxisMinorTickSize | number | 6 | Specify the size, in pixels, of minor tick marks on the y2-axis. |
| xAxisMajorTickVisibility | ("auto" | "show" | "hide") | auto | Specify whether to show or hide major tick marks on the x-axis. |
| yAxisMajorTickVisibility | ("auto" | "show" | "hide") | auto | Specify whether to show or hide major tick marks on the y-axis. |
| y2AxisMajorTickVisibility | ("auto" | "show" | "hide") | auto | Specify whether to show or hide major tick marks on the y2-axis. |
| yAxisMinorTickVisibility | ("auto" | "show" | "hide") | auto | Specify whether to show or hide minor tick marks on the y-axis. |
| y2AxisMinorTickVisibility | ("auto" | "show" | "hide") | auto | Specify whether to show or hide minor tick marks on the y2-axis. |
| xAxisMaxLabelParts | number | 3 | Specify the maximum number of time-parts that a tick label will have (the 3 possible parts are year, month, time). |
| yAxisScale | ("linear" | "log") | linear | Specify the type of scale that applies to a numerical y-axis. |
| y2AxisScale | ("linear" | "log") | linear | Specify the type of scale that applies to a numerical y2-axis. |
| xAxisTitleText | string | n/a | Specify the title of the x-axis. |
| yAxisTitleText | string | n/a | Specify the title of the y-axis. |
| y2AxisTitleText | string | n/a | Specify the title of the y2-axis. |
| xAxisTitleVisibility | ("show" | "hide") | show | Specify whether to show or hide the title of the x-axis. |
| yAxisTitleVisibility | ("show" | "hide") | show | Specify whether to show or hide the title of the y-axis. |
| y2AxisTitleVisibility | ("show" | "hide") | show | Specify whether to show or hide the title of the y2-axis. |
| yAxisAbbreviation | ("off" | "auto") | auto | Specify whether to abbreviate large y-axis values with the closest SI prefix. |
| y2AxisAbbreviation | ("off" | "auto") | auto | Specify whether to abbreviate large y2-axis values with the closest SI prefix. |
| yAxisMajorTickInterval | (string | number) | auto | Specify the spacing unit between major tick marks along the numeric y-axis. |
| y2AxisMajorTickInterval | (string | number) | auto | Specify the spacing unit between major tick marks along the numeric y2-axis. |
| yAxisMax | (string | number) | auto | Specify the maximum number for the visible y-axis range. |
| y2AxisMax | (string | number) | auto | Specify the maximum number for the visible y2-axis range. |
| yAxisMin | (string | number) | auto | Specify the minimum number for the visible y-axis range. |
| y2AxisMin | (string | number) | auto | Specify the minimum number for the visible y2-axis range. |
| overlayFields | (array | string) | n/a | Specify field(s) that should be differentiated on the chart and displayed as chart overlays. |
| showOverlayY2Axis | boolean | FALSE | Enable a y2-axis for chart overlays. All overlay fields will be mapped to a second y-axis. |
| showRoundedY2AxisLabels | boolean | TRUE | Specify whether to round y2-axis values to the nearest integer. |