Gallery Back to Gallery

Multiseries Bar Chart with Scrolling

Powered by ZingChart
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script 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',
      theme: 'classic',
      backgroundColor: '#ffffff',
      title: {
        text: 'Sticky Notes Sold (by Color)',
        backgroundColor: '#ffffff',
        color: '#a6a6a6'
      },
      plot: {
        alpha: 0.6,
        animation: {
          delay: 500,
          speed: 2000,
          sequence: 'ANIMATION_BY_NODE'
        },
        borderRadiusTopRight: '5px',
        borderRadiusTopLeft: '5px',
        scrollStepMultiplier: 1
      },
      scaleX: {
        guide: {
          lineColor: '#a6a6a6',
          lineStyle: 'solid'
        },
        item: {
          color: '#a6a6a6'
        },
        labels: ['Jan 19', 'Feb 19', 'Mar 19', 'Apr 19', 'May 19', 'Jun 19', 'Jul 19', 'Aug 19', 'Sep 19', 'Oct 19', 'Nov 19', 'Dec 19'],
        lineColor: '#a6a6a6',
        lineWidth: '0px',
        tick: {
          lineColor: '#a6a6a6',
          lineWidth: '1px',
          visible: false
        },
        zooming: true,
        zoomTo: [
          0,
          3
        ]
      },
      scaleY: {
        guide: {
          lineColor: '#a6a6a6',
          lineStyle: 'solid'
        },
        item: {
          color: '#a6a6a6'
        },
        label: {
          text: 'Millions of Units',
          color: '#a6a6a6'
        },
        lineColor: '#a6a6a6',
        lineWidth: '1px',
        tick: {
          lineColor: '#a6a6a6',
          lineWidth: '1px'
        }
      },
      tooltip: {
        text: '%v Million units<br>sold in %kl',
        borderRadius: '5px',
        shadow: 0,
        textAlign: 'left'
      },
      scrollX: {
        bar: {
          alpha: 0.5,
          backgroundColor: '#a6a6a6',
          borderRadius: '5px'
        },
        handle: {
          backgroundColor: 'white',
          borderRadius: '5px',
          borderTop: '1px solid #a6a6a6',
          borderRight: '1px solid #a6a6a6',
          borderBottom: '1px solid #a6a6a6',
          borderLeft: '1px solid #a6a6a6'
        }
      },
      series: [{
          values: [42, 43, 30, 40, 32, 37, 30, 29, 35, 41, 39, 40],
          backgroundColor: '#f7846a'
        },
        {
          values: [51, 53, 47, 42, 45, 39, 36, 35, 38, 43, 41, 50],
          backgroundColor: '#ffc94e'
        },
        {
          values: [69, 68, 54, 55, 53, 47, 42, 45, 32, 37, 30, 34],
          backgroundColor: '#f1f14e'
        },
        {
          values: [25, 15, 26, 30, 25, 20, 32, 34, 29, 25, 32, 26],
          backgroundColor: '#c9ea5d'
        },
        {
          values: [52, 46, 35, 26, 41, 31, 43, 47, 38, 40, 33, 29],
          backgroundColor: '#92e4c9'
        },
        {
          values: [37, 48, 31, 34, 30, 32, 41, 37, 51, 50, 32, 52],
          backgroundColor: '#85d6e4'
        }
      ]
    };

    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',
  theme: 'classic',
  backgroundColor: '#ffffff',
  title: {
    text: 'Sticky Notes Sold (by Color)',
    backgroundColor: '#ffffff',
    color: '#a6a6a6'
  },
  plot: {
    alpha: 0.6,
    animation: {
      delay: 500,
      speed: 2000,
      sequence: 'ANIMATION_BY_NODE'
    },
    borderRadiusTopRight: '5px',
    borderRadiusTopLeft: '5px',
    scrollStepMultiplier: 1
  },
  scaleX: {
    guide: {
      lineColor: '#a6a6a6',
      lineStyle: 'solid'
    },
    item: {
      color: '#a6a6a6'
    },
    labels: ['Jan 19', 'Feb 19', 'Mar 19', 'Apr 19', 'May 19', 'Jun 19', 'Jul 19', 'Aug 19', 'Sep 19', 'Oct 19', 'Nov 19', 'Dec 19'],
    lineColor: '#a6a6a6',
    lineWidth: '0px',
    tick: {
      lineColor: '#a6a6a6',
      lineWidth: '1px',
      visible: false
    },
    zooming: true,
    zoomTo: [
      0,
      3
    ]
  },
  scaleY: {
    guide: {
      lineColor: '#a6a6a6',
      lineStyle: 'solid'
    },
    item: {
      color: '#a6a6a6'
    },
    label: {
      text: 'Millions of Units',
      color: '#a6a6a6'
    },
    lineColor: '#a6a6a6',
    lineWidth: '1px',
    tick: {
      lineColor: '#a6a6a6',
      lineWidth: '1px'
    }
  },
  tooltip: {
    text: '%v Million units<br>sold in %kl',
    borderRadius: '5px',
    shadow: 0,
    textAlign: 'left'
  },
  scrollX: {
    bar: {
      alpha: 0.5,
      backgroundColor: '#a6a6a6',
      borderRadius: '5px'
    },
    handle: {
      backgroundColor: 'white',
      borderRadius: '5px',
      borderTop: '1px solid #a6a6a6',
      borderRight: '1px solid #a6a6a6',
      borderBottom: '1px solid #a6a6a6',
      borderLeft: '1px solid #a6a6a6'
    }
  },
  series: [
    {
      values: [42, 43, 30, 40, 32, 37, 30, 29, 35, 41, 39, 40],
      backgroundColor: '#f7846a'
    },
    {
      values: [51, 53, 47, 42, 45, 39, 36, 35, 38, 43, 41, 50],
      backgroundColor: '#ffc94e'
    },
    {
      values: [69, 68, 54, 55, 53, 47, 42, 45, 32, 37, 30, 34],
      backgroundColor: '#f1f14e'
    },
    {
      values: [25, 15, 26, 30, 25, 20, 32, 34, 29, 25, 32, 26],
      backgroundColor: '#c9ea5d'
    },
    {
      values: [52, 46, 35, 26, 41, 31, 43, 47, 38, 40, 33, 29],
      backgroundColor: '#92e4c9'
    },
    {
      values: [37, 48, 31, 34, 30, 32, 41, 37, 51, 50, 32, 52],
      backgroundColor: '#85d6e4'
    }
  ]
};

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

.zc-ref {
  display: none;
}
Bar Chart with Plot Mirror 250/271 Stacked Bar Chart with Rotated Labels

Related Documentation: