Gallery Back to Gallery

Column Chart with Repeated Images

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: 350px;
      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: '#fff',
      title: {
        text: 'TOP 5 ACTIVE TWITTER MOMENTS',
        backgroundColor: '#fff',
        fontColor: '#000',
        fontSize: '20px',
        fontWeight: 'bold',
      },
      plot: {
        tooltip: {
          text: "%kl<br><span style='color:%color'>%t: </span>%v<br>",
          backgroundColor: 'white',
          bold: true,
          borderColor: '#000',
          borderRadius: '5px',
          borderWidth: '2px',
          fontColor: '#2f2f2f',
          fontSize: '12px',
          padding: '15px',
          shadow: true,
          shadowAlpha: 0.2,
          shadowBlur: 5,
          shadowColor: '#a1a1a1',
          shadowDistance: 4,
          textAlign: 'left',
          visible: true,
        },
        barWidth: '40px',
        hoverState: {
          visible: false,
        },
        offsetX: '-1px',
      },
      plotarea: {
        margin: '10% 10%',
      },
      scaleX: {
        values: [
          "Women's<br>WC Final",
          "New Year's Eve<br>2010 in Japan",
          'Japanese<br>Tsunami',
          "Osama Bin<br>Laden's Death",
          'Super Bowl<br>2011',
        ],
        guide: {
          visible: true,
        },
        item: {
          fontColor: '#000',
        },
        lineColor: '#000',
        tick: {
          lineColor: '#000',
        },
      },
      scaleY: {
        values: '0:8000:1000',
        guide: {
          visible: true,
        },
        item: {
          fontColor: '#000',
        },
        label: {
          text: 'TWEETS PER SECOND',
          fontColor: '#000',
          fontSize: '10px',
          fontWeight: 'bold',
          item: {
            offsetY: '10px',
          },
        },
        lineColor: '#000',
        tick: {
          lineColor: '#000',
        },
      },
      labels: [{
        text: ' = 1000 tweets<br> per second',
        backgroundImage: '//www.zingchart.com/images/chartTwitter.png',
        backgroundPosition: '0 50%',
        backgroundRepeat: 'no-repeat',
        width: '170px',
        height: '10%',
        x: '70%',
        y: '14%',
      }, ],
      series: [{
        values: [7100, 6900, 5500, 5250, 4100],
        styles: [{
            backgroundColor: 'white',
            backgroundFit: 'x',
            backgroundImage: '//www.zingchart.com/images/chartTwitter.png',
            backgroundRepeat: 'repeat-y',
            backgroundScale: 1.17
          },
          {
            backgroundColor: 'white',
            backgroundImage: '//www.zingchart.com/images/chartTwitter.png',
          },
          {
            backgroundColor: 'white',
            backgroundImage: '//www.zingchart.com/images/chartTwitter.png',
          },
          {
            backgroundColor: 'white',
            backgroundImage: '//www.zingchart.com/images/chartTwitter.png',
          },
          {
            backgroundColor: 'white',
            backgroundImage: '//www.zingchart.com/images/chartTwitter.png',
          },
        ],
      }, ],
    };

    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: '#fff',
  title: {
    text: 'TOP 5 ACTIVE TWITTER MOMENTS',
    backgroundColor: '#fff',
    fontColor: '#000',
    fontSize: '20px',
    fontWeight: 'bold',
  },
  plot: {
    tooltip: {
      text: "%kl<br><span style='color:%color'>%t: </span>%v<br>",
      backgroundColor: 'white',
      bold: true,
      borderColor: '#000',
      borderRadius: '5px',
      borderWidth: '2px',
      fontColor: '#2f2f2f',
      fontSize: '12px',
      padding: '15px',
      shadow: true,
      shadowAlpha: 0.2,
      shadowBlur: 5,
      shadowColor: '#a1a1a1',
      shadowDistance: 4,
      textAlign: 'left',
      visible: true,
    },
    barWidth: '40px',
    hoverState: {
      visible: false,
    },
    offsetX: '-1px',
  },
  plotarea: {
    margin: '10% 10%',
  },
  scaleX: {
    values: [
      "Women's<br>WC Final",
      "New Year's Eve<br>2010 in Japan",
      'Japanese<br>Tsunami',
      "Osama Bin<br>Laden's Death",
      'Super Bowl<br>2011',
    ],
    guide: {
      visible: true,
    },
    item: {
      fontColor: '#000',
    },
    lineColor: '#000',
    tick: {
      lineColor: '#000',
    },
  },
  scaleY: {
    values: '0:8000:1000',
    guide: {
      visible: true,
    },
    item: {
      fontColor: '#000',
    },
    label: {
      text: 'TWEETS PER SECOND',
      fontColor: '#000',
      fontSize: '10px',
      fontWeight: 'bold',
      item: {
        offsetY: '10px',
      },
    },
    lineColor: '#000',
    tick: {
      lineColor: '#000',
    },
  },
  labels: [
    {
      text: ' = 1000 tweets<br> per second',
      backgroundImage: '//www.zingchart.com/images/chartTwitter.png',
      backgroundPosition: '0 50%',
      backgroundRepeat: 'no-repeat',
      width: '170px',
      height: '10%',
      x: '70%',
      y: '14%',
    },
  ],
  series: [
    {
      values: [7100, 6900, 5500, 5250, 4100],
      styles: [
        {
          backgroundColor: 'white',
          backgroundFit: 'x',
          backgroundImage: '//www.zingchart.com/images/chartTwitter.png',
          backgroundRepeat: 'repeat-y',
          backgroundScale: 1.17
        },
        {
          backgroundColor: 'white',
          backgroundImage: '//www.zingchart.com/images/chartTwitter.png',
        },
        {
          backgroundColor: 'white',
          backgroundImage: '//www.zingchart.com/images/chartTwitter.png',
        },
        {
          backgroundColor: 'white',
          backgroundImage: '//www.zingchart.com/images/chartTwitter.png',
        },
        {
          backgroundColor: 'white',
          backgroundImage: '//www.zingchart.com/images/chartTwitter.png',
        },
      ],
    },
  ],
};

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

.zc-ref {
  display: none;
}
Rose Radar Chart with Custom Tokens 271/281 Math Equation Line Chart

Related Documentation: