CODEWITHSUNDEEP
javascriptvisualizationzingchart
luisgabriel
luisgabriel

Reputation: 2493

Customize x-axis on ZingChart

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

The best I could do until now was this: zing-graph

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?

Upvotes: 6

Views: 993

Answers (1)

Maximilian Wang
Maximilian Wang

Reputation: 76

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.

Upvotes: 5

Related Questions