Bar

Bar chart. A chart displaying horizontal or vertical bars.

Bar Gif

Usage

import { Bar } from @motor-js/core
//...
<Bar
width={900}
height={450}
title="Claims by Claim type"
size='medium'
cols={[
{ qField: '[Claim Settled Date.autoCalendar.Month]', qLabel: 'Month' },
{ qField: '[Claim Type]', qLabel: 'Claim Type' },
{ qField: '=Count(ClaimCounter)', qLabel: 'Claims Opened'},
]}
/>

This is a simple example, which can get more complex by setting various other propertes. More advanced versions demonstrating various functioanlities can be found in the examples section

Props

PropDescriptionOptions / Example
colsColumns from Qlik Data Model to render in the chart. array
{[
"Case Owner Group",
"=Avg([Case Duration Time])"
]}
calcConditionCalculated condition to be met before chart can be displayed.shape
{
qCond: "=Avg([Case Duration Time])> 5",
qMsg: "Calculation condition has not been met",
}
suppressZeroSuppress items whith zero values from being displayed in the chartboolean
* default obtained from theme.
barSortOrderOrder of the columns on which the returned data shoud be sortedarray
[1,0]
sortDirectionDirection by which the chart should be sorted. Can either be ascending or descending.string
'ASCENDING'
'ASC'
'DESCENDING'
'DESC'
widthChart width as a number which will be converted to pixels. If not set, the parent container width will be usednumber
heightChart width as a number which will be converted to pixels. If not set, the parent container width will be used number
marginThe margin size around the componentstring
'5px'
sizeSize of the text used in the chartoneOf
'tiny'
'small'
'medium'
'large'
'xlarge'
showLabelsLabel position of values for the chartoneOf
'top'
"none"
'inside'
* default obtained from theme.
borderBorder to be dispalyed around the chartboolean
oneOf
"top"
"left"
"bottom"
"right"
"start"
"end"
"horizontal"
"vertical"
"all"
"between"
"none"
* default obtained from theme.
backgroundColorBackground color the chartstring
* default obtained from theme.
backgroundStyleColour gradient of chart background. Pass style of one of below or pass styleFrom and styleTooneOf
'Linear (to be used for custom gradient)'
'Radial (to be used for custom gradient)'
'DarkGreen'
'LightGreen'
'OrangeRed'
'PinkBlue'
'PinkRed'
'PurpleOrange'
'PurpleRed'
'PurpleTeal'
'SteelPurple'
'TealBlue'
'e.g'
'{ style: "PinkBlue" }'
'{ style: "Linear", styleFrom: "#fadadd", styleTo: "#89cff0" }'
backgroundPatternBackground pattern for the chartoneOf
'Lines'
'Cirlces'
'Hexagon'
'Waves'
borderRadiusBorder radius of the border around the chartstring
* default obtained from theme.
colorThemeColor scheme to be used for the chartarray
oneOf
"motor"
"divergent13"
"divergent9"
"eco"
"bio"
"red"
"blue"
"gray"
"pink"
"grape"
"violet"
"indigo"
"blue"
"cyan"
"teal"
"green"
"lime"
"yellow"
"orange"
* default obtained from theme.
stackedDraw chart as stacked chartbool
* default obtained from theme.
roundNumUse round numbering to dispaly labels on chartsbool
* default obtained from theme.
precisionNumber of decimal precsion when displaying bar labelsnumber
titleTitle to be dispalyed on top of chartstring
* default obtained from theme.
subTitleSub title to be dispalyed on top of chartstring
* default obtained from theme.
showLegendDisplay chart legend.bool
oneOf
"right"
"bottom"
showAxisLabelsDisplay axis labels on the chartbool
oneOf
"both"
"yAxis"
"xAxis"
"none"
* default obtained from theme.
hideAxisLineHide axis line on the chartbool
oneOf
"both"
"yAxis"
"xAxis"
"none"
* default obtained from theme.
otherTotalSpecMessage to be displayed if an invalid measure is used in the cols propertybool
shape
{
qOtherLabel: "Other",
qOtherCount: "5",
}
* default obtained from theme.
gridAreaName of the parent grid to place the Barstring
showBoxShadoowShow or hide box shadowboolean
stackedStack the bar chartboolean
showAsPercentShow the bars as percentageboolean
selectionMethodChange the selection method, either click or brushoneOf
'click'
'brush'
'none'
renderHorizontallyRender as a horizontal bar chartboolean
dualAxisAdd a second axis to the chartboolean
legendTopBottomRender the legend on the top or bottom of the chartstring
'top'
'bottom'
legendLeftRightRender the legend on the left or right of the chartstring
'left'
'right'
legendDirectionDirection of the legend valuesstring
'row'
'column'
numDimensionTicksNumber of ticks for the X Axis. Leave blank to auto calculatenumber
numMeasureTicksNumber of ticks for the Y Axis. Leave blank to auto calculatenumber
numMeasureDualTicksNumber of ticks for the second Y Axis. Leave blank to auto calculatenumber
formatAxisDateFormat of dates to be displayed on X Axisstring
formatTooltipDateFormat of dates to be displayed on the tooltipstring
useSingleColorUse only a sinlge color in the tooltipbool
showCrosshairTurns the crosshair on or off. This appears alongside the tooltip when a bar is hovered overboolean
crossHairStylesStyling for the crosshairobject
'e.g.'
' { fullHeight: false,
fullWidth: false,
lineStyles: { pointerEvents: "none", },
showCircle: true,
showMultipleCircles: true,
showHorizontalLine: true,
showVerticalLine: true,
stroke: "multi",
strokeDasharray: "5,2",
strokeWidth: 1,
circleSize: 5,
circleStyles: { pointerEvents: "none", },
circleFill: "white",
circleClosestFill: "multi",
circleStroke: "multi",
circleClosestStroke: "multi",
circleStrokeWidth: 1,
highlightClosetsCircle: true, } '
showTooltipTurns the tooltip on or offboolean
xAxisStylesSet the X-Axis style, see the theme object for propertiesobject
yAxisStylesSet the Y-Axis style, see the theme object for propertiesobject
xTickStylesSet the X-Axis ticks style, see the theme object for propertiesobject
yTickStylesSet the Y-Axis ticks style, see the theme object for propertiesobject
legendLabelStyleObject to be used for the styling of the legend labelsobject
'e.g.'
' { fill: "darkblue", fontWeight: 800, } '
valueLabelStyleObject to be used for the styling of the value labelsobject
'e.g.'
' { fill: "white", stroke: "red"", } '
showBoxShadowShow a shadow around the main chart containerboolean
* default obtained from theme.

