CODEWITHSUNDEEP
javascriptjqueryzingchart
user3567857
user3567857

Reputation: 183

Negative X-axis display in ZingChart

I am trying to display a graph with negative values. The x axis should be in the center negative values on the left and positives values on the right. The graph gets plotted with values ranging from negative to positive. The below snapshot is attached for the same I am trying to achieve using zingchart.

Please help me with an example that would help me achieve the needed graph.

enter image description here

Upvotes: 4

Views: 364

Answers (1)

Stalfos
Stalfos

Reputation: 1520

Simply set the values on your scale using the values attribute. When values is set like "values":"-10:10:2", -10 is the min-value, 10 is the max-value, and 2 is the step size. After that, set up a line marker within the markers array and set the range to x=0. This will give you a vertical axis at that point. On scale-y, set line-width to 0 to hide the original vertical axis, and shift the ticks and items by setting their placement values as seen below. 

"scale-x":{
  "values":"-10:10:2",
  "markers":[
    {
      "type":"line",
      "value-range":true,
      "line-width":2,
      "range":[0],
      "line-color":"#5B828E"
    }  
  ]
},
"scale-y":{
  "line-width":0,
  "tick" : {
    "placement":"ref-auto"
  },
  "item":{
    "placement":"ref-left"
  }
},

Take a look at this demo and let me know if you have any other questions. I'm on the ZingChart team, so I'm happy to help.

Upvotes: 5

Related Questions