NebulaContainer

Usage

This component enables you to embed a Qlik visualisation into your mashup. Either using the id of an existing object or by defining the column definition yourself. Both examples are demonstrated below

Embedding with Object ID

1
import { NebulaContainer } from '@motor-js/nebula'
2
3
const App = () => {
4
5
return (
6
<NebulaContainer
7
render={{
8
id: '934a6a81-3ae1-432a-be51-199f634ffadb',
9
}}
10
styles={{
11
width: '80%',
12
height: 400,
13
paddingTop: 50,
14
}}
15
/>
16
)
17
18
}
19
20
export default App
21
Copied!

Embedding with Cols definition

1
import { NebulaContainer } from '@motor-js/nebula'
2
3
const App = () => {
4
5
return (
6
<NebulaContainer
7
render={{
8
type: 'linechart',
9
fields: ['Company Name', '=sum(Quantity)'],
10
properties: {
11
title: 'Example Title',
12
subtitle: 'Example Sub Title',
13
footnote: 'Example Footer'
14
},
15
}}
16
styles={{
17
width: '80%',
18
height: 400,
19
paddingTop: 50,
20
}}
21
/>
22
)
23
24
}
25
26
export default App
27
Copied!

Chart Types

This package comes bundled with the following nebula chart types
    barchart
    linechart
    table
    combochart
    piechart
    mekkochart
    funnelchart
    sankeychart

Props

Last modified 5mo ago
Copy link
Contents
Usage
Props