Sample Syntax

cols settings

Overview

There are three different ways of specifying the columns:
  • As a string.
  • As an Object
  • As a reference to a predefined dimension or measure, a Master Item.
String syntax

If a string starts with =, it will be treated as a measure, otherwise it is treated as a dimension.

import { Bar } from "@motor-js/core";
<Bar
cols={[
"Case Owner Group",
"=Avg([Case Duration Time])"
]}
....
/>
Object syntax

Use the object syntax if you want to set more options for your columns. If you. for example, create a pivot table with labels, you should use qFieldLabels for dimensions and qLabel for measures.

import { Bar } from "@motor-js/core";
<Bar
cols={[
/*dimension*/
"Year",
/*dimension with label*/
{ qField: "[Case Owner Group]", qLabel: "Group" },
/*measure with label*/
{ qField: "=Avg([Case Duration Time])", qLabel: "Avg Case Duration Time" },
/*measure with label*/
{ qField: "=Sum( [Open Cases]", qLabel: "Open Cases" },
]}
....
/>
Predefined dimensions and measures syntax

You can use dimensions and measures that are predefined in the app. This is mostly relevant if the user should be able to select dimensions and measures from lists. You must know the Dimension ID or the Measure ID, which is defined in the qLibraryID property. You must also state if it is a measure or a dimension in the qType property.

import { Bar } from "@motor-js/core";
<Bar
cols={[
{
"qLibraryId":"eqZjE",
"qType":"measure"
}
]}
....
/>

calcCondition settings

import { Bar } from "@motor-js/core";
<Bar
....
calcCondition={{
qCond: '1+1=2',
qMsg: 'Calculation condition has not been met',
}}
/>

otherTotalSpec settings

import { Bar } from "@motor-js/core";
<Bar
....
otherTotalSpec={{
qOtherLabel: 'Other',
qOtherCount: '5'
}}
/>

Examples

These examples are based off the Consumer Sales Qlik Sense application.

Chart sorted by descending values

The first example is a bar chart sorted by Revenue descending.

Bar Sorted Gif

function ColumnDemo() {
return (
<Motor config={config}>
<Bar
width={800}
height={450}
showLabels={false}
title="Revenue by Product Sub Group"
subTitle="Revenue figures from the Consumer Sales Qlik Sense application"
cols={[
{ qField: "[Product Sub Group Desc]", qLabel: "Product Sub Group" },
{
qField: "=Sum( [Sales Quantity]*[Sales Price])",
qLabel: "Revenue",
},
]}
sortOrder={[1, 0]}
/>
</Motor>
);
}

Horizontal Bar Chart

Horizontal Bar Gif

