Is it possible to display shapes behind series/plots?

Question

I am trying to recreate the following with ZingChart:

So far, I have everything except the gray lines between the label callout tips and the top of the bars. I tried to create the lines using shapes, but regardless of setting the z-index, the shapes always appear on top of the bars:

Is it possible to place shapes behind the plots? If not, is there another way I can achieve this design?

My JSON thusfar:

var myConfig = {
  "type":"bar",
"labels":[  
   {  
      "text":"Zone 1",
      "font-size":"13px",
      "x":"5%",
      "y":"20%",
      "height":"15%",
      "width":"20%",
      "borderWidth":1,
      "borderColor":"#ffffff",
      "callout":true,
      "calloutWidth":0,
      "calloutHeight":5,
      "calloutTip":{  
         "type":"circle",
         "background-color":"#fff",
         "border-width":2,
         "border-color":"#35353b",
         "size":7,
         "shadow":false
      }
   },
   {  
      "text":"Zone 2",
      "font-size":"13px",
      "x":"23%",
      "y":"20%",
      "height":"15%",
      "width":"20%",
      "borderWidth":1,
      "borderColor":"#ffffff",
      "callout":true,
      "calloutWidth":0,
      "calloutHeight":5,
      "calloutTip":{  
         "type":"circle",
         "background-color":"#fff",
         "border-width":2,
         "border-color":"#35353b",
         "size":7,
         "shadow":false
      }
   },
   {  
      "text":"Zone 3",
      "font-size":"13px",
      "x":"40%",
      "y":"20%",
      "height":"15%",
      "width":"20%",
      "borderWidth":1,
      "borderColor":"#ffffff",
      "callout":true,
      "calloutWidth":0,
      "calloutHeight":5,
      "calloutTip":{  
         "type":"circle",
         "background-color":"#fff",
         "border-width":2,
         "border-color":"#35353b",
         "size":7,
         "shadow":false
      }
   },
   {  
      "text":"Zone 4",
      "font-size":"13px",
      "x":"57%",
      "y":"20%",
      "height":"15%",
      "width":"20%",
      "borderWidth":1,
      "borderColor":"#ffffff",
      "callout":true,
      "calloutWidth":0,
      "calloutHeight":5,
      "calloutTip":{  
         "type":"circle",
         "background-color":"#fff",
         "border-width":2,
         "border-color":"#35353b",
         "size":7,
         "shadow":false
      }
   },
   {  
      "text":"Zone 5",
      "font-size":"13px",
      "x":"75%",
      "y":"20%",
      "height":"15%",
      "width":"20%",
      "borderWidth":1,
      "borderColor":"#ffffff",
      "callout":true,
      "calloutWidth":0,
      "calloutHeight":5,
      "calloutTip":{  
         "type":"circle",
         "background-color":"#fff",
         "border-width":2,
         "border-color":"#35353b",
         "size":7,
         "shadow":false
      }
   }
],
"shapes":[  
   {  
      "type":"line",
      "line-color":"#5297b6",
      "line-width":2,
      "points":[  
         [  
            75,
            75
         ],
         [  
            75,
            320
         ]
      ],
      "z-index":1,
      "placement":"bottom"
   }
],
"font-family":"proxima_nova_rgregular",
"title":{  
   "text":"MINUTES <b>IN ZONES</b>",
   "font-family":"proxima_nova_rgregular",
   "background-color":"none",
   "font-color":"#39393d",
   "font-size":"22px",
   "adjustLayout":true,
   "height":"175px",
   "padding-bottom":"70px"
},
"mediaRules":[  
   {  
      maxWidth:564,
      "width":"100%"
   },
   {  
      "minWidth":565,
      "width":"565px"
   }
],
"plot":{  
   "borderRadius":"5px 5px 0 0",
   "animation":{  
      "delay":300,
      "effect":11,
      "speed":"500",
      "method":"0",
      "sequence":"3",
      "z-index":2
   },
   "value-box":{  
      "placement":"top-out",
      "text":"%v",
      "decimals":0,
      "font-color":"#35353b",
      "font-size":"14px",
      "alpha":1,
      "backgroundColor":"#ffffff",
      "padding":"5px",
      "shadow":false
   }
},
"plotarea":{  
   "border-left":"3px solid #39393d",
   "padding-left":"3px",
   "margin":"0 0 0 3px",
   "background-color":"none"
},
"background-image":"http://www.fitmetrix.io/images/classListZoneChartBg.png",
"background-repeat":"no-repeat",
"background-position":"bottom left",
"scale-x":{  
   "line-color":"#39393d",
   "line-width":3,
   "tick":{  
      "visible":false
   },
   "guide":{  
      "visible":false
   },
   "item":{  
      "visible":false
   }
},
"scale-y":{  
   "visible":false,
   "guide":{  
      "visible":false
   }
},
"series":[  
   {  
      "values":[  
        40
      ],
      "bar-width":"50%",
      "background-color":"#cdcccc",
      "tooltip":{  
         "visible":false
      },
      "z-index":2
   },
   {  
      "values":[  
        15
      ],
      "bar-width":"50%",
      "background-color":"#71cbdc",
      "tooltip":{  
         "visible":false
      },
      "z-index":2
   },
   {  
      "values":[  
        34
      ],
      "bar-width":"50%",
      "background-color":"#8cc541",
      "tooltip":{  
         "visible":false
      },
      "z-index":2
   },
   {  
      "values":[  
        14
      ],
      "bar-width":"50%",
      "background-color":"#d96c27",
      "tooltip":{  
         "visible":false
      },
      "z-index":2
   },
   {  
      "values":[  
        20
      ],
      "bar-width":"50%",
      "background-color":"#ea2629",
      "tooltip":{  
         "visible":false
      },
      "z-index":2
   }
]
};

