Economic Growth Bar Chart

Please enable JavaScript to see the interactive demo.

https://app.zingsoft.com/demos/embed/FG9G38Y4

<!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>
    @import 'https://fonts.googleapis.com/css?family=Montserrat';
    @import 'https://fonts.googleapis.com/css?family=Lato:400';

    .zc-body {
      background-color: #FBFCFE;
    }

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

    .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: '#FBFCFE',
      title: {
        text: 'ECONOMIC GROWTH IN GREECE FROM 1996 TO 2006',
        align: 'left',
        fontColor: '#1E5D9E',
        fontFamily: 'Lato',
        fontSize: '16px',
        padding: '15px',
      },
      subtitle: {
        text: 'Case Study',
        align: 'left',
        fontColor: '#777',
        fontFamily: 'Lato',
        fontSize: '12px',
        padding: '15px',
      },
      legend: {
        align: 'right',
        borderWidth: '0px',
        item: {
          fontColor: '#777',
        },
        layout: 'x2',
        marker: {
          borderRadius: '50px',
        },
      },
      plot: {
        tooltip: {
          visible: false,
        },
        backgroundColor: '#FBFCFE',
        barSpace: '2px',
        marker: {
          size: 3.5,
        },
      },
      plotarea: {
        margin: '90 50 50 50',
      },
      scaleX: {
        values: [
          828086400000, 835945200000, 844066800000, 852019200000, 859795200000,
          867654000000, 875602800000, 883555200000, 891331200000, 899190000000,
          907138800000, 915091200000, 922867200000, 930726000000, 938674800000,
          946627200000, 954489600000, 962348400000, 970210800000, 978076800000,
          985939200000, 993798000000, 1001660400000, 1009785600000, 1017388800000,
          1025247600000, 1033369200000, 1041321600000, 1049097600000, 1056956400000,
          1064905200000, 1072857600000, 1080720000000, 1088578800000, 1096527600000,
          1104480000000, 1112256000000, 1120114800000, 1128063600000, 1135929600000,
          1143792000000, 1151650800000, 1159513200000, 1167379200000,
        ],
        guide: {
          lineColor: '#D7D8D9',
          lineGapSize: '4px',
          lineStyle: 'dotted',
          rules: [{
            rule: '%i == 0',
            visible: false,
          }, ],
          visible: true,
        },
        item: {
          padding: '5px',
          fontColor: '#1E5D9E',
          fontFamily: 'Montserrat',
        },
        lineWidth: '0px',
        margin: '20px',
        offsetY: '-20px',
        padding: '20px',
        tick: {
          lineColor: '#D1D3D4',
        },
        transform: {
          type: 'date',
          all: '%m/%d/%y',
        },
      },
      scaleY: {
        guide: {
          lineColor: '#D7D8D9',
          lineGapSize: '4px',
          lineStyle: 'dotted',
          rules: [{
            rule: '%i == 0',
            visible: false,
          }, ],
          visible: true,
        },
        item: {
          padding: '0 10 0 0',
          fontColor: '#1E5D9E',
          fontFamily: 'Montserrat',
        },
        lineWidth: '0px',
        maxValue: 8,
        tick: {
          lineColor: '#D1D3D4',
        },
      },
      crosshairX: {
        lineColor: '#b6b6b6',
        lineStyle: 'dashed',
        marker: {
          size: '4px',
          visible: true,
        },
        plotLabel: {
          backgroundColor: 'white',
          bold: true,
          borderColor: '#e3e3e3',
          borderRadius: '5px',
          fontColor: '#2f2f2f',
          fontFamily: 'Lato',
          fontSize: '12px',
          padding: '15px',
          shadow: true,
          shadowAlpha: 0.2,
          shadowBlur: 5,
          shadowColor: '#a1a1a1',
          shadowDistance: 4,
          textAlign: 'right',
        },
        scaleLabel: {
          backgroundColor: '#FBFCFE',
          bold: true,
          callout: false,
          fontColor: '#1E5D9E',
          fontSize: '16px',
          paddingTop: '2px',
        },
        trigger: 'move',
      },
      source: {
        text: 'theatlas.com',
        fontColor: '#777',
        fontFamily: 'Lato',
      },
      series: [{
          text: 'Euro Zone',
          values: [
            1.28, 1.41, 1.65, 1.59, 1.99, 2.48, 2.58, 3.3, 3.55, 2.71, 2.62, 1.91,
            2.12, 2.4, 2.9, 3.78, 4.27, 4.44, 3.81, 3.3, 2.91, 2.1, 1.74, 1.24,
            0.47, 0.97, 1.16, 1.04, 0.83, 0.35, 0.51, 1.19, 1.77, 2.24, 2.16, 1.76,
            1.47, 1.62, 1.89, 2.22, 2.92, 3.37, 3.36, 3.8,
          ],
          backgroundColor: '#E80C60',
        },
        {
          text: 'Greece',
          values: [
            2.23, 3.29, 3.2, 0.74, 4, 3.84, 2.92, 3.84, 0.56, 3.39, 4.92, 4.4, 4.16,
            3.1, 4.54, 1.9, 5.38, 5.02, 2.97, 4.69, 3.26, 2.45, 4.75, 6.23, 2.74,
            4.38, 3.87, 2.74, 6.47, 5.89, 5.36, 6.12, 3.64, 4.72, 4.59, 4.47, 1.64,
            1.34, 2.73, 3.31, 4.73, 7.87, 4.03, 5.48,
          ],
          backgroundColor: '#00BAF2',
        },
      ],
    };

    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: '#FBFCFE',
  title: {
    text: 'ECONOMIC GROWTH IN GREECE FROM 1996 TO 2006',
    align: 'left',
    fontColor: '#1E5D9E',
    fontFamily: 'Lato',
    fontSize: '16px',
    padding: '15px',
  },
  subtitle: {
    text: 'Case Study',
    align: 'left',
    fontColor: '#777',
    fontFamily: 'Lato',
    fontSize: '12px',
    padding: '15px',
  },
  legend: {
    align: 'right',
    borderWidth: '0px',
    item: {
      fontColor: '#777',
    },
    layout: 'x2',
    marker: {
      borderRadius: '50px',
    },
  },
  plot: {
    tooltip: {
      visible: false,
    },
    backgroundColor: '#FBFCFE',
    barSpace: '2px',
    marker: {
      size: 3.5,
    },
  },
  plotarea: {
    margin: '90 50 50 50',
  },
  scaleX: {
    values: [
      828086400000, 835945200000, 844066800000, 852019200000, 859795200000,
      867654000000, 875602800000, 883555200000, 891331200000, 899190000000,
      907138800000, 915091200000, 922867200000, 930726000000, 938674800000,
      946627200000, 954489600000, 962348400000, 970210800000, 978076800000,
      985939200000, 993798000000, 1001660400000, 1009785600000, 1017388800000,
      1025247600000, 1033369200000, 1041321600000, 1049097600000, 1056956400000,
      1064905200000, 1072857600000, 1080720000000, 1088578800000, 1096527600000,
      1104480000000, 1112256000000, 1120114800000, 1128063600000, 1135929600000,
      1143792000000, 1151650800000, 1159513200000, 1167379200000,
    ],
    guide: {
      lineColor: '#D7D8D9',
      lineGapSize: '4px',
      lineStyle: 'dotted',
      rules: [
        {
          rule: '%i == 0',
          visible: false,
        },
      ],
      visible: true,
    },
    item: {
      padding: '5px',
      fontColor: '#1E5D9E',
      fontFamily: 'Montserrat',
    },
    lineWidth: '0px',
    margin: '20px',
    offsetY: '-20px',
    padding: '20px',
    tick: {
      lineColor: '#D1D3D4',
    },
    transform: {
      type: 'date',
      all: '%m/%d/%y',
    },
  },
  scaleY: {
    guide: {
      lineColor: '#D7D8D9',
      lineGapSize: '4px',
      lineStyle: 'dotted',
      rules: [
        {
          rule: '%i == 0',
          visible: false,
        },
      ],
      visible: true,
    },
    item: {
      padding: '0 10 0 0',
      fontColor: '#1E5D9E',
      fontFamily: 'Montserrat',
    },
    lineWidth: '0px',
    maxValue: 8,
    tick: {
      lineColor: '#D1D3D4',
    },
  },
  crosshairX: {
    lineColor: '#b6b6b6',
    lineStyle: 'dashed',
    marker: {
      size: '4px',
      visible: true,
    },
    plotLabel: {
      backgroundColor: 'white',
      bold: true,
      borderColor: '#e3e3e3',
      borderRadius: '5px',
      fontColor: '#2f2f2f',
      fontFamily: 'Lato',
      fontSize: '12px',
      padding: '15px',
      shadow: true,
      shadowAlpha: 0.2,
      shadowBlur: 5,
      shadowColor: '#a1a1a1',
      shadowDistance: 4,
      textAlign: 'right',
    },
    scaleLabel: {
      backgroundColor: '#FBFCFE',
      bold: true,
      callout: false,
      fontColor: '#1E5D9E',
      fontSize: '16px',
      paddingTop: '2px',
    },
    trigger: 'move',
  },
  source: {
    text: 'theatlas.com',
    fontColor: '#777',
    fontFamily: 'Lato',
  },
  series: [
    {
      text: 'Euro Zone',
      values: [
        1.28, 1.41, 1.65, 1.59, 1.99, 2.48, 2.58, 3.3, 3.55, 2.71, 2.62, 1.91,
        2.12, 2.4, 2.9, 3.78, 4.27, 4.44, 3.81, 3.3, 2.91, 2.1, 1.74, 1.24,
        0.47, 0.97, 1.16, 1.04, 0.83, 0.35, 0.51, 1.19, 1.77, 2.24, 2.16, 1.76,
        1.47, 1.62, 1.89, 2.22, 2.92, 3.37, 3.36, 3.8,
      ],
      backgroundColor: '#E80C60',
    },
    {
      text: 'Greece',
      values: [
        2.23, 3.29, 3.2, 0.74, 4, 3.84, 2.92, 3.84, 0.56, 3.39, 4.92, 4.4, 4.16,
        3.1, 4.54, 1.9, 5.38, 5.02, 2.97, 4.69, 3.26, 2.45, 4.75, 6.23, 2.74,
        4.38, 3.87, 2.74, 6.47, 5.89, 5.36, 6.12, 3.64, 4.72, 4.59, 4.47, 1.64,
        1.34, 2.73, 3.31, 4.73, 7.87, 4.03, 5.48,
      ],
      backgroundColor: '#00BAF2',
    },
  ],
};

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

@import 'https://fonts.googleapis.com/css?family=Montserrat';
@import 'https://fonts.googleapis.com/css?family=Lato:400';

.zc-body { background-color: #FBFCFE; }

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

.zc-ref {
  display: none;
}

Styled Radar Chart 128/275 Rainbow Horizontal Bar Chart

Economic Growth Bar Chart

Related Documentation: