Set X axis to ZingChart

Question

I would like to draw a graph like this using ZingChart:

The best I could do so far 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 in the same way as the x values?

Answer 1

You need to start by setting the max-items and items-overlap attributes on the scale-x object to show all the items on a 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 alpha (transparency) to 0 in the item object and tick object to hide all ticks and elements. Include only those elements that you want to show by setting the object in 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 am a member of the ZingChart team. Please take a look at this demo and let me know if I can answer any other questions about how this works.