Zing Chart Y-scale data out of frame

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.