{"id":7971,"date":"2015-11-19T16:38:02","date_gmt":"2015-11-19T16:38:02","guid":{"rendered":"http:\/\/help.instantatlas.com\/report-builder-agol\/agol\/widgets\/bar-chart-widget\/"},"modified":"2025-01-16T13:05:20","modified_gmt":"2025-01-16T13:05:20","slug":"bar-chart-widget","status":"publish","type":"page","link":"https:\/\/help.reports.esriuk.com\/report-builder\/widgets\/bar-chart-widget\/","title":{"rendered":"Bar Chart Widget"},"content":{"rendered":"<p>This page describes specific settings for the\u00a0<strong>Bar Chart<\/strong>\u00a0widget. Note that generic widget settings are described on the <a href=\"https:\/\/help.instantatlas.com\/report-builder\/widget-generic-settings\/\">Widget Generic Settings<\/a> page, so if you cannot find the setting you are looking for check there too. It is good practice to design your charts to be as <a href=\"https:\/\/help.instantatlas.com\/report-builder\/web-accessibility-in-report-builder-2-0\/\">accessible<\/a> as possible.<\/p>\n<h3>Bars<\/h3>\n<p><strong>Orientation<\/strong><\/p>\n<p>Choose between vertical or horizontal bars<\/p>\n<p><strong>Width<\/strong><\/p>\n<p>Set the bar width<\/p>\n<p><strong>Tooltip format<\/strong><\/p>\n<p>Choose the tooltip format. Click the arrow on the right to see suggested values. If you wish to add confidence limit values to the tooltip you can use the variables #YMIN and #YMAX.<\/p>\n<p><strong>Sort bars by value<\/strong><\/p>\n<p>Choose whether bars should be sorted by data value, and if so ascending or descending order. This setting is only active if the <strong>Type<\/strong> setting under <strong>Series<\/strong> is set to <strong>indicators-as-series <\/strong>and if <strong>Include all areas <\/strong>under <strong>Behavior <\/strong>is toggled on.<\/p>\n<p><strong>Include comparison bars in sort<\/strong><\/p>\n<p>You can configure if comparison bars are displayed at the right of all other bars or included in the core feature bar sorting. This setting is only active if the <strong>Type<\/strong> setting under <strong>Series<\/strong> is set to <strong>indicators-as-series <\/strong>and if <strong>Include all areas<\/strong> under <strong>Behavior <\/strong>is toggled on.<\/p>\n<p><strong>Use stacked bars<\/strong><\/p>\n<p>Click the toggle to show stacked bars. Your data must be able to support this and it is likely that you will need to adjust other settings to combine with this one. This is often used to show multiple indicator values in a single bar. Bars will be grouped by date if time series data has been defined.<\/p>\n<p><strong>Comparisons as lines<\/strong><\/p>\n<p>Click the toggle to show comparison features as lines rather than bars.<\/p>\n<h3>Data Labels<\/h3>\n<p><strong>Show value labels<\/strong><\/p>\n<p>Set if you wish labels to be shown on bars, comparison lines (lines), both or none.<\/p>\n<p><strong>Value labels style<\/strong><\/p>\n<p>If you are showing value labels, choose between text and badge.<\/p>\n<p><strong>Value labels format<\/strong><\/p>\n<p>You can set the format of the\u00a0 label. This can be a combination of a variable and static text e.g. #VALY %<\/p>\n<p><strong>Value labels font size<\/strong><\/p>\n<p>If you are showing value labels on bars, set the font size in pixels. -1 means it will use the default font size.<\/p>\n<p><strong>Value labels anchor<\/strong><\/p>\n<p>You can anchor the labels at the start, middle or end of the bars.<\/p>\n<p><strong>Value labels color<\/strong><\/p>\n<p>This changes the text colour of the data labels.<\/p>\n<p><strong>Value labels background color<\/strong><\/p>\n<p>This setting is visible only when the badge style is selected. It allows you to change the background colour of the badges. If not set the background inherits the colour of the bar or line it belongs to. You can also chose a transparent background.<\/p>\n<p><strong>Value labels border color<\/strong><\/p>\n<p>This setting is visible only when the badge style is selected. it allows you to define a border colour for the badges.<\/p>\n<p><strong>Value labels border width<\/strong><\/p>\n<p>This setting is visible only when the badge style is selected. It adjusts the border width of the badge labels.<\/p>\n<p><strong>Value labels border radius<\/strong><\/p>\n<p>This setting is visible only when the badge style is selected. By default,\u00a0 badge style labels have rounded corners. This setting allows you to adjust the corner radius to create badges with more defined corners.<\/p>\n<p><strong>Value labels rotation<\/strong><\/p>\n<p>If you width the labels to appear in an angle you can set the rotation in degrees. Moving the slider to the right rotates the label clockwise, to the left counter-clockwise.<\/p>\n<h3>Axes<\/h3>\n<p><strong>Font<\/strong><\/p>\n<p>Type the name of the font you would like to use for axis text into the box.<\/p>\n<p><strong>Font size<\/strong><\/p>\n<p>Type into the box or use the arrows to set the font size for axis text.<\/p>\n<p><strong>X axis label format<\/strong><\/p>\n<p>Choose a label format for the X axis. Refer to the <a href=\"https:\/\/help.instantatlas.com\/report-builder\/widgets\/variables\/\">Variables<\/a> page for information on the possible values.<\/p>\n<p><strong>X axis title<\/strong><\/p>\n<p>Type a title that will be displayed for the X axis.<\/p>\n<p><strong>Y axis number format<\/strong><\/p>\n<p>Choose a number format for the Y axis. Refer to the <a href=\"https:\/\/help.instantatlas.com\/report-builder\/number-formats\/\">Number Formats<\/a> page for more information.<\/p>\n<p><strong>Y axis title<\/strong><\/p>\n<p>Type a title that will be displayed on the Y axis e.g. &#8216;Percentage&#8217; or &#8216;Rate per 1000&#8217;<\/p>\n<h3>Colors &amp; Highlights<\/h3>\n<p><strong>Palette<\/strong><\/p>\n<p>Choose a color palette for the widget. You can edit the active palette by clicking the x buttons to remove colors or the + button to add colors. There are also buttons to change to a different palette completely, to copy\/paste color codes to\/from the clipboard and to toggle the direct edit view that allows you to type in color codes delimited by commas e.g. #a6cee3 #b2df8a #fb9a99 #fdbf6f #cab2d6 #ffff99 #1f78b4 #33a02c #e31a1c #ff7f00.<\/p>\n<p><strong>Chart background color<\/strong><\/p>\n<p>Choose a background color for the chart.<\/p>\n<p><strong>Highlight selected feature<\/strong><\/p>\n<p>Choose whether you would like the widget to highlight the selected feature.<\/p>\n<p><strong>Highlight color<\/strong><\/p>\n<p>Choose a highlight color for the selected feature. This setting will be greyed out if <strong>Highlight selected feature<\/strong> is false.<\/p>\n<p><strong>Highlight style<\/strong><\/p>\n<p>Choose a highlight style for the selected feature.<\/p>\n<h3>Limits &amp; Error Bars<\/h3>\n<p>Please refer to <a href=\"https:\/\/help.instantatlas.com\/report-builder\/bar-line-charts-confidence-limits-error-bars\/\">this page<\/a> for the use of these settings.<\/p>\n<h3>Annotations &#8211; Lines and Zones<\/h3>\n<p>Bar charts can show fixed lines or zones additionally to the displayed indicator(s). You can add up to 4 lines and up to 4 zones to the chart. Each line has it\u2019s own fixed value, label, color, width and style. For each zone, the start and end value, label, color and opacity can be defined. Lines and zones can be added to either the x or the y axis allowing for a wide rage of use cases.<\/p>\n<h3>Statistics<\/h3>\n<p>You can chose to display the mean and\/or median line either superimposed over or behind the bars of your bar chart. The label, line style and color can be adjusted.<\/p>\n<p><a class=\"fancybox image\" href=\"https:\/\/help.instantatlas.com\/wp-content\/uploads\/2022\/06\/Median.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2669\" src=\"https:\/\/help.instantatlas.com\/wp-content\/uploads\/2022\/06\/Median.png\" sizes=\"auto, (max-width: 949px) 100vw, 949px\" srcset=\"https:\/\/help.instantatlas.com\/wp-content\/uploads\/2022\/06\/Median.png 949w, https:\/\/help.instantatlas.com\/wp-content\/uploads\/2022\/06\/Median-300x138.png 300w, https:\/\/help.instantatlas.com\/wp-content\/uploads\/2022\/06\/Median-768x352.png 768w\" alt=\"\" width=\"949\" height=\"435\" data-lazy-loaded=\"true\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This page describes specific settings for the\u00a0Bar Chart\u00a0widget. Note that generic widget settings are described on the Widget Generic Settings page, so if you cannot find the setting you are looking for check there too. It is good practice to design your charts to be as accessible as possible. Bars Orientation Choose between vertical or [&hellip;]<\/p>\n","protected":false},"author":22,"featured_media":0,"parent":4321,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-7971","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/help.reports.esriuk.com\/report-builder\/wp-json\/wp\/v2\/pages\/7971","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/help.reports.esriuk.com\/report-builder\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/help.reports.esriuk.com\/report-builder\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/help.reports.esriuk.com\/report-builder\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/help.reports.esriuk.com\/report-builder\/wp-json\/wp\/v2\/comments?post=7971"}],"version-history":[{"count":0,"href":"https:\/\/help.reports.esriuk.com\/report-builder\/wp-json\/wp\/v2\/pages\/7971\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/help.reports.esriuk.com\/report-builder\/wp-json\/wp\/v2\/pages\/4321"}],"wp:attachment":[{"href":"https:\/\/help.reports.esriuk.com\/report-builder\/wp-json\/wp\/v2\/media?parent=7971"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}