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.
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.