Scatter

Scatter chart. A chart displaying a scatter chart.

Scatter Gif

Usage

import { Scatter } from @motor-js/core
//...
<Scatter
width={750}
height={400}
colorTheme="bio"
showLabels={true}
selectionMethod="brush"
tooltipStyles={{
borderRadius: '10px',
background: 'beige',
}}
cols={[
{ qField: 'Product Sub Group', qLabel: 'Product Sub Group' },
{
qField: '=Sum({$<[Year]={"2007"}>}[Sales Amount])',
qLabel: 'TY Sales',
},
{
qField: '=Sum([Sales Margin Amount])/Sum([Sales Amount])',
qLabel: 'Margin %',
},
]}
/>

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.
suppressMissingSuppress items whith missing values from being displayed in the chartboolean
* default obtained from theme.
sortOrderOrder 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.
roundNumUse round numbering to dispaly labels on chartsbool
* default obtained from theme.
precisionNumber of decimal precsion when displaying scatter 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.
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.
otherTotalSpecGroup values over a certain number of itemsbool
shape
{
qOtherLabel: "Other",
qOtherCount: "5",
}
* default obtained from theme.
gridAreaName of the parent grid to place the chartstring
showBoxShadoowShow or hide box shadowboolean
selectionMethodChange the selection method, either click or brushoneOf
'click'
'brush'
numDimensionTicksNumber of ticks for the X Axis. Leave blank to auto calculatenumber
numMeasureTicksNumber of ticks for the 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
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.
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, } '

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 { Scatter } from "@motor-js/core";
<Scatter
cols={[
"Case Owner Group",
"=Avg([Case Duration Time])",
"=Min([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 { Scatter } from "@motor-js/core";
<Scatter
cols={[
/*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 { Scatter } from "@motor-js/core";
<Scatter
cols={[
{
"qLibraryId":"eqZjE",
"qType":"measure"
}
]}
....
/>

calcCondition settings

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

otherTotalSpec settings

import { Scatter } from "@motor-js/core";
<Scatter
....
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 scatter chart sorted with conditional chart colouring.

Scatter Color Gif

function ScatterDemo() {
return (
<Motor config={config}>
<Scatter
width={800}
height={450}
colorTheme="bio"
selectionMethod="click"
tooltipStyles={{
borderRadius: "10px",
background: "pink",
}}
cols={[
{
qField: "Supplier Name",
qLabel: "Supplier Name",
qCondChartColor:
"=if(Avg(([Supplier Complaints])>12) or (Avg([Supplier Satisfaction Rating])<10),'Red', 'Green')",
},
{
qField: "=[Supplier Complaints]/Sum(ClaimCounter)",
qLabel: "Ave Supplier Complaints",
},
{
qField: "=Avg([Supplier Satisfaction Rating])",
qLabel: "Ave Supplier Satisfaction Rating",
},
]}
/>
</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 scatter chart related theme items are stored in scatter. Changing these settings will apply to all scatter 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",
display: "flex",
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: {
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",
useAnimatedAxes: false,
includeZero: true,
multiColor: true,
selectionMethod: "brush",
autoWidth: false,
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",
},
},

global.scatter

scatter: {
size: 5,
style: {
strokeWidth: 3,
stroke: "orange",
},
},