zingchart.render({ 
 id: 'myChart', 
 data: myConfig, 
 height: '100%', 
 width: '100%' 
});

html, body {
 height:100%;
 width:100%;
 margin:0;
 padding:0;
}
#myChart {
 height:100%;
 width:100%;
 min-height:150px;
}
.zc-ref {
 display:none;
}

<!DOCTYPE html>
<html>
 <head>
 <!--Assets will be injected here on compile. Use the assets button above-->
  <script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
 </head>
 <body>
  <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
 </body>
</html>

Answer 1

Final product image made by ZingChart export feature. Just right click on the chart and hit View As PNG

So the short answer is two things:

1) Attach the zone labels to scale-x and move the scale to the opposite side with placement:opposite.

2) Plot a line chart above the bars to get your grey line.

The benefits of plotting the lines is that you can apply animation to the line if you want. And if you want to take animation away, you can do that as well. The graph is generally pretty responsive and this solution hopefully fits your use case.

The lines themselves follow a simple formula plotting each line value as [barValue + 2, maxScaleYValue].

The only catch here is that I set a max scaleY value. The reason I did this is so the line stays consistent throughout resizing. If you are updating the chart dynamically this shouldn't be a problem, because you can update the max scaleY value as well. Just sort your array of bar values and choose the highest value + 30. Or some formula of your own!

The big changes I made to your code were:

• hook labels to scales
• hide scale lines and add plotarea border
• plot array of arrays [[]] line graph
• adjust your bar graph to be a single series with styles applied to it

var maxYValue = 70;
var value1 = 40;
var value2 = 15;
var value3 = 34;
var value4 = 14;
var value5 = 20;

