Data Labels: Enable, Customize, & Round Data Labels

How to Enable, Customize, & Round Data Labels

Enable Data Labels

1. Navigate to Advanced Properties

To enable Data Labels in HTML5 charts, you'll need to use the Advanced Properties.

• Double-click on your chart.

• Click "Advanced Properties"

2. Add Property

• Click "Add"

• Set the Property name to:

  • plotOptions.[CHART TYPE].dataLabels.enabled

    • Examples:

      • plotOptions.bar.dataLabels.enabled

      • plotOptions.column.dataLabels.enabled

      • plotOptions.pie.dataLabels.enabled

• Check ✅ Use an expression

• Set the Property value to:

  • "true"

That's it! Your chart will now have data labels.

But wait...

Where did I get the property name and value?

Follow this link to see the full list of customizable HTML5 chart (a.k.a "Highcharts") properties can be found.

There's a lot of them...which is both the pain and the beauty of the HTML5 charts. They are extremely customizable, but you may have to dig for a while to find the property you're looking for.

TIP: Paste the property name into JSS by copying the last section of the URL from the highcharts website to ensure you get the exact name. Click on the property you want, then copy and paste the last part of the URL into the "Property name" field in JSS.

Customize Your Data Labels

Display the Percentage Instead of the Count

If you've added data labels to a Stacked Percent chart, you'll notice immediately that the data labels, by default, display the count, not the percentage, of students for each bar. I highly recommend changing this. You will like confuse your user if the data labels do not match what the chart is actually visualizing.

To display the percentage, you'll need to format your data label:

• Double-click on your chart

• Go to Show Advanced Properties

• Click *Add

• Set the Property name to:

  • plotOptions.[CHART TYPE].dataLabels.format

    • Examples:

      • plotOptions.bar.dataLabels.format

      • plotOptions.column.dataLabels.format

      • plotOptions.pie.dataLabels.format

• Check ✅ Use an expression

• Set the Property value to:

  • "{point.percentage:.1f}"

    • {point.percentage} displays the percentage.

    • :.1f rounds the percentage to 1 decimal point (see below for more information about rounding data labels).

      • Note: In a Stacked Percent chart, "{point.y}" will display the raw data (i.e. the count of students), and "{point.percentage}" will display the percentage. If you wanted to display both the count and the percentage, you would set the property value to: "{point.y} Students({point.percentage:.1f}%)" There's typically not enough room for this much information in a data label, so I do not recommend displaying both in most circumstances.

Your data labels should now be showing the percent of students for each bar.

Round Your Data Labels

If you need to round your data labels:

• Add or Edit the Data Label Format:

  • Click Add (or modify the property if you've already added it)

  • Set the Property name to:

    • plotOptions.[CHART TYPE].dataLabels.format

      • Examples

        • plotOptions.bar.dataLabels.format

        • plotOptions.column.dataLabels.format

        • plotOptions.pie.dataLabels.format

• Check ✅ Use an expression

• Set the Property value to:

  • "{point.y:.1f}"

  • Or, "{point.percentage:.1f}" for a Stacked Percent chart

    • The :.1f must be after point.y or point.percentage but inside the curly bracket "}"

    • :.1f will round the label to 1 decimal place

    • :.2f will round the label to 2 decimal places

    • :.0f will round the label to a whole number, and so on.