Zing Chart Y-scale data out of frame - zingchart

Question

I added data formatting to my zingchart Y-scale to use $ "," and 2 decimals, and now the text is out of frame. I tried changing the width of the chart to no avail. Any ideas here?
jsfiddle.net/Rodmunera/j1ddL5k6/7

Answer 1

Try adding the plotarea object to your JSON and add the margin attribute to that object. I tried it with a margin of 100px and it made everything fit in--
var chartJSON =
{
"legend":{
"border-color":"#bbbbbb",
"margin-top":10,
"margin-left":0,
"drag-handler":"header",
"item":{
"toggle":true,
"margin-top":5,
"margin-left":5,
"margin-right":5,
"margin-bottom":5
},
"shadow":false,
"margin-right":0,
"background-color-2":"#e1e1e1",
"border-width":1,
"background-color":"#e1e1e1",
"draggable":true,
"minimize":false,
"header":{
"":0,
"background-color":"#bbbbbb",
"text-align":"center",
"font-size":16,
"text":"Legend",
"font-family":"Lato",
"color":"#ffffff",
"background-color-2":"#bbbbbb",
"font-weight":300
},
"layout":"x4",
"position":"50% 0%",
"margin-bottom":0
},
"tooltip":{
"visible":true,
"decimals":2,
"thousands-separator":",",
"format":"$%v",
"text":"$%v"
},
"stacked":false,
"series":[
{
"background-color":"#7fb2f0",
"line-color":"#7fb2f0",
"text":"Checkout Total",
"marker":{
"border-color":"#7fb2f0",
"background-color":"#7fb2f0",
"alpha":1
},
"background-color-2":"#7fb2f0",
"values":[227.04,141.90,56.76,56.76,56.76,141.90,113.52,56.76,28.38,56.76,56.76,28.38,28.38,56.76,141.90,198.66,56.76,56.76,141.90,397.32,85.14,198.66,85.14,255.42,317.82,783.15,646.95,1770.60,3745.50]
},
{
"background-color":"#bf5a9a",
"line-color":"#bf5a9a",
"text":"Refunds",
"marker":{
"border-color":"#bf5a9a",
"background-color":"#bf5a9a",
"alpha":1
},
"background-color-2":"#bf5a9a",
"values":[0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,56.76,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,272.40,817.20]
},
{
"background-color":"#efae69",
"line-color":"#efae69",
"text":"Revenue",
"marker":{
"border-color":"#efae69",
"background-color":"#efae69",
"alpha":1
},
"background-color-2":"#efae69",
"values":[200.00,125.00,50.00,50.00,50.00,125.00,100.00,50.00,25.00,50.00,50.00,25.00,25.00,50.00,125.00,175.00,50.00,50.00,125.00,350.00,75.00,175.00,75.00,225.00,280.00,690.00,570.00,1560.00,3300.00]
}
],
"guide":{
"line-gap-size":0,
"visible":true,
"line-color":"#000000",
"format":"$%v",
"line-width":1,
"tooltip-visible":false,
"alpha":0,
"tooltip-text":"%v"
},
"alpha":1,
"scale-y":{
"zooming":false,
"decimals":2,
"thousands-separator":",",
"negation":"currency",
"format":"$%v",
"text":""
},
"plotarea":{
"margin":"100px"
},
"plot":{
"spline":true,
"negation":"currency",
"format":"$%v"
},
"scale-x":{
"zooming":false,
"transform":{
"guide":{
"visible":false
},
"item":{
"visible":false
},
"all":"%M %d, %Y",
"type":"date"
},
"decimals":0,
"format":"%v",
"mirrored":0,
"text":"Shows",
"values":[1398729600000,1398816000000,1398902400000,1399248000000,1399334400000,1399420800000,1399593600000,1399680000000,1400025600000,1400112000000,1400716800000,1400976000000,1401062400000,1401235200000,1401321600000,1401494400000,1401580800000,1401667200000,1401753600000,1401840000000,1401926400000,1402012800000,1402099200000,1402185600000,1402272000000,1402358400000,1402444800000,1402531200000,1402617600000]
},
"type":"area"
}
zingchart.render({
id: "myChart",
height: 300,
width: 500,
data: chartJSON
});
<script src="http://www.zingchart.com/playground/lib/zingchart/zingchart-html5-min.js"></script>
<div id="myChart"></div>
I'm on the ZingChart team so please feel free to reach out if you have any questions about this answer or other ZingChart features.