bar-chart

the component can display statistics related to data records (categorical variables) represented in a bar chart this can show a single or multiple data series for comparative purposes and highlight specific regions or ranges on the chart to make it easier for users to interpret and analyze the data this component is mostly used in jig default docid\ rtomyji3uoxiqxdultz3o or jig list docid 5uifnxycbeewhizctnjqm configuration options configuration options some properties are common to all components, see common component properties docid\ llntd rxe8fmh7wpc5czb for a list and their configuration options core structure series color defines the color of the bar used in the chart data values to be used in the chart yaxis min and max values that display on the y axis the max property doesn't have to be defined, in this case, it will automatically be calculated depending on your data xaxis categories to display on the x axis other options chart title and subtitle name and a short description of your chart height and width the parameters of the graph displayed (in pixels) legend ishidden the setting of a boolean value if the legend (naming of the series) should be displayed under the chart plotbands use plotbands to highlight specific regions or ranges on the chart, making it easier for users to interpret and analyze the data the from and to properties define the area to be filled with color specify the range using the from and to properties with numeric values color sets the color of the band for the y axis , choose a color from the provided color palette plotoptions series different properties available to manipulate the data shown in the bar such as width of columns, the interval between two points, option to hide markers series name the naming of the actual series xaxis isfirstlabelhidden value is either true to hide the first label or false to display the first label the property doesn't have to be defined, by default the first label is shown isfirsttickhidden value is either true/false set to true hides the whole axis ishidden value is either true/false islastlabelhidden value is either true to hide the last label or false to display the last label the property doesn't have to be defined, by default the last label are shown islasttickhidden value is either true to hide the last line and label or false to display the last line and label the property doesn't have to be defined, by default the last label and line are shown labels label of axis, a selection of different formats such as dateformat , currency , unit , and signdisplay are available min and max minimum and maximum values that should be displayed on the x axis minpadding when no categories set, a 1% space is made on the left and right of the chart so the id doesn't start on the left or ends on the right edge exactly the default is set to 0 02 (x axis) and 0 05 (y axis) tickamount the number of ticks to display on the x axis the final amount doesn't have to be exactly the same number as you pass into it round up to 6 to give the chart a good set of numbers 0, 20, 40, 60, 80, 100 set ticks to 3 will be honored and shows 0, 50, and 100 yaxis isfirstlabelhidden value is either true/false set to true hides the first label the property doesn't have to be defined, by default the first label is shown isfirsttickhidden value is either true/false set to true hides the whole axis ishidden value is either true/false set to true the last label is hidden islastlabelhidden value is either true to hide the last label and line or false to display the last label and line the property doesn't have to be defined, by default the last label and line are shown islasttickhidden value is either true to hide the last line and label or false to display the last line and label the property doesn't have to be defined, by default the last label and line are shown labels label of axis, a selection of different formats such as currency , numberstyle , compactdisplay and notation is available minpadding when no categories set, a 1% space is made on the left and right of the chart so the id doesn't start on the left or ends on the right edge exactly the default is set to 0 02 (x axis) and 0 05 (y axis) min and max minimum and maximum values that should be displayed on the y axis tickamount the number of ticks to display on the x axis the final amount doesn't have to be exactly the same number as you pass into it round up to 6 to give the chart a good set of numbers 0, 20, 40, 60, 80, 100 set ticks to 3 will be honored and shows 0, 50, and 100 examples and code snippets examples and code snippets bar chart finance static finance bar chart the {{jig}} displays a bar chart with an annual overview of finances the x axis shows the months and the y axis the monetary amount using number formatting, we can have any currency displayed examples see the full code sample using static data in github see the full code sample using dynamic data in github datasources see the full datasource code sample for dynamic data in github bar chart (static) title current account overview type jig default datasources finance type datasource static options data \ date jun amount 1851 \ date jul amount 1483 \ date aug amount 1250 \ date sep amount 2067 \ date oct amount 1650 \ date nov amount 1280 \ date dec amount 1430 \ date jan amount 1398 \ date feb amount 1763 \ date mar amount 2151 \ date apr amount 1543 \ date may amount 1475 children \ type component bar chart options chart title text 12 months overview height 260 \# define the format and labels for and their values to display on the y axis yaxis min 0 max 2500 labels format numberstyle currency currency usd compactdisplay short notation compact tickamount 5 \# define the data categories to display on the x axis xaxis categories =@ctx datasources finance date \# define the data to show in the bars on the chart known as the series series \ data =@ctx datasources finance amount name 2021/2022 color color1 legend ishidden false bar chart (dynamic) children \ type component bar chart options chart title text "12 months overview" height 260 isanimated false legend ishidden true yaxis min 0 labels format numberstyle currency currency usd compactdisplay short notation compact tickamount 5 isfirsttickhidden false isfirstlabelhidden false series \ data =@ctx datasources finance dynamic name "2021/2022" color color2 datasources (dynamic) datasources finance dynamic type datasource sqlite options provider data provider dynamic entities \ entity default/finances query | select id, json extract(data, '$ date') as x, json extract(data, '$ amount') as y, '$ financeid', '$ category' from \[default/finances] where '$ category' = "finance month" order by '$ financeid' asc bar chart multiple series the {{jig}} displays a bar chart with four series that compares amounts for three years per quarter in this example the legend is shown examples see the full code sample using static data in github see the full code sample using dynamic data in github datasources in order series1 and series2 see the full datasource code sample for dynamic data series 1 and series 2 in github bar chart multiple (static) title multiple series type jig default \# define the data to be used in the chart datasources multi type datasource static options data \ q1 12000 q2 48000 q3 36000 q4 12000 year "2020" \ q1 34000 q2 22000 q3 40000 q4 51000 year "2021" \ q1 25000 q2 32000 q3 45000 q4 86000 year "2019" children \ type component bar chart options chart height 250 legend ishidden false \# define the format, labels to display on the y axis yaxis max 90000 min 0 labels format currency usd numberstyle currency compactdisplay short notation compact tickamount 8 \# define the data categories to display on the x axis xaxis categories =@ctx datasources multi year \# define the data to show in the bars on the chart known as the series series \ data =@ctx datasources multi q1 name q1 color color2 \ data =@ctx datasources multi q2 name q2 color color3 \ data =@ctx datasources multi q3 name q3 color color4 \ data =@ctx datasources multi q4 name q4 color color5 bar chart multiple (dynamic) children \ type component bar chart options chart height 250 yaxis max 25 xaxis categories \ 'sample data' series \ data =@ctx datasources series1 dynamic data \ data =@ctx datasources series2 dynamic data datasources (dynamic) datasources series1 dynamic type datasource sqlite options provider data provider dynamic entities \ entity default/charts query | select id, json extract(data, '$ seriesy') as y, '$ color', '$ category', json extract(data, '$ seriesx') as x, '$ subtitle', '$ title' from \[default/charts] where '$ category' = "chart1" order by x series2 dynamic type datasource sqlite options provider data provider dynamic entities \ entity default/charts query | select id, json extract(data, '$ seriesy') as y, '$ color', '$ category', json extract(data, '$ seriesx') as x, '$ subtitle', '$ title' from \[default/charts] where '$ category' = "chart2" order by x bar chart with plot bands the {{jig}} displays a bar chart with an annual overview of finances the x axis shows the months and the y axis the monetary amount the data points are easy to see as we used the plotbands property to add color in this example multiple bands are defined by adding the form, to and color properties examples see the full code sample in github bar chart plotbands title current account overview type jig default datasources finance type datasource static options data \ date jun amount 1851 \ date jul amount 1483 \ date aug amount 1250 \ date sep amount 2067 \ date oct amount 1650 \ date nov amount 1280 \ date dec amount 1430 \ date jan amount 1398 \ date feb amount 1763 \ date mar amount 2151 \ date apr amount 1543 \ date may amount 1475 children \ type component bar chart options chart title text 12 months overview height 260 \# define the format and labels for and their values to display on the y axis yaxis min 0 max 2500 labels format numberstyle currency currency usd compactdisplay short notation compact tickamount 5 \# add four bands of different color to the bar chart plotbands \ from 0 to 500 color color4 \ from 500 to 1000 color color5 \ from 1000 to 1500 color color6 \ from 1500 to 2000 color color7 \# define the data categories to display on the x axis xaxis categories =@ctx datasources finance date \# define the data to show in the bars on the chart known as the series series \ data =@ctx datasources finance amount name 2021/2022 color color1 legend ishidden false bar chart using expressions in this example expressions are used to dertermine the series , categories , min , max , and tickamount of a bar chart the x axis shows the quarters and the y axis the monetary amount using the format property to display the currency examples see the full code sample in github datasources see the full datasource code sample for series 1 and series 2 in github bar chart multiple dynamic #add file to the jigs folder title multiple series dynamic type jig default children \ type component bar chart options chart height 250 series \ data =@ctx datasources series1 y \ data =@ctx datasources series2 y xaxis categories \ =@ctx datasources series1\[0] x \ =@ctx datasources series1\[1] x \ =@ctx datasources series1\[2] x \ =@ctx datasources series1\[3] x yaxis labels format compactdisplay short currency usd notation compact numberstyle currency min =@ctx datasources series2\[0] min tickamount =@ctx datasources series2\[0] tickamount max =@ctx datasources series2\[0] max series1 #add file to the datasource folder type datasource static options data \ x q1/20 y 25000 color color2 \ x q2/20 y 32000 color color2 \ x q3/20 y 45000 color color2 \ x q4/20 y 86000 color color2 series2 #add file to the datasource folder type datasource static options data \ x q1/20 y 12000 color color3 min 0 max 127000 tickamount 6 \ x q2/20 y 48000 color color3 min 0 max 127000 tickamount 6 \ x q3/20 y 36000 min 0 max 127000 tickamount 6 color color3 \ x q4/20 y 120000 color color3 min 0 max 127000 tickamount 6