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
​
​

NebulaConnection

NebulaSelections

Last modified 8mo ago

Copy link

Contents

Usage

Props