function ColumnDemo() {
return (
<Motor config={config}>
<Bar
width={800}
height={450}
legendLeftRight="left"
legendDirection="row"
showLabels
showLegend={false}
showCrossHair={false}
renderHorizontally
title="Revenue by Product Sub Group"
subTitle="Revenue figures from the Consumer Sales Qlik Sense application"
cols={[
{ qField: "[Product Group Desc]", qLabel: "Product Group" },
{
qField: "=Sum( [Sales Quantity]*[Sales Price])",
qLabel: "Revenue",
},
]}
sortOrder={[1, 0]}
/>
</Motor>
);
}

Theme API

All components are styled from the main theme. Each theme can be overwtitten which will allow for all charts to share common functionality without having to set the props at an individual level.

Most of the chart settings are in global.chart. Changing any setting in the above will apply to all charts within the application. Specific bar chart related theme items are stored in bar. Changing these settings will apply to all bar charts within the application.

Theme settings can be overwritten at a global level, see below for an example.

import { Motor, ... } from @motor-js/core
//...
const myTheme = {
global: {
colorTheme: "divergent9",
},
};
<Motor config={config} theme={myTheme}>
...
</Motor>

global.chart

The global.chart object is documented below.

chart: {
border: {
color: "var(--oc-gray-4)",
size: "1px",
style: "solid",
},
wrapper: {
borderRadius: "10px",
backgroundColor: "white",
userSelect: "none", // add to props
display: "flex", // add to props
boxSizing: "border-box",
position: "relative",
padding: "16px 16px 0px",
fontWeight: "normal",
minHeight: "200px",
textDecoration: "none",
showBoxShadow: true,
boxShadow: "rgba(0, 0, 0, 0.1) -2px 2px 8px 0px",
flexDirection: "column",
},
error: {
// dataErrorMsg: 'Invalid Dimension or Measure.',
dimensionErrMsg: "Invalid Dimension.",
measureErrMsg: "Invalid Measure. No values returned.",
},
titles: {
wrapper: {
display: "flex",
flexDirection: "column",
webkitBoxPack: "justify",
justifyContent: "space-between",
maxHeight: "50px",
backgroundColor: "rgb(247, 247, 247)",
margin: "-16px -16px 0px",
padding: "15px 20px",
marginBottom: "15px",
},
title: {
color: "var(--oc-gray-8)",
fontSize: {
tiny: "14px",
small: "16px",
medium: "18px",
large: "20px",
xlarge: "22px",
},
},
subTitle: {
color: "var(--oc-gray-6)",
fontSize: {
tiny: "10px",
small: "12px",
medium: "14px",
large: "16px",
xlarge: "18px",
},
},
},
suppressZero: false,
suppressMissing: false,
otherTotalSpec: undefined,
showLegend: true,
showAxisLabels: "both",
margin: "10px",
padding: 0.2, // Padding between bars
useAnimatedAxes: false,
includeZero: true,
multiColor: true,
selectionMethod: "brush",
autoWidth: false,
renderHorizontally: false,
color,
showLabels: true,
showPoints: true,
roundNum: true,
precision: true,
hideAxisLine: "yAxis",
noData: {
verticalAlign: "top",
borderRadius: "10px",
// backgroundColor: "var(--oc-gray-1)",
backgroundColor: "white",
// borderCollapse: "collapse",
},
noDataContent: {
display: "flex",
alignItems: "center",
justifyContent: "center",
margin: "10px",
},
baseColor: "#fff",
colors: [
"#0b7285",
"#15aabf",
"#fcc419",
"#ff8787",
"#6741d9",
"#e599f7",
],
brush: {
stroke: null,
patternStroke: null,
patternWidth: null,
patternHeight: null,
},
legendStyles: {
backgroundColor: "#fff",
// stroke: "white",
// opacity: 1,
// borderRadius: "10px",
// legendGroup: { opacity: "1", userSelect: "none" },
// legendText: { fill: "var(--oc-gray-7)" },
},
legendLabelStyles: {
fill: "#212529",
stroke: "none",
fontFamily,
fontSize: {
tiny: "10px",
small: "12px",
medium: "14px",
large: "16px",
xlarge: "18px",
},
letterSpacing: 0.4,
textAnchor: "middle",
fontWeight: "normal",
pointerEvents: "none",
},
backgroundStyles: {
pattern: null,
stroke: "#adb5bd",
strokeWidth: 0.5,
style: undefined,
styleFrom: undefined,
styleTo: undefined,
},
fillStyles: {
style: undefined,
styleFrom: undefined,
styleTo: undefined,
},
gridStyles: {
rows: {
stroke: "#adb5bd",
strokeWidth: 1,
strokeDasharray: "5,3",
numTicks: 10,
lineStyle: null,
// offset: null,
tickValues: null,
},
columns: {
stroke: "#adb5bd",
strokeWidth: 1,
strokeDasharray: "5,3",
numTicks: 10,
lineStyle: null,
// offset: null,
tickValues: null,
},
},
selection: {
opacity: 1,
// stroke: "black",
// strokeWidth: "1px",
},
nonSelection: {
opacity: 0.5,
// background: "var(--oc-gray-1)",
},
hover: {
opacity: 0.5,
// background: "var(--oc-gray-1)",
},
tooltip: {
// snapToDataX: false,
// snapToDataX: false,
valueOnly: false,
valueWithText: false,
showClosestItem: true, // Used for tooltip
useSingleColor: false, // Used for tooltip. True uses colors as per headingColor
headingColor: "altDark",
tooltipStyles: {
borderRadius: "3px",
boxShadow: "0 1px 2px rgba(33,33,33,0.2)",
fontSize: {
tiny: "10px",
small: "12px",
medium: "14px",
large: "16px",
xlarge: "18px",
},
lineHeight: "1em",
padding: ".3rem .5rem",
pointerEvents: "none",
position: "absolute",
backgroundColor: "#fff",
color: "altDark",
textAlign: null,
},
},
xAxisStyles: {
stroke: "#adb5bd",
strokeWidth: 1,
label: {
bottom: {
fill: "#212529",
stroke: "none",
fontFamily,
fontSize: {
tiny: "10px",
small: "12px",
medium: "14px",
large: "16px",
xlarge: "18px",
},
letterSpacing: 0.4,
textAnchor: "middle",
fontWeight: "normal",
pointerEvents: "none",
// dy: "-0.25em",
dy: "0.25em",
},
top: {
fill: "#212529",
stroke: "none",
fontFamily,
fontSize: {
tiny: "10px",
small: "12px",
medium: "14px",
large: "16px",
xlarge: "18px",
},
letterSpacing: 0.4,
textAnchor: "middle",
fontWeight: "normal",
pointerEvents: "none",
dy: "-0.25em",
},
},
},
yAxisStyles: {
stroke: "#adb5bd",
strokeWidth: 1,
label: {
left: {
fill: "#212529",
stroke: "none",
fontFamily,
fontSize: {
tiny: "10px",
small: "12px",
medium: "14px",
large: "16px",
xlarge: "18px",
},
letterSpacing: 0.4,
textAnchor: "middle",
fontWeight: "normal",
pointerEvents: "none",
dx: "-2.3em", // "-1.5em",
},
right: {
fill: "#212529",
stroke: "none",
fontFamily,
fontSize: {
tiny: "10px",
small: "12px",
medium: "14px",
large: "16px",
xlarge: "18px",
},
letterSpacing: 0.4,
textAnchor: "middle",
fontWeight: "normal",
pointerEvents: "none",
dx: "1.5em",
},
},
},
xTickStyles: {
stroke: "#adb5bd",
tickLength: 4,
label: {
bottom: {
fill: "#495057",
stroke: "none",
fontFamily,
fontSize: {
tiny: "8px",
small: "10px",
medium: "12px",
large: "14px",
xlarge: "16px",
},
letterSpacing: 0.4,
textAnchor: "middle",
fontWeight: 200,
pointerEvents: "none",
dy: "0.125em",
},
top: {
fill: "#495057",
stroke: "none",
fontFamily,
fontSize: {
tiny: "8px",
small: "10px",
medium: "12px",
large: "14px",
xlarge: "16px",
},
letterSpacing: 0.4,
textAnchor: "middle",
fontWeight: 200,
pointerEvents: "none",
dy: "-0.35em",
},
},
},
yTickStyles: {
stroke: "#adb5bd",
tickLength: 4,
label: {
left: {
fill: "#495057",
stroke: "none",
fontFamily,
fontSize: {
tiny: "8px",
small: "10px",
medium: "12px",
large: "14px",
xlarge: "16px",
},
letterSpacing: 0.4,
textAnchor: "end",
fontWeight: 200,
pointerEvents: "none",
dx: "-0.25em",
dy: "0.25em",
},
right: {
fill: "#495057",
stroke: "none",
fontFamily,
fontSize: {
tiny: "8px",
small: "10px",
medium: "12px",
large: "14px",
xlarge: "16px",
},
letterSpacing: 0.4,
textAnchor: "start",
fontWeight: 200,
pointerEvents: "none",
dx: "0.25em",
dy: "0.25em",
},
},
},
valueLabelStyles: {
fill: "#495057",
stroke: "#fff",
fontFamily,
fontSize: {
tiny: "8px",
small: "10px",
medium: "12px",
large: "14px",
xlarge: "16px",
},
letterSpacing: 0.4,
strokeWidth: 2,
fontWeight: "normal",
textAnchor: "middle",
pointerEvents: "none",
paintOrder: "stroke",
},
},

global.bar

bar: {
stroke: "#fff",
strokeWidth: 1
}