Gallery Back to Gallery

Pareto Chart with Custom Styling

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: 'pareto',
      backgroundColor: '#E0F7FA',
      title: {
        text: 'Airport Late Arrivals by Reported Cause',
        color: '#666666',
        fontFamily: 'Merriweather'
      },
      options: { // is for the "line"
        linePlot: {
          valueBox: {
            backgroundColor: 'none',
            borderWidth: 'none',
            fontColor: '#006064',
            fontFamily: 'Merriweather',
            fontSize: '12px',
            fontWeight: 'bold',
            offsetX: '3px',
            offsetY: '-5px',
            placement: 'top',
            shadow: false
          },
          lineColor: '#006064',
          lineWidth: '2px',
          marker: {
            backgroundColor: '#006064',
            borderColor: '#006064',
            shadow: false,
            size: '3px'
          }
        },
        scaleY2: {
          guide: {
            visible: false
          }
        }
      },
      plotarea: {
        marginTop: '20%'
      },
      scaleX: {
        labels: ['Weather', 'Mechanical Problems', 'Security', 'Personnel']
      },
      scaleY: {
        values: '0:400:80',
        guide: {
          lineStyle: 'solid'
        }
      },
      series: [{
        values: [400, 300, 200, 100],
        backgroundColor: '#0097A7',
        barWidth: '90%'
      }]
    };

    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: 'pareto',
  backgroundColor: '#E0F7FA',
  title: {
    text: 'Airport Late Arrivals by Reported Cause',
    color: '#666666',
    fontFamily: 'Merriweather'
  },
  options: { // is for the "line"
    linePlot: {
      valueBox: {
        backgroundColor: 'none',
        borderWidth: 'none',
        fontColor: '#006064',
        fontFamily: 'Merriweather',
        fontSize: '12px',
        fontWeight: 'bold',
        offsetX: '3px',
        offsetY: '-5px',
        placement: 'top',
        shadow: false
      },
      lineColor: '#006064',
      lineWidth: '2px',
      marker: {
        backgroundColor: '#006064',
        borderColor: '#006064',
        shadow: false,
        size: '3px'
      }
    },
    scaleY2: {
      guide: {
        visible: false
      }
    }
  },
  plotarea: {
    marginTop: '20%'
  },
  scaleX: {
    labels: ['Weather', 'Mechanical Problems', 'Security', 'Personnel']
  },
  scaleY: {
    values: '0:400:80',
    guide: {
      lineStyle: 'solid'
    }
  },
  series: [
    {
      values: [400, 300, 200, 100],
      backgroundColor: '#0097A7',
      barWidth: '90%'
    }
  ]
};

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

.zc-ref {
  display: none;
}
Waterfall Chart with Animation 174/281 ZingChart Team Growth

Related Documentation: