Stacked Bar with Hooked Labels

Please enable JavaScript to see the interactive demo.

https://app.zingsoft.com/demos/embed/13DQ6N3G

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    .chart--container {
      min-height: 530px;
      width: 100%;
      height: 100%;
    }

    .zc-ref {
      display: none;
    }
  </style>
</head>

<body>
  <div id="myChart" class="chart--container">
    <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
  </div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    let chartConfig = {
      type: 'bar',
      backgroundColor: '#FFFFFF',
      stacked: true,
      stackType: 'normal',
      title: {
        text: 'Mobile OS Share WorldWide - ',
        align: 'left',
        backgroundColor: 'none',
        bold: false,
        fontColor: '#000000',
        fontFamily: 'arial',
        fontSize: '16px',
        x: '40px',
        y: '5px',
      },
      subtitle: {
        text: '<i>July 2018 to July 2019</i>',
        align: 'left',
        backgroundColor: 'none',
        bold: false,
        fontColor: '#7E7E7E',
        fontFamily: 'arial',
        fontSize: '16px',
        x: '260px',
        y: '5px',
      },
      plot: {
        tooltip: {
          visible: false,
        },
        animation: {
          delay: 300,
          sequence: 'ANIMATION_BY_PLOT',
        },
        barWidth: '25px',
        hoverState: {
          visible: false,
        },
      },
      scaleX: {
        values: [
          'JUL',
          'AUG',
          'SEP',
          'OCT',
          'NOV',
          'DEC',
          'JAN',
          'FEB',
          'MAR',
          'APR',
          'MAY',
          'JUN',
          'JUL',
        ],
        guide: {
          visible: false,
        },
        item: {
          fontColor: '#8B8B8B',
          fontFamily: 'arial',
        },
        lineColor: '#7E7E7E',
        tick: {
          visible: false,
        },
      },
      scaleY: {
        values: '0:100:10',
        guide: {
          lineStyle: 'solid',
        },
        item: {
          fontColor: '#8B8B8B',
          fontFamily: 'arial',
        },
        lineColor: '#7E7E7E',
        short: true,
        tick: {
          visible: false,
        },
      },
      labels: [{
          text: '74.61% Android',
          backgroundColor: '#90A23B',
          borderColor: 'white',
          borderRadius: '3px',
          borderWidth: '3px',
          callout: true,
          calloutHeight: '10px',
          calloutWidth: '15px',
          fontColor: '#FFFFFF',
          fontFamily: 'arial',
          fontSize: '14px',
          fontWeight: 'normal',
          hook: 'node:plot=2;index=4',
          offsetY: '-20px',
          padding: '10%',
          shadow: false,
        },
        {
          text: '24.44% iOS',
          backgroundColor: '#787878',
          borderColor: 'white',
          borderRadius: '3px',
          borderWidth: '3px',
          callout: true,
          calloutHeight: '10px',
          calloutWidth: '15px',
          fontColor: '#FFFFFF',
          fontFamily: 'arial',
          fontSize: '14px',
          fontWeight: 'normal',
          hook: 'node:plot=0;index=5',
          offsetY: '-30px',
          padding: '10%',
          shadow: false,
        },
        {
          text: '0.28% Windows',
          backgroundColor: '#FFC700',
          borderColor: 'white',
          borderRadius: '3px',
          borderWidth: '3px',
          callout: true,
          calloutHeight: '10px',
          calloutWidth: '15px',
          fontColor: '#FFFFFF',
          fontFamily: 'arial',
          fontSize: '14px',
          fontWeight: 'normal',
          hook: 'node:plot=1,index=9',
          offsetY: '-30px',
          padding: '10%',
          shadow: false,
          thousandsSeparator: ',',
        },
      ],
      series: [{
          values: [
            19.4, 20.45, 20.66, 22.34, 24.44, 21.98, 22.85, 23.28, 22.4, 22.76,
            22.66, 22.04, 22.01,
          ],
          backgroundColor: '#787878',
        },
        {
          values: [
            0.43, 0.4, 0.37, 0.36, 0.39, 0.33, 0.3, 0.29, 0.28, 0.26, 0.24, 0.21,
            0.2,
          ],
          backgroundColor: '#FFC700',
        },
        {
          values: [
            77.32, 76.82, 76.81, 74.61, 72.35, 75.16, 74.45, 74.15, 75.33, 75.22,
            75.34, 76.03, 76.08,
          ],
          backgroundColor: '#90A23B',
        },
      ],
    };

    zingchart.render({
      id: 'myChart',
      data: chartConfig,
      height: '100%',
      width: '100%',
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html>
	<head>
    <meta charset="utf-8">
    <title>ZingSoft Demo</title>
		<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
	</head>
	<body>
		<div id="myChart" class="chart--container">
			<a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
		</div>
	</body>
</html>

let chartConfig = {
  type: 'bar',
  backgroundColor: '#FFFFFF',
  stacked: true,
  stackType: 'normal',
  title: {
    text: 'Mobile OS Share WorldWide - ',
    align: 'left',
    backgroundColor: 'none',
    bold: false,
    fontColor: '#000000',
    fontFamily: 'arial',
    fontSize: '16px',
    x: '40px',
    y: '5px',
  },
  subtitle: {
    text: '<i>July 2018 to July 2019</i>',
    align: 'left',
    backgroundColor: 'none',
    bold: false,
    fontColor: '#7E7E7E',
    fontFamily: 'arial',
    fontSize: '16px',
    x: '260px',
    y: '5px',
  },
  plot: {
    tooltip: {
      visible: false,
    },
    animation: {
      delay: 300,
      sequence: 'ANIMATION_BY_PLOT',
    },
    barWidth: '25px',
    hoverState: {
      visible: false,
    },
  },
  scaleX: {
    values: [
      'JUL',
      'AUG',
      'SEP',
      'OCT',
      'NOV',
      'DEC',
      'JAN',
      'FEB',
      'MAR',
      'APR',
      'MAY',
      'JUN',
      'JUL',
    ],
    guide: {
      visible: false,
    },
    item: {
      fontColor: '#8B8B8B',
      fontFamily: 'arial',
    },
    lineColor: '#7E7E7E',
    tick: {
      visible: false,
    },
  },
  scaleY: {
    values: '0:100:10',
    guide: {
      lineStyle: 'solid',
    },
    item: {
      fontColor: '#8B8B8B',
      fontFamily: 'arial',
    },
    lineColor: '#7E7E7E',
    short: true,
    tick: {
      visible: false,
    },
  },
  labels: [
    {
      text: '74.61% Android',
      backgroundColor: '#90A23B',
      borderColor: 'white',
      borderRadius: '3px',
      borderWidth: '3px',
      callout: true,
      calloutHeight: '10px',
      calloutWidth: '15px',
      fontColor: '#FFFFFF',
      fontFamily: 'arial',
      fontSize: '14px',
      fontWeight: 'normal',
      hook: 'node:plot=2;index=4',
      offsetY: '-20px',
      padding: '10%',
      shadow: false,
    },
    {
      text: '24.44% iOS',
      backgroundColor: '#787878',
      borderColor: 'white',
      borderRadius: '3px',
      borderWidth: '3px',
      callout: true,
      calloutHeight: '10px',
      calloutWidth: '15px',
      fontColor: '#FFFFFF',
      fontFamily: 'arial',
      fontSize: '14px',
      fontWeight: 'normal',
      hook: 'node:plot=0;index=5',
      offsetY: '-30px',
      padding: '10%',
      shadow: false,
    },
    {
      text: '0.28% Windows',
      backgroundColor: '#FFC700',
      borderColor: 'white',
      borderRadius: '3px',
      borderWidth: '3px',
      callout: true,
      calloutHeight: '10px',
      calloutWidth: '15px',
      fontColor: '#FFFFFF',
      fontFamily: 'arial',
      fontSize: '14px',
      fontWeight: 'normal',
      hook: 'node:plot=1,index=9',
      offsetY: '-30px',
      padding: '10%',
      shadow: false,
      thousandsSeparator: ',',
    },
  ],
  series: [
    {
      values: [
        19.4, 20.45, 20.66, 22.34, 24.44, 21.98, 22.85, 23.28, 22.4, 22.76,
        22.66, 22.04, 22.01,
      ],
      backgroundColor: '#787878',
    },
    {
      values: [
        0.43, 0.4, 0.37, 0.36, 0.39, 0.33, 0.3, 0.29, 0.28, 0.26, 0.24, 0.21,
        0.2,
      ],
      backgroundColor: '#FFC700',
    },
    {
      values: [
        77.32, 76.82, 76.81, 74.61, 72.35, 75.16, 74.45, 74.15, 75.33, 75.22,
        75.34, 76.03, 76.08,
      ],
      backgroundColor: '#90A23B',
    },
  ],
};

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

.chart--container {
  min-height: 530px;
  width: 100%;
  height: 100%;
}

.zc-ref {
  display: none;
}

Bar Titles with Score Cards 258/281 Bar Chart with Plot Mirror

Stacked Bar with Hooked Labels

Related Documentation: