How to display the ToolTip text in currency format in JavaScript Chart?

By default, X value and Y value of a point are displayed in ToolTip text on placing mouse over a chart point in JavaScript Chart. The labelFormat property of the horizontal axis is used to format the X value displayed in the ToolTip and labelFormat property of the vertical axis is used to format the Y value displayed in the ToolTip.

ToolTip is displayed in currency format by setting c (currency with two decimal places) as the value to the labelFormat property. Other possible values include c0, c1, c2, c3, etc., for displaying ToolTip text in currency format.

JS

$("#container").ejChart({
    commonSeriesOptions: {
        tooltip: {
            visible: true,
        },
        . . . . . .
    },
    primaryYAxis: {
        labelFormat: 'c2’
        . . . . . .
    }
    . . . . . .
});

The following screenshot displays chart with ToolTip text in currency format:

JS Playground sample link: Currency Formatting

The following table describes the result of using c0, c1, etc., formats on ToolTip text 20:

Conclusion

I hope you enjoyed learning how to display the ToolTip text in currency format in JavaScript Chart. You can refer to our JavaScript Chart feature tour page to know about its other groundbreaking feature representations documentation and how to quickly get started for configuration specifications.  You can also explore our JavaScript Chart example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!