Second graph not showing using axis area y property

[bnjroos]

I have the following graph:

var c = chart("#chart", {
          height: 600,
          axis: [{
              x: {
                  type: "dateblock",
                  realtime: "minutes",
                  interval: 1, // But number for the real-time basis
                  format: "HH:mm"
              },
              y: {
                  type: "range",
                  domain: [205, 230],
                  step: 5,
                  line: "solid"
              },
        area : {            
            height : "40%"
        },
              data: voltageData
          },{
              x: {
                  type: "dateblock",
                  realtime: "minutes",
                  interval: 1, // But number for the real-time basis
                  format: "HH:mm"
              },
              y: {
                  type: "range",
                  domain: [0, 5],
                  step: 5,
                  line: "solid"
              },
            area : {
                y:"60%",
                height : "40%"
            },
              data: currentData
              
          }],
          brush: [{
              type: "line",
              target: ["voltageA", "voltageB", "voltageC"],              
              axis: 0
          },{
              type: "line",
              target: ["currentA", "currentB", "currentC"],                        
              axis: 1
          }],
          widget: [{
              type: "cross",
              yFormat: function(d) {
                    return Math.round(d);
                },
                axis:0
          },
          {
              type: "cross",
              yFormat: function(d) {
                    return Math.round(d);
                },
                axis:1
          }, {
              type: "title",
              text: "3 Phases Voltage (V)",
              align: "end"
          },{
              type: "title",
              text: "3 Phases Current (A)",
              align: "end",
              dy: 200
          },{
              type : "legend",
              brush : [ 0, 1]
        }],
          render: false
        });

Graph I cannot see the lines plotted on the second graph, however if I change from:

area:{
                y:"60%",
                height : "40%"
            },

to

area:{
                y:"0%",
                height : "40%"
            },

I see the lines of the second graph. Graph What am I doing wrong ?

Tank you,

[seogi1004]

First check out the padding option. The following example will help.

http://chartplay.jui.io/?p=mixed3_axis