Tooltip: Customizing the Tooltip

The "Tooltip" is the information you see when you hover your mouse over different parts of the chart.

In order to see the Tooltip in JSS, you need to switch the HTML Preview.

When you Preview your report, click on the little triangle next to "Java" at the top of the preview, and select HTML. This will generate an HTML preview of the report, and allow you to see the chart's Tooltip.

Stacked Percent & Pie Charts

For the most part, the tooltip will show the information you want by default. The exceptions to that rule are the "Stacked Percent Bar", "Stacked Percent Column", and Pie charts. These charts will show the raw data (i.e. the count of students) by default, and not the percent of students. Ideally, the tooltip should show both the count and percentage*.

Show the Count AND the Percentage in the Tooltip

In order to customize the tooltip, you'll need to use Advanced Properties.

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:

  • tooltip.pointFormat

• Check "Use an Expression" box

• Set the Property value to:

  • "<span style=\"color:{point.color}\">\u25CF</span> {series.name}: <br><b>{point.y} Students</b><br/><b>{point.percentage:.1f}%</b>"

  • Feel free to copy & paste the value to make your life easier!

Rounding in HTML5 Charts

• The :.1f after the point.percentage rounds the percentage in the tooltip.

  • The :.1f must be after 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.

That's it! Your tooltip will now display both the count and percentage.

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.

This website provides all the HTML5 chart properties that can be customized and tells you the default value for each property. When customizing HTML5 chart properties, I routinely copy and paste the default from this website, and then make the changes I want to make.

There are a lot of properties...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.