How to Customize Pie/Bar/Column/Area/Line Chart Data Labels
How to Customize Pie/Bar/Column/Area/Line Chart Data Labels
If you find yourself needing to modify data labels on a widget, and the built-in capabilities do not allow you to achieve your goal, it might be possible to customize those values with the help of JavaScript.
Note: The script was developed on L2023.3 Sisense Linux-based version.
This is an example JavaScript code snippet that could be used to customize the Pie/Bar/Column/Area/Line Chart data labels. In the example below, the script modifies the font size and color of the labels of a Pie Chart. To use it, add it to the "Edit Script" section on a widget level:
The JavaScript code snippet is below:
widget.on('beforeviewloaded', (widget, element) => {
const style = element.options.plotOptions.series.dataLabels.style
element.options.plotOptions.series.dataLabels.style = !!style ? style : {}
element.options.plotOptions.series.dataLabels.style.fontSize = '20px'
element.options.plotOptions.series.dataLabels.style.color = '#e28743'
})
Other widget types examples of how the data values are affected by the same script:
Feel free to use this example snippet and customize it further by adding additional parameters to make your widget look the way you need. Feel free to share your experience in the comments!
Disclaimer: Please note, that this blog post contains one possible custom workaround solution for users with similar use cases. We cannot guarantee that the custom code solution described in this post will work in every scenario or with every Sisense software version. As such, we strongly advise users to test solutions in their own environment prior to deploying them to ensure that the solutions proffered function as desired in their environment. For the avoidance of doubt, the content of this blog post is provided to you “as-is” and without warranty of any kind, express, implied or otherwise, including without limitation any warranty of security and or fitness for a particular purpose. The workaround solution described in this post incorporates custom coding which is outside the Sisense product development environment and is therefore not covered by not covered by Sisense warranty and support services.
Howard
·2 years agoHi Liliia_DevX
Thank you for your explanation.
It's very helpful.
Best regards, Howard
Liliia Kislitsyna
AdminOP2 years agoHoward hi!
This line essentially checks if the style variable is defined and not falsy. If it is, it assigns its value to the style property of the data labels style. Otherwise, it assigns an empty object {}. This ensures that the style property is always defined before further modifications are made to it. This can be useful to avoid errors if the style is not initially set.
Hope it helps!
Best Regards, Lily
Howard
·2 years agoDear Sisense Team,
Since I did not familiar about Java Script or HTML.
Can you kindly explain what's the meaning of the following code and what can it do?
Thank you.