Home forums Using CanvasJS Reverse the Y 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
  • #23378

    adjmpw
    Participant

    Please see following code , right now price is displayed in left and volume is displayed in right , I want to reverse it (price in right , volume in left) and volume must include zero ,, how do i do that ? I tried several things like changing secondary axis , changing y index , it is completely messing up the chart.please some one guide me.

      axisX: {
                gridColor: "white",
                labelFontSize: 5,
                margin: 0,
                titleFontSize: 0,
                gridThickness: 0,
                tickLength: 0,
                lineThickness: 0,
                labelFormatter: function() {
                    return " ";
                }
            },
            axisY: [{
                    lineThickness: 0,
                    tickLength: 0,
    
                    labelFontSize: 12,
                    labelFontColor: "#ccc",
                    margin: 0,
                    titleFontSize: 0,
                    title: "price",
                    gridColor: "white",
                    includeZero: false,
                }, {
                    lineThickness: 0,
                    tickLength: 0,
                    title: "ginterest",
                    labelFontSize: 12,
                    labelFontColor: "#ccc",
                    margin: 0,
                    titleFontSize: 0,
                    title: "oi",
                    gridColor: "white",
                    includeZero: false,
                }
    
            ],
            axisY2: [{
                    lineThickness: 0,
                    tickLength: 0,
                    labelFontSize: 12,
                    margin: 0,
                    titleFontSize: 0,
                    title: "Volume",
                    gridColor: "white",
                    includeZero: true,
                }
            ],
            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],
                }
            ]
    #23388

    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 “primary” and “secondary” in corresponding dataSeries should work fine in your case. Please find the updated code below:

    axisX: {
    	gridColor: "white",
    	labelFontSize: 5,
    	margin: 0,
    	titleFontSize: 0,
    	gridThickness: 0,
    	tickLength: 0,
    	lineThickness: 0,
    	labelFormatter: function() {
    		return " ";
    	}
    },
    axisY: [{
    	lineThickness: 0,
    	tickLength: 0,
    
    	labelFontSize: 12,
    	labelFontColor: "#ccc",
    	margin: 0,
    	titleFontSize: 0,
    	title: "Volume",
    	gridColor: "white",
    	includeZero: false,
    }, {
    	lineThickness: 0,
    	tickLength: 0,
    	title: "ginterest",
    	labelFontSize: 12,
    	labelFontColor: "#ccc",
    	margin: 0,
    	titleFontSize: 0,
    	title: "oi",
    	gridColor: "white",
    	includeZero: false,
    }
    
    ],
    axisY2: [{
    	lineThickness: 0,
    	tickLength: 0,
    	labelFontSize: 12,
    	margin: 0,
    	titleFontSize: 0,
    	title: "price",
    	gridColor: "white",
    	includeZero: true,
    }
    ],
    data: [{
    	lineThickness: 2,
    	type: "scatter",
    	name: "depth",
    	axisYIndex: 0,
    	axisYType: "secondary", //secondary y-axis will be shown towards left
    	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: "primary", //primary y-axis will be shown towards left
    	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.