Zingchart bar chart starting at y axis -50

Question

When I am trying to create a barchart for mobile, the y axis actually starts from the middle of the screen, hence i am unable to see my chart completely. For viewing the chart, i need to zoom out the device by 20%, or i need to set a plotarea y value as -50. Can someone let me know where am i going wrong?

Graph is seen when added the below code:

plotarea:{
            adjustLayout: 1,
            marginTop:'dynamic',
            backgroundFit: "y",
            "y": -50
        }

Attached image can be seen here: 1st: Without zoom, 2nd: With 20% zoom out, 3rd: with y as -50

Complete code is here:

var myConfig = {
        type: "bar",
        backgroundColor: "transparent",
        plotarea:{
            adjustLayout: 1,
            marginTop:'dynamic',
            backgroundFit: "y"
            //"y": -50
        },
        plot:{
            "rules": [
                {
                    "rule": "%i==0",
                    "background-color": "#ACD373",
                    "placement": "in"
                },
                {
                    "rule": "%i==1",
                    "background-color": "#B7B7B7",
                    "placement": "in"
                },
                {
                    "rule": "%i==2",
                    "background-color": "#FF6E5B",
                    "placement": "in"
                },
                {
                    "rule": "%i==3",
                    "background-color": "#6DCFF6",
                    "placement": "in"
                },
                {
                    "rule": "%i==4",
                    "background-color": "#F9AD81",
                    "placement": "in"
                },
                {
                    "rule": "%i==5",
                    "background-color": "#898989",
                    "placement": "in"
                }
            ],
            valueBox:{
                fontColor: "#fff",
                connector: {
                    lineWidth: 1
                },
                "text": "%v",
                "font-size": 20,
                "font-weight": "normal",
                "font-style": "normal"
            }
        },
        "scale-x": {
            "label":{
                "text":[],
                "color": "#fff"
            },
            item:{
                color: "#fff",
            },
            "guide":{
              "line-width":0
            },
            zooming: true,
            "values":[]
        },
        "scale-y":{
            "line-color":"none",
            "item":{
              "visible": false
            },
            "tick":{
              "line-color":"none"
            },
            "guide":{
              "line-color":"#4A6B89",
              "line-width":1,
              "line-style":"solid",
              "alpha":1
            }
        },
        labels:[
            {
                //text:"Hold SHIFT to detach<br>multiple slices",
                textAlign: "left",
                fontColor: "#fff"
            }
        ],
        series: [{values:[]}]
    };

The same code works perfectly for another chart with the same data set and same width height for the div which is rendering this chart. Also, i can't make the y value as -50 as i have bound the chart top open another chart on clicking any of the bars. On making y as -50, i am unable to click the bars.

Answer 1

It might be because, either you would have the font-size that makes chart extend the screen size or try changing the margin it might help, I tried it in the past but with no luck.

Answer 2

I have updated your tags to be appropriate to your environment, coldfusion. I assume you are using cfchart as well. This means not all properties persist across.

I have adjusted a few properties. They mostly have to do with margins within the plotarea object. My best suggestion is try playing around with margins if margin:'dynamic' does not apply for your build.

demo link

var myConfig = {
        type: "bar",
        backgroundColor: "#1D3557",
        plotarea:{
            adjustLayout: 1,
            margin:'dynamic',
        },
        plot:{
            "rules": [
                {
                    "rule": "%i==0",
                    "background-color": "#ACD373",
                    "placement": "in"
                },
                {
                    "rule": "%i==1",
                    "background-color": "#B7B7B7",
                    "placement": "in"
                },
                {
                    "rule": "%i==2",
                    "background-color": "#FF6E5B",
                    "placement": "in"
                },
                {
                    "rule": "%i==3",
                    "background-color": "#6DCFF6",
                    "placement": "in"
                },
                {
                    "rule": "%i==4",
                    "background-color": "#F9AD81",
                    "placement": "in"
                },
                {
                    "rule": "%i==5",
                    "background-color": "#898989",
                    "placement": "in"
                }
            ],
            valueBox:{
                fontColor: "#fff",
                connector: {
                    lineWidth: 1
                },
                "text": "%v",
                "font-size": 20,
                "font-weight": "normal",
                "font-style": "normal"
            }
        },
        "scale-x": {
            "label":{
                "text":'Version',
                "color": "#fff"
            },
            item:{
                color: "#fff",
            },
            "guide":{
              "line-width":0
            },
            zooming: true,
            "values":[]
        },
        "scale-y":{
            "line-color":"none",
            "item":{
              "visible": false
            },
            "tick":{
              "line-color":"none"
            },
            "guide":{
              "line-color":"#4A6B89",
              "line-width":1,
              "line-style":"solid",
              "alpha":1
            }
        },
        zoom: {
          preserveZoom:true,
        },
        labels:[
            {
                //text:"Hold SHIFT to detach<br>multiple slices",
                textAlign: "left",
                fontColor: "#fff"
            }
        ],
        series: [{values:[15,25,35,45,35,45]}]
    };

zingchart.render({ 
	id: 'myChart', 
	data: myConfig, 
	height: '100%', 
	width: '100%' 
});

html, body {
	height:100%;
	width:100%;
	margin:0;
	padding:0;
}
#myChart {
	height:100%;
	width:100%;
	min-height:150px;
}
.zc-ref {
	display:none;
}

<!DOCTYPE html>
<html>
	<head>
		<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
	</head>
	<body>
		<div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
	</body>
</html>