Search code examples
javascriptzingchart

ZingCharts horizontal stacked bar chart X-Axis labels being cut off


I've created a simple horizontal bar chart. The labels on the X-Axis are being cut off as shown in the snippet below. I need to show the full label of 'X Axis Row A'. I've tried changing the width of the chart but that doesn't help.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ZingChart</title>
</head>
<body>
<div id="chartDiv"></div>
<script src='http://cdn.zingchart.com/zingchart.min.js'></script>
<script>
var chartData={
    "type":"hbar",
    "stacked":true,
    "stack-type":"normal", // Also accepts "100%"
    "title":{
        "text":"X-Axis Row Label Cut Off Example"
    },
    "scale-x":{
        "values":["X Axis Row B","X Axis Row A"],
    },
    "scale-y":{
        "format":"%v%",
    },
    "series":[{
        "background-color":"rgb(248,51,45)",
        "text":"Negative",
        "values":[-11,-22]
    },{
        "background-color":"rgb(120,152,55)",
        "text":"Positive",
        "values":[35,45]
    }]
};
window.onload=function(){
    var x = zingchart.render({
        id:'chartDiv',
        height:200,
        width:600,
        data:chartData
    });
}
</script>

</body>
</html>


Solution

  • So I finally figured it out. If you use the 'plotarea' key you can then specify the margins. For example:

    "plotarea":{
        "margin":"40px 20px 50px 100px"
    }
    

    Updated example below:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>ZingChart</title>
    </head>
    <body>
    <div id="chartDiv"></div>
    <script src='http://cdn.zingchart.com/zingchart.min.js'></script>
    <script>
    var chartData={
        "type":"hbar",
        "stacked":true,
        "stack-type":"normal", // Also accepts "100%"
        "title":{
            "text":"Add Margin Example"
        },
        "plotarea": {
            "margin":"40px 20px 50px 100px"
        },
        "scale-x":{
            "values":["X Axis Row B","X Axis Row A"],
        },
        "scale-y":{
            "format":"%v%",
        },
        "series":[{
            "background-color":"rgb(248,51,45)",
            "text":"Negative",
            "values":[-11,-22]
        },{
            "background-color":"rgb(120,152,55)",
            "text":"Positive",
            "values":[35,45]
        }]
    };
    window.onload=function(){
        var x = zingchart.render({
            id:'chartDiv',
            height:200,
            width:600,
            data:chartData
        });
    }
    </script>
    
    </body>
    </html>