Home forums Using CanvasJS How to plot Scatter points based on Y2 axis

Tagged: 

This topic contains 1 reply, has 2 voices, and was last updated by  Vishwas R 1 month, 1 week ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #23379

    adjmpw
    Participant

    Hi , I have two axis Y and Y2 , and I want to add scatter points based on Y2 axis,Now its plotting based on Y axis.

      data: [{
                    lineThickness: 2,
                    type: "scatter",
                    name: "depth",
                    axisYIndex: 0,
                    dataPoints: gdepth[id],
                    markerSize: 4,
                }, {
                    markerSize: 0,
                    lineThickness: 2,
                    name: "price",
                    type: "line",
                    color: "black",
                    axisYIndex: 2,
                    dataPoints: gprice[id],
                }, {
                    fillOpacity: 0.1,
                    markerSize: 0,
                    lineThickness: 1,
                    axisYType: "secondary",
                    name: "volume",
                    type: "column",
                    color: "black",
                    dataPoints: gvolume[id],
                }
            ]

    and i add scatter dymnamically using following code

    ` gdepth[id].push({
    toolTipContent: x.price + ” -> ” + quant,
    x: xval[id],
    y: x.price,
    markerSize: size,
    color: color,
    markerBorderColor: markbcol,
    markerType: “triangle”,
    markerBorderThickness: borderthickness,
    });`

    #23389

    Vishwas R
    Keymaster

    @adjmpw,

    dataSeries are attached to either primary Y-axis (axisY) or secondary Y-axis (axisY2) by setting axisYType to “primary” or “secondary” respectively. Setting axisYType to “secondary” in scatter series should render scatter series across axisY2, irrespective of static or dynamic dataPoints. Please find the updated code below:

    data: [{
    	lineThickness: 2,
    	type: "scatter",
    	name: "depth",
    	axisYIndex: 0,
    	axisYType: "secondary",
    	dataPoints: gdepth[id],
    	markerSize: 4,
    }, {
    	markerSize: 0,
    	lineThickness: 2,
    	name: "price",
    	type: "line",
    	color: "black",
    	axisYIndex: 2,
    	dataPoints: gprice[id],
    }, {
    	fillOpacity: 0.1,
    	markerSize: 0,
    	lineThickness: 1,
    	axisYType: "secondary",
    	name: "volume",
    	type: "column",
    	color: "black",
    	dataPoints: gvolume[id],
    }]

    If you are still facing any issue, kindly create JSFiddle reproducing the issue you are facing so that we can look in to it and help you out.


    Vishwas R
    Team CanvasJS

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.