Show Tick Marks

Building on the Quick Start example, you can add tickMajor and tickMinor objects, which contain styles for the axis tick marks.

In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which does the following:

Sets the following options on the X axis:
- The X axis has title text reading "Sales."
- X axis labels use C0 formatting (currency with no decimals).
- Tick marks for each major value in the chart (tickMajor) cross the X axis line, and are blue.
- Tick marks for each minor value in the chart (tickMinor) sit inside the X axis line, and are lime green.
  Important: The position attribute of the tick mark determines whether to show it.
Hides the legend so that the X axis labels are not crowded.
Creates a series with the following properties:
- Labels used in the tooltips read "Company X Market Share."
- The Y axis displays the number of products for each company.
- The X axis displays the sales for each company.
- The Y1 value sets the size of each company's bubble based on its market share

Show Tick Marks Script	Copy Code
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { $("#wijbubblechart").wijbubblechart({ axis: { y: {text: "Number of Products"}, x: { text: "Sales", annoFormatString: "C0", tickMajor: {position: "cross", style: {stroke: "blue"}}, tickMinor: {position: "inside", style: {stroke: "limegreen"}} } }, legend: {visible: false}, seriesList: [ { label: "Company A Market Share", data: { y: [14], x: [12200], y1: [.15] } }, { label: "Company B Market Share", data: { y: [20], x: [60000], y1: [.23] } }, { label: "Company C Market Share", data: { y: [18], x: [24400], y1: [.1] } }] }); }); </script>

Show Tick Marks Script

Copy Code

<script id="scriptInit" type="text/javascript">
$(document).ready(function () {
    $("#wijbubblechart").wijbubblechart({
        axis: {
            y: {text: "Number of Products"},
            x: {
                text: "Sales", 
                annoFormatString: "C0", 
                tickMajor: {position: "cross", style: {stroke: "blue"}},
                tickMinor: {position: "inside", style: {stroke: "limegreen"}}
                }
        },
        legend: {visible: false},
        seriesList: [
        {
            label: "Company A Market Share",
            data: { y: [14], x: [12200], y1: [.15] }
        }, {
            label: "Company B Market Share",
            data: { y: [20], x: [60000], y1: [.23] }
        }, {
            label: "Company C Market Share",
            data: { y: [18], x: [24400], y1: [.1] }
        }]
    });
});
</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 chart appears like the one in the image below, with blue major tick marks that cross the X axis, and limegreen minor tick marks inside it.

Widgets

Quick Start

Reference