Display two graph in the same chart

[Wemba]

Hello.
I’am creating a chart using two axisY, but it’s wrongly displayed.
this is my code:
` <script type=”text/javascript”>
window.onload = function () {
var dps = [];
var chart = new CanvasJS.Chart(“chartContainer”, {
exportEnabled: true,
animationEnabled: true,
title: {
text: “Height and Weight Growth Curve for Infants (Boys)”
},
axisX: {
title: “Age ( months )”,
valueFormatString: “0”,
gridThickness: 1,
interval: 1,
intervalType: “number”,
maximum: 13,
includeZero: true

},
axisY: [{
title: “Weight (kg)”,
suffix: “kg”,
lineColor: “#84A7D1”,
lineThickness: “5”,
interval: 1,
intervalType: “number”,
includeZero: true,
viewportMinimum: 0,
viewportMaximum: 12
}],
axisY2: [{
title: “Height (cm)”,
suffix: “cm”,
lineColor: “#C24642”,
lineThickness: “5”,
interval: 5,
minimum: 10,
intervalType: “number”,
includeZero: false,
viewportMinimum: 10,
viewportMaximum: 80

}],

data: [{
type: “rangeArea”,
showInLegend: true,
name: “Weight (kg)”,

xValueFormatString: “0”,
toolTipContent: “{x} </br> Weight: </br> Min: {y[0]} Kg, Max: {y[1]} Kg”,
dataPoints: [
{ x: [0], y: [2, 3.7] },
{ x: [1], y: [3, 5.2] },
{ x: [2], y: [4, 6.9] },
{ x: [3], y: [4.8, 8] },
{ x: [4], y: [5.4, 8.7] },
{ x: [5], y: [5.9, 9.3] },
{ x: [6], y: [6.2, 9.8] },
{ x: [7], y: [6.6, 10.2] },
{ x: [8], y: [6.8, 10.4] },
{ x: [9], y: [7, 10.6] },
{ x: [10], y: [7.3, 10.8] },
{ x: [11], y: [7.5, 11.1] },
{ x: [12], y: [7.7, 11.3] },

]
},
{
type: “rangeArea”,
showInLegend: true,
axisYIndex: 1,
axisYType: “secondary”,
name: “Height (cm)”,
xValueFormatString: “0”,
toolTipContent: “{x} </br> Weight: </br> Min: {y[0]} cm, Max: {y[1]} cm”,
dataPoints: [
{ x: [0], y: [45, 52] },
{ x: [1], y: [49, 57.5] },
{ x: [2], y: [53, 63] },
{ x: [3], y: [57, 66] },
{ x: [4], y: [59, 68.5] },
{ x: [5], y: [61.4, 71] },
{ x: [6], y: [63, 72.5] },
{ x: [7], y: [64, 73.5] },
{ x: [8], y: [66, 75] },
{ x: [9], y: [67, 76.5] },
{ x: [10], y: [68, 77.5] },
{ x: [11], y: [69, 78] },
{ x: [12], y: [70, 79] },

]
},
{
type: “line”,
dataPoints: dps
}]

});
chart.render();
</script>

and this what I got.
https://ibb.co/G345Jcr
So i wanna have a space between the red and the blue chart.
I want something like this: https://ibb.co/0DFHLB6

[Vishwas R]

@wemba,

Primary y-axes are drawn to the left and secondary to the right of the chart (incase of line, column, area charts). To have both the axes towards left of the chart, you will have to define multiple primary y-axis (Please refer code-snippet below) and assign dataSeries to them by setting axisYIndex. Please refer documentation for more info.

axisY: [{
      title: "Weight(kg)",
      suffix: "kg",
      lineColor: "#84A7D1",
      lineThickness: 5,
      interval: 1,
      intervalType: "number",
      includeZero: true,
      viewportMinimum: 0,
      viewportMaximum: 12
    },{
      title: "Height (cm)",
      suffix: "cm",
      lineColor: "#C24642",
      lineThickness: 5,
      interval: 5,
      minimum: 10,
      intervalType: "number",
      includeZero: false,
      viewportMinimum: 10,
      viewportMaximum: 80
 }]

In order to help us in understanding the issue, please follow below guideline:

Have a reproducible demo of your chart.

This one step can assure you a speedy response. Fork out our template JSFiddle and reproduce the chart at your end. Try to keep it to the bare minimum by removing unnecessary code.

From what we have observed, sometimes things get delayed mostly when we are not able to reproduce the issue or not able to understand the exact requirements.

Having a JSFiddle helps us in figuring out the issue and many a times we can just edit your code on JSFiddle to fix the issue right-away.

—
Vishwas R
Team CanvasJS