cancel
Showing results for 
Search instead for 
Did you mean: 
Liliia_DevX
Sisense Team Member
Sisense Team Member

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:

 

Liliia_DevX_0-1680183310711.png

 

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'
})

 

 

Liliia_DevX_0-1680182517577.png

 

Other widget types examples of how the data values are affected by the same script:

 

Liliia_DevX_1-1680182801359.png

 

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.

Comments
Howard
8 - Cloud Apps
8 - Cloud Apps

Dear 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? 

element.options.plotOptions.series.dataLabels.style = !!style ? style : {}

 Thank you.

Liliia_DevX
Sisense Team Member
Sisense Team Member

@Howard 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
8 - Cloud Apps
8 - Cloud Apps

Hi @Liliia_DevX 

Thank you for your explanation.

It's very helpful.

Best regards, Howard

Version history
Last update:
‎03-31-2023 08:32 AM
Updated by:
Community Toolbox

Recommended quick links to assist you in optimizing your community experience:

Developers Group:

Product Feedback Forum:

Need additional support?:

Submit a Support Request

The Legal Stuff

Have a question about the Sisense Community?

Email [email protected]

Share this page: