Area

Area chart.

Area Gif

Usage

import { Area } from @motor-js/core
//...
<Area
width={750}
height={350}
cols={[
{ qField: "[Month]", qLabel: "Month" },
{
qField: "=Sum([Sales Margin Amount])",
qLabel: "Margin",
},
]}
/>

This can get more complex by setting various other propertes within the cols property which will allow for the naming of columns and the ability to sort the data.

A more advanced version demonstrating this is displayed below.

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'
fillStyleFill style for area. (Use qFillStyle in cols for individual area.)oneOf
'DarkGreen'
'LightGreen'
'OrangeRed'
'PinkBlue'
'PinkRed'
'PurpleOrangle'
'PurpleRed'
'PurpleTeal'
'SteelPurple'
'TealBlue'

for custom pass object :
{ style : either Radial / Linear
fillFrom : hexCode
fillTo : hexCode}
curveShapeCurve shape for area (use qCurve in cols for individual area. Currently applies to non stacked areas)oneOf
'Basis'
'BasisClose'
'BasisOpen'
'Step'
'StepAfter'
'StepBefore'
'Bundle'
'Linear'
'LinearClosed'
'MonotoneX'
'MonotoneY'
'Cardinal'
'CardinalClosed'
'CardinalOpen'
'CatmullRom'
'CatmullRomClosed'
'CatmullRomOpen'
'Natural'
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.
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"
allowSelectionsAllow selections to be made on the chartbool
* default obtained from theme.
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'
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
showCrosshairTurns the crosshair on or off. This appears alongside the tooltip when a bar is hovered over
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, } '
boolean
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
showBoxShadowShow a shadow around the main chart containerboolean
* default obtained from theme.

Examples

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

Stacked Area Chart

Stacked Area

<Area
width={750}
height={350}
showLabels
stacked
showPoints={false}
showLegend
showCrossHair={false}
title="Sales and Margin over Time"
cols={[
{ qField: "[Month]", qLabel: "Month" },
{
qField: "=Sum([Sales Margin Amount])",
qLabel: "Margin",
},
{
qField: "=Sum([Sales Amount])",
qLabel: "Sales",
},
]}
/>

Range Fill Color

Stacked Area

<Area
width={750}
height={400}
colorTheme="bio"
suppressZero
stacked
showCrossHair={false}
showPoints={false}
curveShape='Natural'
cols={[
{
qField: '[Month]',
qLabel: 'Month',
},
{
qField: '=sum([Sales Amount])',
qLabel: 'Sum of Sales',
qFillStyle: {
style: "Linear",
fillFrom : "#c21500",
fillTo : "#ffc500"
}
},
]}
/>

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,
allowSelections: true, //captureEvents if captureevents true the cannot make selections
events: 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",
},
},