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

Prop	Description	Options / Example
`cols`	Columns from Qlik Data Model to render in the chart.	`array` {[ "Case Owner Group", "=Avg([Case Duration Time])" ]}
`calcCondition`	Calculated condition to be met before chart can be displayed.	`shape` { qCond: "=Avg([Case Duration Time])> 5", qMsg: "Calculation condition has not been met", }
`suppressZero`	Suppress items whith zero values from being displayed in the chart	`boolean` * default obtained from theme.
`barSortOrder`	Order of the columns on which the returned data shoud be sorted	`array` [1,0]
`sortDirection`	Direction by which the chart should be sorted. Can either be ascending or descending.	`string` 'ASCENDING' 'ASC' 'DESCENDING' 'DESC'
`width`	Chart width as a number which will be converted to pixels. If not set, the parent container width will be used	`number`
`height`	Chart width as a number which will be converted to pixels. If not set, the parent container width will be used	`number`
`margin`	The margin size around the component	`string` '5px'
`size`	Size of the text used in the chart	`oneOf` 'tiny' 'small' 'medium' 'large' 'xlarge'
`showLabels`	Label position of values for the chart	`oneOf` 'top' "none" 'inside' * default obtained from theme.
`border`	Border to be dispalyed around the chart	`boolean` `oneOf` "top" "left" "bottom" "right" "start" "end" "horizontal" "vertical" "all" "between" "none" * default obtained from theme.
`backgroundColor`	Background color the chart	`string` * default obtained from theme.
`backgroundStyle`	Colour gradient of chart background. Pass style of one of below or pass styleFrom and styleTo	`oneOf` '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" }'
`backgroundPattern`	Background pattern for the chart	`oneOf` 'Lines' 'Cirlces' 'Hexagon' 'Waves'
`borderRadius`	Border radius of the border around the chart	`string` * default obtained from theme.
`colorTheme`	Color scheme to be used for the chart	`array` `oneOf` "motor" "divergent13" "divergent9" "eco" "bio" "red" "blue" "gray" "pink" "grape" "violet" "indigo" "blue" "cyan" "teal" "green" "lime" "yellow" "orange" * default obtained from theme.
`stacked`	Draw chart as stacked chart	`bool` * default obtained from theme.
`roundNum`	Use round numbering to dispaly labels on charts	`bool` * default obtained from theme.
`precision`	Number of decimal precsion when displaying bar labels	`number`
`title`	Title to be dispalyed on top of chart	`string` * default obtained from theme.
`subTitle`	Sub title to be dispalyed on top of chart	`string` * default obtained from theme.
`showLegend`	Display chart legend.	`bool` `oneOf` "right" "bottom"
`showAxisLabels`	Display axis labels on the chart	`bool` `oneOf` "both" "yAxis" "xAxis" "none" * default obtained from theme.
`hideAxisLine`	Hide axis line on the chart	`bool` `oneOf` "both" "yAxis" "xAxis" "none" * default obtained from theme.
`otherTotalSpec`	Message to be displayed if an invalid measure is used in the cols property	`bool` `shape` { qOtherLabel: "Other", qOtherCount: "5", } * default obtained from theme.
`gridArea`	Name of the parent grid to place the Bar	`string`
`showBoxShadoow`	Show or hide box shadow	`boolean`
`stacked`	Stack the bar chart	`boolean`
`showAsPercent`	Show the bars as percentage	`boolean`
`selectionMethod`	Change the selection method, either click or brush	`oneOf` 'click' 'brush' 'none'
`renderHorizontally`	Render as a horizontal bar chart	`boolean`
`dualAxis`	Add a second axis to the chart	`boolean`
`legendTopBottom`	Render the legend on the top or bottom of the chart	`string` 'top' 'bottom'
`legendLeftRight`	Render the legend on the left or right of the chart	`string` 'left' 'right'
`legendDirection`	Direction of the legend values	`string` 'row' 'column'
`numDimensionTicks`	Number of ticks for the X Axis. Leave blank to auto calculate	`number`
`numMeasureTicks`	Number of ticks for the Y Axis. Leave blank to auto calculate	`number`
`numMeasureDualTicks`	Number of ticks for the second Y Axis. Leave blank to auto calculate	`number`
`formatAxisDate`	Format of dates to be displayed on X Axis	`string`
`formatTooltipDate`	Format of dates to be displayed on the tooltip	`string`
`useSingleColor`	Use only a sinlge color in the tooltip	`bool`
`showCrosshair`	Turns the crosshair on or off. This appears alongside the tooltip when a bar is hovered over	`boolean`
`crossHairStyles`	Styling for the crosshair	`object` '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, } '
`showTooltip`	Turns the tooltip on or off	`boolean`
`xAxisStyles`	Set the X-Axis style, see the theme object for properties	`object`
`yAxisStyles`	Set the Y-Axis style, see the theme object for properties	`object`
`xTickStyles`	Set the X-Axis ticks style, see the theme object for properties	`object`
`yTickStyles`	Set the Y-Axis ticks style, see the theme object for properties	`object`
`legendLabelStyle`	Object to be used for the styling of the legend labels	`object` 'e.g.' ' { fill: "darkblue", fontWeight: 800, } '
`valueLabelStyle`	Object to be used for the styling of the value labels	`object` 'e.g.' ' { fill: "white", stroke: "red"", } '
`showBoxShadow`	Show a shadow around the main chart container	`boolean` * 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
}

Bar chart. A chart displaying horizontal or vertical bars.#

Usage#

Props#

Sample Syntax#

cols settings#

Overview

calcCondition settings#

otherTotalSpec settings#

Examples#

Chart sorted by descending values#

Horizontal Bar Chart#

Theme API#

global.chart#

global.bar#