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 8mo ago
Copy link
Contents
Usage
Props