Format Numeric Values

Building on the Quick Start example, you can format and rotate the axis labels using the annoFormatString and labels options of the axis, and format the tooltip text by creating a function for the content of the hint option.

Note: By default, the tooltip text shows the seriesList label and the Y data, but we are changing it to display the label and the X data instead.

In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which uses the hint option to format the tooltip text, and formats the axis labels using the annoFormatString and labels options of the axis.

Script	Copy Code
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { $("#wijscatterchartDefault").wijscatterchart({ axis: { x: { text: "Annual Income per Person", annoFormatString: "C0", labels: {style: {rotation: -45}} }, y: {text: "Birth Rate"} }, hint:{ content: function(){ return this.data.label + '\n ' + Globalize.format(this.x, "C0") + ''; } }, seriesList: [ { label: "Madagascar", data: {x: [800], y: [5.7]} }, { label: "India", data: {x: [3100], y: [2.85]} }, { label: "Mexico", data: {x: [9600], y: [2.49]} }, { label: "Taiwan", data: {x: [25300], y: [1.57]} }, { label: "Norway", data: {x: [40000], y: [1.78]} }] }); }); </script>

Script

Copy Code

<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        $("#wijscatterchartDefault").wijscatterchart({
        axis: {
            x: {
                text: "Annual Income per Person", 
                annoFormatString: "C0", 
                labels: {style: {rotation: -45}}
            },
            y: {text: "Birth Rate"}
        },
        hint:{
            content: function(){
                return this.data.label + '\n ' +  Globalize.format(this.x, "C0") + '';
            }
        },
        seriesList: [
        {
            label: "Madagascar",
            data: {x: [800], y: [5.7]}
        }, {
            label: "India",
            data: {x: [3100], y: [2.85]}
        }, {
            label: "Mexico",
            data: {x: [9600], y: [2.49]}
        }, {
            label: "Taiwan",
            data: {x: [25300], y: [1.57]}
        }, {
            label: "Norway",
            data: {x: [40000], y: [1.78]}
        }]
        });
    });  
</script>

No changes are necessary in the <body> section of your HTML file. The basic <div> tag is sufficient to create the chart.
Save your HTML file and open it in a browser. The widget appears like the one in the live widget below, with the X axis labels formatted and rotated to better fit the chart. Hover over a data point to see the hint.

Reference

wijscatterchart API

axis Option

annoFormatString Option

Widgets

Quick Start