Menu
I want to completely remove, not hide, the x and y-axis in my Zingcharts. I have a graph that does not need an x or y axis, and although I can hide them, they are taking up valuable space, which results in a compressed graph. Is there anyway to do this?
792
Sounds like you may be setting scales to visible: false, but there is still a lot of space around the chart where these items used to be.
You can eliminate this space by setting items to visible:false, setting associated line-color attributes to "none" and adding:
"plotarea":{
"margin":"0 0"
}
to your JSON. Below is an example with this spacing removed using the method described above. Click the "run code snippet" button to see the resulting chart.
var myConfig = {
"type": "line",
"scale-x":{
"line-color":"none",
"item":{
"visible":false
},
"tick":{
"line-color":"none"
}
},
"scale-y":{
"line-color":"none",
"item":{
"visible":false
},
"tick":{
"line-color":"none"
}
},
"plotarea":{
"margin":"0 0"
},
"series": [
{
"values":[20,40,25,50,15,45,33,34]
},
{
"values":[5,30,21,18,59,50,28,33]
},
{
"values":[30,5,18,21,33,41,29,15]
},
]
};
zingchart.render({
id : 'myChart',
data : myConfig,
height: 400,
width: 600
});<html>
<head>
<!--Assets will be injected here on compile. Use the assets button above-->
<script src= 'https://cdn.zingchart.com/2.1.2/zingchart.min.js'></script>
<script> zingchart.MODULESDIR = 'https://cdn.zingchart.com/2.1.2/modules/';</script>
<!--Inject End-->
</head>
<body>
<div id='myChart'></div>
</body>
</html>If you're setting scales to visible:false, that may create some issues. Instead, adjusting the styling so they are simply not seen can prevent conflicts with other functionality. I'm on the ZingChart team, so please let me know if this answers your question or if you would like additional clarification.
51
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
