Wijmo UI for the Web
Show Tick Marks
Wijmo User Guide > Widgets > BubbleChart > BubbleChart How To > Show Tick Marks

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

  1. 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

    Drop down and copy code

  2. No changes are necessary in the <body> section of your HTML file. The basic <div> tag is sufficient to create the chart.
  3. 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.

See Also

BubbleChart How To

Widgets

Quick Start

Reference

wijbubblechart jQuery Widget
axis Option
legend Option
seriesList Option
 
Support Options