CODEWITHSUNDEEP
javascriptzingchart
phpnet
phpnet

Reputation: 923

ZingChart how to get all the lables

I want to get all the scale x labels and scale y labels and also the main x label and y label in zingchart . How to do it ?

enter image description here

Upvotes: 4

Views: 300

Answers (1)

mike-schultz
mike-schultz

Reputation: 2364

The "Main label X" and "Main label Y" are referred to as scaleX.label and scaleY.label in zingchart. You will need to specify a text parameter for that object like so :

scaleY :{
  label : {
    text : "Main label y"
  } 
}

By default, each tick mark in ZingChart is predetermined based upon values. To change this, there are two ways to accomplish this :

  1. Using the scale labels property which takes an array of string values. This will overwrite the text value at each corresponding index. Note that this will not modify the placement of each node value on the chart; it is simply a visual change.

  2. Using the scale values property which takes an array of numeric values. This will modify the actual values of how the scales are placed. i.e. scaleX.values : [4,5,6,7] will set the starting scale at a numeric value of 4 and end at 7.

Example showing the properties noted above : 

var myConfig = {
  type: "bar", 
  plotarea : {
    margin : "dynamic"
  },
  series : [
    {
      values : [35,42,67,89,25,34,67,85]
    }
  ],
  scaleY : {
    label : {
      text : "Scale Y"
    },
    values : [30,40,50]
  },
  scaleX : {
    label : {
      text : "Scale X"
    },
    labels : ["first", "second", "third"]
  }
};

zingchart.render({ 
  id : 'myChart', 
  data : myConfig, 
  height: 400, 
  width: 600 
});
<!DOCTYPE html>
<html>
  <head>
    <script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
  </head>
  <body>
    <div id='myChart'></div>
  </body>
</html>

Upvotes: 2

Related Questions