Configuring tick marks

Here, we'll see how to:

Let's see them one by one.

Show/hide tick marks and tick values

You can opt to hide both the tick marks and tick values using:

<chart ... showTickMarks='0' showTickValues='0' ...>
{
  "chart": {
   ...
    "showtickmarks": "0",
    "showtickvalues": "0"
    ...    
},

This will result in:

 
Configuring tick values

You can opt to show every nth tick value by setting:

<chart ... tickValueStep='2' ...>
{
  "chart": {
   ...
    "showtickstep": "2"
    ...    
},

This will result in every 2nd major tick mark's value being shown, as under:

You can also set the decimals for the tick values using:

<chart ... tickValueDecimals='2' forceTickValueDecimals='1' ..>
{
  "chart": {
   ...
    "tickvaluedecimals": "2",
    "forcetickvaluedecimals": "1"
    ...    
},

Here, we've set tick value decimals as 2 and forced them to display. It will result in:

 
Placing tick marks & values inside

You can opt to show tick marks & tick values inside by setting: 

<chart ... placeTicksInside='1' placeValuesInside='1' ...>
{
  "chart": {
   ...
    "placeticksinside": "1",
    "placevaluesinside": "1"
    ...    
},

This will result in:

 
Configuring number of major and minor tick marks

You can configure the number of tick marks as under: 

<chart ... majorTMNumber='12' minorTMNumber='3' ...>
{
  "chart": {
   ...
    "majortmnumber": "12",
    "minortmnumber": "3"
    ...    
},

It will result in:

As you can see above, the chart has automatically adjusted the number of major ticks to a best feasible value. However, if you do not want the chart to do the same, you can add:

<chart ... adjustTM='0' majorTMNumber='12' minorTMNumber='3' ...>
{
  "chart": {
   ...
    "adjusttm": "0",
    "majortmnumber": "12",
    "minortmnumber": "3"
    ...    
},

It will then result in:

 
Configuring tick mark cosmetics

You can configure tick mark cosmetics using: 

<chart ... majorTMColor='333333' majorTMAlpha='100' majorTMHeight='10' majorTMThickness='2' minorTMColor='666666' minorTMAlpha='100' minorTMHeight='7' minorTMThickness='1' ...>
{
  "chart": {
   ...
    "majortmcolor": "333333",
    "majortmalpha": "100",
    "majortmheight": "10"
    "majortmthickness": "2"
    "minortmcolor": "666666",
    "minortmalpha": "100",
    "minortmheight": "7",
    "minortmthickness": "1"
    ...    
},

This will result in:

 
Setting tick value paddings

You can configure the tick value padding (in pixels) as under:

<chart ... tickValueDistance='25' ...>
{
  "chart": {
   ...
    "tickvaluedistance": "25"
    ...    
},

This will result in:

Starting FusionWidgets XT, you can ask the chart to automatically manage the overlapping of tick values using manageValueOverlapping='1' and autoAlignTickValues='1' in the <chart> element.