Customize x-axis on ZingChart

Question

I'd like to draw a graph similar to this one using ZingChart:

The best I could do until now was this:

Souce:

{ 
  "graphset": [{
    "type": "line",
    "series": [
        {
            "values":[[1,218.2], [2,121.7], [4,62.27], [8,34.37], [16,19.79], [20,16.52], [32,17.1], [40,16.11], [64,91.9]]
        }
    ],
    "scale-x":{
        "values":[1,2,4,8,16,20,32,40,64]
    }
  }]
}

How can I fix the position of the x-ticks to be the same as the x-values?

Answer 1

You'll want to start by setting the max-items and items-overlap attributes in your scale-x object to force show all items along the scale.

"scale-x":{
    "max-items":9999, //forces all items 
    "items-overlap":true, //forces items (labels) to show even when overlapping
    /* Code truncated for brevity */

After that, set the alpha (transparency) to 0 in the item object and the tick object to hide all of the ticks and items. Enable only the items you want to show by configuring an object within the rules array in both item and tick to display the desired scale values.

"item":{
    "alpha":0,
    "rules":[
        {
           "rule":"%scale-value == 1 || %scale-value == 4 || %scale-value == 8 || %scale-value == 16 || %scale-value == 20 || %scale-value == 32 || %scale-value == 40 || %scale-value == 64",
           "alpha":1
        }
     ]
},

I'm a member of the ZingChart team. Please take a look at this demo and let me know if I can answer any more questions on how this works.