Mastering Qlik Sense

Initializing the SVG chart

This part covers all the calculations around the settings and sizing of the visualization chart. This is where you can read your settings from the property panel.

In this particular example, in the initialization part, we will conduct three exercises:

• Setting the width and height of the SVG: $element.width() and $element.height() provide the dynamic width and height of the extension. To ensure the axis and other elements of the visualization have enough space on the canvas, we apply a margin and recalculate the width and height, less the margin, for visualization purposes:

//MasteringQSBarChart.js - scope.init() (snippet)scope.margin = {top: 30, right: 30, bottom: 30, left: 50}scpe.width = $element.width() - scope.margin.right ...