Search code examples
javascriptjquerychartsdata-visualizationzingchart

Scale-Y ticks of ZingChart plotted wrong for scatter chart


Zing chart's scatter plot is not setting the y-axis properly. The following code is used to render the scatter plot.

   zingchart.render({
            id:'itemMapChart',
            data:{
                type: 'scatter',
                series: srsdata,
                "background-color": "none",
                scaleX:{
                    guide: {
                        "line-color": "none"
                    },
                },
                scaleY:{
                    guide: {
                        "line-color": "none"
                    },
                },
                plotarea:{
                    margin: "dynamic",
                    padding : "48px",
                },
                plot : {
                  marker : {
                    size : 15
                  }
                },
            },
            height:800,
            width: "100%" 
        });

The srsdata is an array of the below structure :

var srstemp = {
  values: [
   [val.dishqty, val.dishprice]
  ],
  "text": val.dishname
};

The x value would be an integer and the y value a float. I tried making the y value to int, then the scale was working properly. But when it is kept as a float the graph looks like this : https://postimg.org/image/ge4nfej3n/

Could some one tell me what is the issue with this?


Solution

  • It sounds like your values are strings, rather than type Number. I would parseFloat your values so the decimal values are kept.