markerzingchart

ZingChart Scale-Y Marker, Can it be drawn on top?

When adding a scale marker to a ZingChart plot, by default the marker is drawn beneath the other plotted data, which isn't always so easy to see (e.g., a line marker beneath a series of bars).

Scale-Y Marker

var chartConfig = {
  type: 'bar',
  title: { text: 'Scale-Y Marker' },
  scaleY: {
    markers: [
      {
        type: 'line',
        range: [40],
        lineColor: '#DE7DA9',
        label:{
          text: 'Marker',
          backgroundColor: 'white',
          alpha: 0.7,
          textAlpha: 1,
          offsetX: 10,
          offsetY: -1
        }
      }
    ]
  },
  series: [
    {
      values: [50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75],
      backgroundColor: '#B7D977'
    }
  ]
};

zingchart.render({ 
  id : 'chartCanvas', 
  data : chartConfig, 
  height: 400, 
  width: '750'
});

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Scale-Y Marker</title>
    <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  </head>
  <body>
    <div id='chartCanvas'></div>
  </body>
</html>

With no z-index-like attribute currently available for scale-y markers (v2.6.8), is there a way to draw Scale-Y Markers on top of the plotted data?

Solution

  • You can use the placement attribute and set it equal to 'top'.

    Scale-Y Marker On Top

    var chartConfig = {
  type: 'bar',
  title: { text: 'Scale-Y Marker On Top' },
  scaleY: {
    markers: [
      {
        type: 'line',
        range: [40],
        lineColor: '#DE7DA9',
        placement: 'top',
        label:{
          text: 'Marker',
          backgroundColor: 'white',
          alpha: 0.7,
          textAlpha: 1,
          offsetX: 10,
          offsetY: -1
        }
      }
    ]
  },
  series: [
    {
      values: [50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75],
      backgroundColor: '#B7D977'
    }
  ]
};

zingchart.render({ 
    id : 'chartCanvas', 
    data : chartConfig, 
    height: 400, 
    width: '750'
});

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Scale-Y Marker On Top</title>
    <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  </head>
  <body>
    <div id='chartCanvas'></div>
  </body>
</html>