Skip to content
This repository has been archived by the owner on Apr 23, 2024. It is now read-only.

qlik-oss/sn-mekko-chart

Folders and files

NameName
Last commit message
Last commit date

Latest commit

62db400 · Apr 23, 2024
Feb 13, 2024
Feb 13, 2024
Jan 12, 2024
Dec 16, 2021
Apr 2, 2024
Jul 8, 2019
Feb 13, 2024
Sep 20, 2023
Jul 25, 2023
Sep 20, 2023
Apr 23, 2024
Aug 10, 2023
Sep 20, 2023
Jul 5, 2019
Dec 16, 2021
Oct 5, 2021
Feb 13, 2024
Jul 5, 2019
Apr 23, 2024
Jul 25, 2023
Jul 25, 2023
Jan 12, 2024
Jul 25, 2023
Apr 2, 2024
Apr 2, 2024
Jul 25, 2023

Repository files navigation

Warning This repository is now archived and will not be updated

This repository was originally published to foster collaboration and engagement with developers as they customized or developed visualizations, but due to customer feedback and usage data, it is now moved back to closed source. Moving this and other projects back to closed source will support better integration with internal build and test tooling, and free up resources for investment in these and other visualizations.

sn-mekko-chart

A basic mekko chart supernova aimed to be used in nebula.js.

mekko chart preview

import { embed } from '@nebula.js/stardust';
import mekko from '@nebula.js/sn-mekko-chart';

// 'app' is an enigma app model
const embeddable = embed(app, {
  types: [{ // register the mekko chart
    name: 'mekko',
    load: () => Promise.resolve(mekko);
  }]
});

embeddable.render({
  element,
  type: 'mekko',
  fields: ['Region', 'Fiscal Year', '=Sum(Sales)'],
});

Requirements

Requires @nebula.js/stardust version >=1.7.0.

Installing

If you use npm: npm install @nebula.js/sn-mekko-chart. You can also load through the script tag directly from any of the CDNs that supports NPM packages, for example: unpkg.

More examples

Color by dimension

In this example the first dimension (Region) is used to color each cell.

mekko chart color by dimension

embeddable.render({
  element,
  type: "mekko",
  fields: ["Region", "Fiscal Year", "=Sum(Sales)"],
  properties: {
    cellColor: {
      mode: "byDimension",
      byDimension: { type: "index", typeValue: 0 },
    },
  },
});

API

The API specifiction is available at Qlik Developer Portal