Adjust the min max values of x-axis to autofit the chart
I am trying to plot a zing chart in angular2. My chart comes out to be like this.
While I want my chart to look like the one I provided below, so that the min and max values of the x-axis are auto adjusted to fit to the area and horizontal width of the chart.
How can I go about doing this? I followed these links but could not get the desired results. Could you point where am I going wrong ? https://www.zingchart.com/docs/tutorials/chart-elements/configure-chart-scales/#scale-formatting The options that I gave to plot the chart as follows:
this.charts = [{
id : 'chart-1',
data : {
'type' : 'area',
'scaleX': {
'label': {'text': 'Price'}
},
'scaleY': {
'label': {'text': 'Cumulative Volume'}
},
'plotarea': {
'adjust-layout': true /* For automatic margin adjustment. */
},
'scale-x': {
'auto-fit': true,
'min-value': minValue,
'max-value': maxValue,
'decimals': 2
},
'series': [
{ 'values': this.bidArray },
{ 'values': this.askArray }
],
},
height: 300,
width: 600
}];
}
Edit 1: bidArray and askArray are of the format array of arrays.
You do not need to set the attribute auto-fit true. This is for charts that have zooming applied.
You do not need to set the attributes min-value or max-value to get the x-axis to fit automatically. It will do this by default.
The problem might lie in the one part of the chart you didn't give any information about. How is your data plotted? What are the value arrays? Array of Arrays?
Post the full chart JSON and I'll get you a demo working. Since your chart is dynamic you can grab the rendering JSON by right clicking on the chart, clicking the View Source option, then copying the contents from the parsed JSON tab.
EDITED NEW ANSWER IN RESPONSE TO FIRST COMMENT BELOW:
Array of arrays does not automatically fit the graph width on scaleX. The reason for this is you are requesting to plot something much more specific than a single dimensional array. So you are right to set the minValue and maxValue.
The main issue is the step value. Since you have defined a step that is less precise than values in the minvalue or maxvalue you must make it match the same precision. For example you put two decimals, execpt your step is set to step:.2 which is only of precision of one decimal. Change that precision to two. step:.01 || .02 to get the desired results you are looking for.
One quick side note. You have two scale-x objects. They get merged internally, but this is dangerous because the lower one will override the first. If you have a large JSON this becomes harder to debug.
var myConfig = {
"graphset":[
{
"type":"area",
"title":{
"text":"Market Depth",
"font-size":14,
"offset-x":-200,
"offset-y":-5
},
"scaleY":{
"label":{
"text":"Cumulative Volume"
}
},
"plotarea":{
"adjust-layout":true
},
"scale-x":{
"min-value":10.091,
"max-value":11.308,
"step": .01,
"decimals":2,
"label":{
"text":"Price"
}
},
"series":[
{
"values":[[10.091,23128.285630000002],
[10.092,22272.984500000002],
[10.094,22070.219080000003],
[10.118,21630.372470000002],
[10.145,21278.48053],
[10.169,20438.89872],
[10.209,19798.506260000002],
[10.218,19128.53049],
[10.293,18200.525190000004],
[10.316,17625.84755],
[10.341,16860.282690000004],
[10.352,16752.07929],
[10.363,15806.925830000002],
[10.366,15351.489590000001],
[10.372,15088.74344],
[10.393,14793.26244],
[10.401,13968.11667],
[10.423,13873.98204],
[10.456,13655.87469],
[10.476,12866.84064],
[10.535,12518.24981],
[10.602,12503.24074],
[10.623,11940.5453],
[10.632,11939.08057],
[10.634,11838.884329999999],
[10.663,11074.893349999998],
[10.663,10963.316989999998],
[10.666,10584.14343],
[10.667,10358.20835],
[10.671,9942.126730000002],
[10.672,9265.449410000001],
[10.674,8497.838590000001],
[10.679,7865.162790000001],
[10.694,7349.383660000001],
[10.713,6672.761850000002],
[10.736,6026.31731],
[10.741,5674.348190000001],
[10.752,5186.775390000001],
[10.759,4317.745790000001],
[10.807,3807.78019],
[10.827,3638.4528899999996],
[10.831,2816.4248099999995],
[10.834,2426.4046799999996],
[10.854,2423.4017],
[10.854,2184.2459999999996],
[10.855,1448.32144],
[10.856,481.7664500000001],
[10.865,92.60541],
[10.87,59.9149],
[10.874,10.04495]],
backgroundColor: '#424242',
alphaArea:.56,
lineColor: '#424242',
marker: {
backgroundColor:'#424242',
visible:true
}
},
{
"values":[[11.308,26417.464129999997],
[11.285,26220.324189999996],
[11.208,25644.388599999995],
[11.194,25628.031659999997],
[11.188,25031.713569999996],
[11.182,24205.770269999997],
[11.144,23534.17388],
[11.142,22947.082829999996],
[11.113,22639.772689999994],
[11.105,22536.636229999993],
[11.09,21987.267979999993],
[11.087,21137.004579999997],
[11.084,20341.394259999997],
[11.075,19372.91412],
[11.074,18554.458],
[11.064,17632.22014],
[11.053,17063.184230000003],
[11.05,16285.860740000004],
[11.033,15644.169050000006],
[11.022,15330.170840000004],
[11.018,14424.291480000005],
[11.007,13641.930940000004],
[11.001,12755.045610000003],
[10.999,12266.619580000002],
[10.992,12034.113860000001],
[10.981,11362.05282],
[10.98,10739.11108],
[10.977,9945.179989999999],
[10.976,8958.965719999998],
[10.974,8579.633059999998],
[10.972,8124.936529999999],
[10.966,7918.067119999999],
[10.964,7038.952039999999],
[10.962,6756.983329999999],
[10.96,6028.072429999998],
[10.955,5516.051169999999],
[10.946,4738.703779999999],
[10.943,4436.934409999999],
[10.941,4417.186269999998],
[10.94,4120.44594],
[10.939,3830.56787],
[10.925,3414.84425],
[10.923,3335.96724],
[10.922,3025.91816],
[10.92,2119.4797900000003],
[10.908,1469.96346],
[10.903,1269.4567200000001],
[10.892,630.18796],
[10.891,273.01724],
[10.89,103.07879]],
backgroundColor: '#c62828',
alphaArea:.56,
lineColor: '#c62828',
marker: {
backgroundColor:'#c62828',
visible:true
}
}
]
}
]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%'
});html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#myChart {
height:100%;
width:100%;
min-height:150px;
}
.zc-ref {
display:none;
}<!DOCTYPE html>
<html>
<head>
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
</body>
</html>- Why does 1.0/100.0 == 0.1/10.0 give True?
- How to organize the receive msg and user current input in C network such that it's clean
- Using inclusive scan syntax in OpenMP in the C language
- Unable to understand context in book "OOP in C" by Axel Schreiner
- How to dereference member from struct in which the definition is hid from user?
- variable-length array in struct with TI compiler in C (socket programming)
- A faster way to test 32bpp DDBs for a valid Alpha channel
- How can I compile the zephyr example-application as a freestanding application?
- Why does my forked process sometimes overwrite data in a file?
- Why in C can I initialize more values than the size of an array?
- _Generic in C needs typecasting?
- Declaring/defining an unused variable changes the output from an unrelated variable
- How to use gdb to explore the stack/heap?
- How can I read an input string of unknown length?
- Confused by difference between expression inside if and expression outside if
- Fast Arc Cos algorithm?
- Discrepancy of `unsigned long` size between llvm and gcc in riscv32
- GCC (C) - error: 'x' redeclared as different kind of symbol
- Why does GCC’s static analyser falsely warn that a pointer to an allocated memory block itself stored in an allocated memory block may leak?
- c language gcc compiler *.i file #3 "" 2 what is this?
- How to make clang compile to llvm IR
- Hashtable implementation in C
- EFI variables or config file on the EFI partition for EFI application?
- Pack high bit of every byte in ARM, for 64 bytes like AVX512 vpmovb2m?
- Calling an external C function (in a shared lib) from Perl with Inline::C does not work
- Can a C program detect if its own source code has been modified?
- Is this declaration UB?
- Eclipse C/C++ how to find variable belongs to which struct quickly
- Is this truly best way to delete last element in C?
- flint/arb.h: No such file or directory