Disable selections in charts using NebulaJS/stardust

[mnero]

Does anyone know how to disable selections for a chart?

My requirements are identical to those detailed here  and here.  However those solutions are for the Capabilities API and the Viz API not NebulaJS.

Looking at the qlik.dev embed documetation I only see the options parameter in the render function, but that has no documentation.

[rankassovitz · Accepted solution]

Hello @mnero ,

The documentation for this is here:
https://qlik.dev/extend/extend-qlik-visualizations/configuration/#constraints

example:

import { embed } from "@nebula.js/stardust";
import barchart from "@nebula.js/sn-bar-chart";
import piechart from "@nebula.js/sn-pie-chart";
import pinkishTheme from "./pinkish-theme";

const baseConfig = embed.createConfiguration({
  themes: [{
    id: 'pinkish',
    load: () => Promise.resolve(pinkishTheme),
    // load: () => Promise.resolve({
    //   palettes: {
    //     data: [{
    //       scale: [
    //         '#fac6e5',
    //         '#ff95d6',
    //         '#e76eb1',
    //         '#b44772',
    //       ],
    //     }],
    //   },
    // }),
  }],
  types: [
    {
      name: "bar",
      load: () => Promise.resolve(barchart),
    },
    {
      name: "pie",
      load: () => Promise.resolve(piechart),
    },
  ],
  context: {
    theme: 'pinkish',
    deviceType: 'auto',
    language: 'en-US',
  },
});

const noSelectionPink = baseConfig.createConfiguration({
  context: {
    theme: 'pinkish',
    constraints: {
      // active: true, // turn off interactions like zoom, scroll etc.
      // passive: true, // turn off interactions like tooltips
      select: true, // turn off selections
    },
  },
});


// render with baseConfig
baseConfig(enigmaApp).render(/*chart config*/);

// render chart with pinkish theme with no selections allowed
noSelectionPink(enigmaApp).render(/*chart config*/);
noSelectionPink(anotherEnigmaApp).render(/*chart config*/);