var myConfig = {
  "type":"mixed",
  "font-family":"proxima_nova_rgregular",
  "title":{  
 "text":"MINUTES <b>IN ZONES</b>",
 "font-family":"proxima_nova_rgregular",
 "background-color":"none",
 "font-color":"#39393d",
 "font-size":"22px",
 "adjustLayout":true,
 "padding-bottom": 50
  },
  "plot":{  
 "borderRadius":"5px 5px 0 0",
 "bar-width": '50%',
 "animation":{  
    "delay":300,
    "effect":11,
    "speed":"500",
    "method":"0",
    "sequence":"3",
    "z-index":2
 },
 "value-box":{  
    "placement":"top-out",
    "text":"%v",
    "decimals":0,
    "font-color":"#35353b",
    "font-size":"14px",
    "alpha":1,
    "backgroundColor":"#ffffff",
    "padding":"5px",
    "shadow":false
 }
  },
  "plotarea":{  
 "border-left":"3px solid #39393d",
 "border-bottom": "3px solid #39393d",
 "padding-left":"3px",
 "margin":"dynamic",
 "background-color":"none"
  },
  "tooltip": {
"visible": false
  },
  "scale-x":{ 
"placement": "opposite",
 "line-width":0,
 "tick":{  
    "visible":false
 },
 "guide":{  
    "visible":false
 },
 "item":{  
    "visible":false
 },
  },
  "scale-x-2": {

  },
  "scale-y":{  
"max-value": maxYValue,
 "visible":false,
 "line-width":0,
 "guide":{  
    "visible":false
 }
  },
  "series":[  
 {  
    "type": "bar",
    "values":[  
      value1, value2, value3, value4, value5
    ],
    "background-color":"#cdcccc",
    "z-index":2,
    "styles": ['#cdcccc', '#71cbdc', '#8cc541', '#d96c27', '#ea2629']
 },
 {
   "type": "line",
   "line-color": "grey",
   "marker": { "visible": 0},
   "value-box": {visible: 0},
   "values": [
      [0, value1 + 2],
      [0, maxYValue],
      [0, null],
      [1, value2 + 2],
      [1, maxYValue],
      [1,null],
      [2, value3 + 2],
      [2, maxYValue],
      [2,null],
      [3, value4 + 2],
      [3, maxYValue],
      [3,null],
      [4, value5 + 2],
      [4, maxYValue],
      [4,null],
    ]
 }
  ],
  "labels":[  
{  
    "text":"Zone 1",
    "font-size":"13px",
    "borderWidth":1,
    "borderColor":"#ffffff",
    "callout":true,
    "calloutWidth":0,
    "calloutHeight":5,
    'hook': 'scale:name=scale-x,index=0',
    'offset-y': -45,
    "calloutTip":{  
      'offset-y': -35,
      "type":"circle",
      "background-color":"#fff",
      "border-width":2,
      "border-color":"#35353b",
      "size":7,
      "shadow":false
    }
},
{  
    "text":"Zone 2",
    "font-size":"13px",
    "borderWidth":1,
    "borderColor":"#ffffff",
    "callout":true,
    "calloutWidth":0,
    "calloutHeight":5,
    'hook': 'scale:name=scale-x,index=1',
    'offset-y': -45,
    "calloutTip":{  
      'offset-y': -35,
      "type":"circle",
      "background-color":"#fff",
      "border-width":2,
      "border-color":"#35353b",
      "size":7,
      "shadow":false
    }
},
{  
    "text":"Zone 3",
    "font-size":"13px",
    "borderWidth":1,
    "borderColor":"#ffffff",
    "callout":true,
    "calloutWidth":0,
    "calloutHeight":5,
    'hook': 'scale:name=scale-x,index=2',
    'offset-y': -45,
    "calloutTip":{  
      'offset-y': -35,
      "type":"circle",
      "background-color":"#fff",
      "border-width":2,
      "border-color":"#35353b",
      "size":7,
      "shadow":false
    }
},
{  
    "text":"Zone 4",
    "font-size":"13px",
    "borderWidth":1,
    "borderColor":"#ffffff",
    "callout":true,
    "calloutWidth":0,
    "calloutHeight":5,
    'hook': 'scale:name=scale-x,index=3',
    'offset-y': -45,
    "calloutTip":{  
      'offset-y': -35,
      "type":"circle",
      "background-color":"#fff",
      "border-width":2,
      "border-color":"#35353b",
      "size":7,
      "shadow":false
    }
},
 {  
    "text":"Zone 5",
    "font-size":"13px",
    "borderWidth":1,
    "borderColor":"#ffffff",
    "callout":true,
    "calloutWidth":0,
    "calloutHeight":5,
    'hook': 'scale:name=scale-x,index=4',
    'offset-y': -45,
    "calloutTip":{  
      'offset-y': -35,
       "type":"circle",
       "background-color":"#fff",
       "border-width":2,
       "border-color":"#35353b",
       "size":7,
       "shadow":false
    }
 }
  ],
};

zingchart.render({ 
id: 'myChart', 
data: myConfig, 
height: '100%', 
width: '100%' 
});

html, body {
 height:100%;
 width:100%;
 margin:0;
 padding:0;
}
#myChart {
 height:100%;
 width:100%;
 min-height:150px;
}
.zc-ref {
 display:none;
}

<!DOCTYPE html>
<html>
 <head>
 <!--Assets will be injected here on compile. Use the assets button above-->
  <script src= 'https://cdn.zingchart.com/zingchart.min.js'></script>

 <!--Inject End-->
 </head>
 <body>
  <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
 </body>
</html>