The property panel will become very relevant in the case of the bar chart, or any other visualization, as you will want to provide the user with as many properties and settings as possible so they can update and style the chart to their liking, to appropriately support self-service analytics.
To begin with, we will utilize the native setting components and gradually add more settings as we develop the bar chart. As a starting point, we can add the Bar Color as the first setting, which will leverage Qlik's native color-component:
//properties.js
define([], function(){ return {
type: "items",
component: "accordion",
items: {
dimensions: {
uses: "dimensions",
min: 1,
max: 1
},
measures: {
uses: "measures",
min: 1,
max: 1
},
sorting: {
uses: "sorting"
},
addons: {
uses: "addons"
},
settings: {
uses: "settings",
items: {
barColor: {
label: "Bar Color",
component: "color-picker",
type: "object",
dualOutput: true,
schemaIgnore: true,
ref: "barColor",
defaultValue: {
index: -1,
color: "#657dbc"
},
show: function (layout) {
return true
}
},
}
}
}
};
});
This will result in the following property panel:
It makes sense to successively enrich the property panel as you develop rather than necessarily define everything from the beginning-things may change as you implement your visualizations with new ideas and user feedback. Remember, whenever it's ambiguous, how a setting or styling should be implemented, make it a dynamic property, and let the user decide.