Gallery Back to Gallery

Bar Chart Dashboard Widget

Powered by ZingChart 
<!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: 'hbar',
      backgroundColor: '#2A2B3A',
      plot: {
        tooltip: {
          borderRadius: '2px',
          borderWidth: '0px',
          visible: false,
        },
        valueBox: {
          text: '%v',
          fontColor: '#2A2B3A',
          fontSize: '14px',
          visible: true,
        },
        animation: {
          delay: 500,
          effect: 'ANIMATION_EXPAND_TOP',
          method: 'ANIMATION_BOUNCE_EASE_OUT',
          sequence: 'ANIMATION_BY_PLOT_AND_NODE',
        },
        barsSpaceRight: '20px',
        barsSpaceLeft: '20px',
        stacked: true,
      },
      plotarea: {
        marginBottom: '30px',
        marginLeft: '80px',
        marginTop: '30px',
      },
      scaleX: {
        item: {
          fontColor: '#e8e8e8',
          fontSize: '16px',
        },
        labels: ['Dev', 'R&D', 'Testing'],
        lineColor: 'transparent',
        tick: {
          visible: false,
        },
      },
      scaleY: {
        guide: {
          visible: false,
        },
        lineColor: 'transparent',
        tick: {
          visible: false,
        },
        visible: false,
      },
      series: [{
          values: [3, 2, 6],
          backgroundColor: '#E71D36',
          borderRadius: '50px 0px 0px 50px',
          rules: [{
              backgroundColor: '#E71D36',
              rule: '%i === 0',
            },
            {
              backgroundColor: '#2EC4B6',
              rule: '%i === 1',
            },
            {
              backgroundColor: '#FF9F1C',
              rule: '%i === 2',
            },
          ],
        },
        {
          values: [7, 8, 4],
          backgroundColor: '#E71D36',
          borderRadius: '0px 50px 50px 0px',
          rules: [{
              backgroundColor: '#e85d6f',
              rule: '%i === 0',
            },
            {
              backgroundColor: '#90eae2',
              rule: '%i === 1',
            },
            {
              backgroundColor: '#f7be70',
              rule: '%i === 2',
            },
          ],
        },
      ],
    };

    zingchart.render({
      id: 'myChart',
      data: chartConfig,
      width: '100%',
      height: '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: 'hbar',
  backgroundColor: '#2A2B3A',
  plot: {
    tooltip: {
      borderRadius: '2px',
      borderWidth: '0px',
      visible: false,
    },
    valueBox: {
      text: '%v',
      fontColor: '#2A2B3A',
      fontSize: '14px',
      visible: true,
    },
    animation: {
      delay: 500,
      effect: 'ANIMATION_EXPAND_TOP',
      method: 'ANIMATION_BOUNCE_EASE_OUT',
      sequence: 'ANIMATION_BY_PLOT_AND_NODE',
    },
    barsSpaceRight: '20px',
    barsSpaceLeft: '20px',
    stacked: true,
  },
  plotarea: {
    marginBottom: '30px',
    marginLeft: '80px',
    marginTop: '30px',
  },
  scaleX: {
    item: {
      fontColor: '#e8e8e8',
      fontSize: '16px',
    },
    labels: ['Dev', 'R&D', 'Testing'],
    lineColor: 'transparent',
    tick: {
      visible: false,
    },
  },
  scaleY: {
    guide: {
      visible: false,
    },
    lineColor: 'transparent',
    tick: {
      visible: false,
    },
    visible: false,
  },
  series: [
    {
      values: [3, 2, 6],
      backgroundColor: '#E71D36',
      borderRadius: '50px 0px 0px 50px',
      rules: [
        {
          backgroundColor: '#E71D36',
          rule: '%i === 0',
        },
        {
          backgroundColor: '#2EC4B6',
          rule: '%i === 1',
        },
        {
          backgroundColor: '#FF9F1C',
          rule: '%i === 2',
        },
      ],
    },
    {
      values: [7, 8, 4],
      backgroundColor: '#E71D36',
      borderRadius: '0px 50px 50px 0px',
      rules: [
        {
          backgroundColor: '#e85d6f',
          rule: '%i === 0',
        },
        {
          backgroundColor: '#90eae2',
          rule: '%i === 1',
        },
        {
          backgroundColor: '#f7be70',
          rule: '%i === 2',
        },
      ],
    },
  ],
};

zingchart.render({
  id: 'myChart',
  data: chartConfig,
  width: '100%',
  height: '100%',
});
.chart--container {
  min-height: 530px;
  width: 100%;
  height: 100%;
}

.zc-ref {
  display: none;
}
API Drilldown Pie Chart 147/281 Bubble Chart with Custom API Animation

Related Documentation: