Akhilesh Kumar
Reputation: 9355
ZingChart bar space does not work
I'm rendering a zingchart with following data:
{
"graphset":[
{
"type":"bar",
"plotarea":{
"adjust-layout":true,
"mask-tolerance":[0,0]
},
"background-color":"#fff",
"plot":{
"alpha":0.9,
"border-width":1,
"stacked":true,
"border-color":"black",
"cursor":"pointer",
"border-radius-top-left":4,
"border-radius-top-right":4,
"bar-width":"20px",
"line-width":2,
"bar-space":"50px",
"background-fit":"x",
"animation":{
"effect":"ANIMATION_SLIDE_BOTTOM"
},
"hover-state":{
"alpha":1,
"visible":true
}
},
"scale-x":{
"zooming":true,
"label":{
"text":"Location",
"font-color":"#000",
"font-size":"16px",
"text-align":"center",
"background-color":"#fff",
"width":"100%",
"position":"absolute",
"bottom":"0"
},
"values":[" HYDERABAD"," GURGAON"," JAIPUR"],
"line-color":"#CCC",
"tick":{
"line-color":"#a6a6a6",
"line-width":1,
"visible":0
},
"guide":{
"line-color":"#666",
"line-style":"solid"
},
"item":{
"font-family":"arial",
"font-color":"#000",
"width":"190px",
"text-align":"center",
"background-color":"rgb(255,255,255)",
"padding-top":"4px"
}
},
"scale-y":{
"zooming":true,
"label":{
"text":"Attrition Rate",
"font-color":"#2B776C",
"font-size":"16px"
},
"line-color":"#CCC",
"tick":{
"visible":false
},
"guide":{
"line-style":"dashed",
"line-color":"#ccc"
},
"item":{
"font-family":"arial",
"font-color":"#8B8B8B"
},
"zoom-to":[32.5,34.5]
},
"series":[
{
"values":[33.59,33.36,32.93],
"stack":1,
"background-color":"#ff3b3b",
"line-color":"#ff3b3b",
"marker":{
"background-color":"#ff3b3b",
"size":3
},
"value-box":{
"font-color":"#ff3b3b",
"visible":true
},
"tooltip":{
"background-color":"#ff3b3b",
"border-color":"#fff",
"border-width":1,
"border-radius":3,
"wrap-text":true,
"alpha":0.8,
"text":"%node-value % chances in 30 Days for location %kl"
},
"palette":0
},
{
"values":[33.5,33.08,32.93],
"stack":2,
"background-color":"#ff9b67",
"line-color":"#ff9b67",
"marker":{
"background-color":"#ff9b67",
"size":4
},
"value-box":{
"font-color":"#ff9b67",
"visible":true
},
"tooltip":{
"background-color":"#ff9b67",
"border-color":"#fff",
"border-width":1,
"border-radius":3,
"wrap-text":true,
"alpha":0.8,
"text":"%node-value % chances in 30 Days for location %kl"
},
"palette":1
},
{
"values":[32.91,33.55,34.15],
"stack":3,
"background-color":"#6cebb3",
"line-color":"#6cebb3",
"marker":{
"background-color":"#6cebb3",
"size":5
},
"value-box":{
"font-color":"#6cebb3",
"visible":true
},
"tooltip":{
"background-color":"#6cebb3",
"border-color":"#fff",
"border-width":1,
"border-radius":3,
"wrap-text":true,
"alpha":0.8,
"text":"%node-value % chances in 30 Days for location %kl"
},
"palette":2
},
{
"values":[32.78,33.33,33.78],
"stack":4,
"background-color":"#ff3b3b",
"line-color":"#ff3b3b",
"marker":{
"background-color":"#ff3b3b",
"size":3
},
"value-box":{
"font-color":"#ff3b3b",
"visible":true
},
"tooltip":{
"background-color":"#ff3b3b",
"border-color":"#fff",
"border-width":1,
"border-radius":3,
"wrap-text":true,
"alpha":0.8,
"text":"%node-value % chances in 60 Days for location %kl"
},
"palette":3
},
{
"values":[34.04,33.63,32.93],
"stack":5,
"background-color":"#ff9b67",
"line-color":"#ff9b67",
"marker":{
"background-color":"#ff9b67",
"size":4
},
"value-box":{
"font-color":"#ff9b67",
"visible":true
},
"tooltip":{
"background-color":"#ff9b67",
"border-color":"#fff",
"border-width":1,
"border-radius":3,
"wrap-text":true,
"alpha":0.8,
"text":"%node-value % chances in 60 Days for location %kl"
},
"palette":4
},
{
"values":[33.19,33.04,33.29],
"stack":6,
"background-color":"#6cebb3",
"line-color":"#6cebb3",
"marker":{
"background-color":"#6cebb3",
"size":5
},
"value-box":{
"font-color":"#6cebb3",
"visible":true
},
"tooltip":{
"background-color":"#6cebb3",
"border-color":"#fff",
"border-width":1,
"border-radius":3,
"wrap-text":true,
"alpha":0.8,
"text":"%node-value % chances in 60 Days for location %kl"
},
"palette":5
},
{
"values":[33.76,32.58,33.51],
"stack":7,
"background-color":"#ff3b3b",
"line-color":"#ff3b3b",
"marker":{
"background-color":"#ff3b3b",
"size":3
},
"value-box":{
"font-color":"#ff3b3b",
"visible":true
},
"tooltip":{
"background-color":"#ff3b3b",
"border-color":"#fff",
"border-width":1,
"border-radius":3,
"wrap-text":true,
"alpha":0.8,
"text":"%node-value % chances in 90 Days for location %kl"
},
"palette":6
},
{
"values":[32.76,33.98,33.78],
"stack":8,
"background-color":"#ff9b67",
"line-color":"#ff9b67",
"marker":{
"background-color":"#ff9b67",
"size":4
},
"value-box":{
"font-color":"#ff9b67",
"visible":true
},
"tooltip":{
"background-color":"#ff9b67",
"border-color":"#fff",
"border-width":1,
"border-radius":3,
"wrap-text":true,
"alpha":0.8,
"text":"%node-value % chances in 90 Days for location %kl"
},
"palette":7
},
{
"values":[33.49,33.43,32.71],
"stack":9,
"background-color":"#6cebb3",
"line-color":"#6cebb3",
"marker":{
"background-color":"#6cebb3",
"size":5
},
"value-box":{
"font-color":"#6cebb3",
"visible":true
},
"tooltip":{
"background-color":"#6cebb3",
"border-color":"#fff",
"border-width":1,
"border-radius":3,
"wrap-text":true,
"alpha":0.8,
"text":"%node-value % chances in 90 Days for location %kl"
},
"palette":8
}
]
}
]
}
I had given bar-space 50px still it's bar are close to each other as follows
I wonder, How to give margins within bars?
Upvotes: 2
Views: 638
Answers (1)
nardecky
Reputation: 2631
I’m currently a member of the ZingChart team and have reviewed your request. After some light digging and testing you are correct, ‘bar-space’ does not adjust margins in between the bars. It seems to be the case that ‘bar-width’ and ‘bar-space’ can’t co-exist with one another in our library right now. There is a lot of calculation that goes into keeping the bars dynamic size while allowing users to simultaneously adjust both attributes isn't easy. I would like to ask what look you are trying to achieve with these settings? I have cleaned up some redundancies in your JSON making it much smaller. This demo graph has omitted the ‘bar-width’ & ‘bar-space’ attributes. With the default behavior your chart would look like this: http://demos.zingchart.com/view/O3M6RCTF
I have the attached JSON here:
{
"graphset":[
{
"type":"bar",
"plotarea":{
"adjust-layout":true,
"mask-tolerance":[0,0]
},
"background-color":"#fff",
"plot":{
"alpha":0.9,
"border-width":1,
"border-color":"black",
"cursor":"pointer",
"border-radius-top-left":4,
"border-radius-top-right":4,
"animation":{
"effect":"ANIMATION_SLIDE_BOTTOM"
},
"hover-state":{
"alpha":1,
"visible":true
},
valueBox:{},
tooltip:{
"border-color":"#fff",
"border-width":1,
"border-radius":3,
"wrap-text":true,
"alpha":0.8,
"text":"%node-value % chances in %data-timespan Days for location %kl"
}
},
"scale-x":{
"zooming":true,
"label":{
"text":"Location",
"font-color":"#000",
"font-size":"16px",
"text-align":"center",
"background-color":"#fff",
paddingTop:20
},
"values":[" HYDERABAD"," GURGAON"," JAIPUR"],
"line-color":"#CCC",
"tick":{
"visible":false
},
"guide":{
"line-color":"#666",
"line-style":"solid"
},
"item":{
"font-family":"arial",
"font-color":"#000",
"background-color":"rgb(255,255,255)",
"padding-top":"4px"
}
},
"scale-y":{
"zooming":true,
"label":{
"text":"Attrition Rate",
"font-color":"#2B776C",
"font-size":"16px"
},
"line-color":"#CCC",
"tick":{
"visible":false
},
"guide":{
"line-style":"dashed",
"line-color":"#ccc"
},
"item":{
"font-family":"arial",
"font-color":"#8B8B8B"
},
"zoom-to":[32.5,34.5]
},
"series":[
{
"values":[33.59,33.36,32.93],
"background-color":"#ff3b3b",
"line-color":"#ff3b3b",
'data-timespan':30
},
{
"values":[33.5,33.08,32.93],
"background-color":"#ff9b67",
"line-color":"#ff9b67",
'data-timespan':30
},
{
"values":[32.91,33.55,34.15],
"background-color":"#6cebb3",
"line-color":"#6cebb3",
'data-timespan':30
},
{
"values":[32.78,33.33,33.78],
"background-color":"#ff3b3b",
"line-color":"#ff3b3b",
'data-timespan':60
},
{
"values":[34.04,33.63,32.93],
"background-color":"#ff9b67",
"line-color":"#ff9b67",
'data-timespan':60
},
{
"values":[33.19,33.04,33.29],
"background-color":"#6cebb3",
"line-color":"#6cebb3",
'data-timespan':60
},
{
"values":[33.76,32.58,33.51],
"background-color":"#ff3b3b",
"line-color":"#ff3b3b",
'data-timespan':90
},
{
"values":[32.76,33.98,33.78],
"background-color":"#ff9b67",
"line-color":"#ff9b67",
'data-timespan':90
},
{
"values":[33.49,33.43,32.71],
"background-color":"#6cebb3",
"line-color":"#6cebb3",
'data-timespan':90
}
]
}
] } ` We are going to pursue this minor bug, but we are very busy with a new build coming out soon. I do not think this will make that build. In the meantime if you have an email address you prefer to be contacted out we would love to stay in touch and keep you updated. We do not want to spam this question with progress updates, just a solution.
Upvotes: 3
Related Questions
- How does the 'Access-Control-Allow-Origin' header work?
- Open a URL in a new tab (and not a new window)
- Why does my JavaScript code receive a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error, while Postman does not?
- What does the !! (double exclamation mark) operator do in JavaScript?
- Why does Google prepend while(1); to their JSON responses?
- What does "use strict" do in JavaScript, and what is the reasoning behind it?
- How does JavaScript .prototype work?
- How do JavaScript closures work?
- How does the "this" keyword work, and when should it be used?
- How does data binding work in AngularJS?