How to add titles to the x and y axes in ZingChart

Question

I want to add titles to the x and y axes using ZingChart. For example, if my x-axis shows years (2010, 2011, 2012, etc.), I want the title "Fiscal Year" to be shown below each of the year labels

Similarly, if I am measuring revenues on the y-axis, where I may see labels like 1,000,000, 2,000,000, etc. I want to add a title to the y-axis that says "Annual Revenues".

I couldn't find anything in the documentation about this.

Answer 1

The link Martin used is correct, however there is also documentation about this in the JSON syntax guide. http://www.zingchart.com/docs/json-attributes-syntax/scale-objects/label/

var myChart = {
"graphset":[
    {
        "type":"mixed",
        "background-color":"#ffffff",
        "alpha":1,
        "title":{
            "text":"Browser Usage",
            "font-size":"20px",
            "font-weight":"bold",
            "font-color":"#000000",
            "background-color":"#ffffff",
            "margin-top":"15px",
            "margin-left":"15px",
            "margin-bottom":"10px",
            "text-align":"left"
        },
        "scale-x":{
            "line-width":"1px",
            "line-color":"#CCCCCC",
            "line-style":"solid",
            "values":["Jan","Feb","Mar","Apr","May","Jun","Jul"],
            "guide":{
                "line-width":"1px",
                "line-color":"#CCCCCC",
                "line-style":"solid"
            },
      "label":{
        "text":"Month",
        "font-size":"20px",
        "color":"red"
      },  
            "item":{
                "font-family":"helvetica",
                "font-color":"#CCCCCC",
                "font-weight":"bold",
                "font-size":"10px",
                "visible":true
            }
        },
        "scale-y":{
            "values":"0:50:10",
            "line-width":"1px",
            "line-color":"#CCCCCC",
            "line-style":"solid",
            "tick":{
                "visible":true,
                "line-color":"#CCCCCC",
                "placement":"outer",
                "size":"12px"
            },
            "item":{
                "font-color":"#CCCCCC",
                "font-weight":"bold",
                "font-size":"10px",
                "visible":true
            },
            "guide":{
                "line-width":"1px",
                "line-color":"#CCCCCC",
                "line-style":"solid"
            }
        },
        "tooltip":{
            "visible":true
        },
        "plot":{
            "alpha":1,
            "hover-state":{
                "visible":false
            }
        },
        "series":[
            {
                "type":"bar",
                "values":[47,32,37,48,28,27,32],
                "text":"Safari",
                "background-color":"#7eac10"
            }
        ]
    }
]
};

zingchart.render({
  id: "myChart",
  height: "300px",
  width: "100%",
  data: myChart
});

<script src="http://www.zingchart.com/playground/lib/zingchart/zingchart-html5-min.js"></script>
<div id="myChart"></div>

You may have been searching docs for a title. But you can accomplish what you'd like to do by adding a "label" object to your scale-x and scale-y objects and fill it with the attributes necessary to style it for matching your chart.

You can always right click on a chart on ZingChart to see the source.