Rainbow Horizontal Bar Chart

Please enable JavaScript to see the interactive demo.

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

<!doctype html>
<html class="zc-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=Roboto';

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

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

    .zc-ref {
      display: none;
    }
  </style>
</head>


<body class="zc-body">
  
  <div id="myChart" class="chart--container">
    <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
  </div>

  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // CHART CONFIG
    // -----------------------------
    let chartConfig = {
      type: 'hbar',
      title: {
        text: 'Expenditures in Tech',
        align: 'left',
        fontColor: '#555',
        fontFamily: 'Roboto',
        fontSize: '30px',
        fontWeight: 'normal',
        offsetX: '10px',
      },
      subtitle: {
        text: 'R&D costs from 2017-2019',
        align: 'left',
        fontColor: '#777',
        fontFamily: 'Roboto',
        fontSize: '16px',
        offsetX: '10px',
        offsetY: '10px',
      },
      legend: {
        backgroundColor: 'transparent',
        borderWidth: '0px',
        cursor: 'hand',
        highlightPlot: true,
        item: {
          fontColor: '#333',
          fontFamily: 'Roboto',
          fontSize: '18px',
        },
        marker: {
          borderRadius: '10px',
          borderWidth: '0px',
        },
        offsetX: '0px',
        offsetY: '80px',
        padding: '10px',
      },
      plot: {
        tooltip: {
          text: '$%v billion USD <br>in %t',
          padding: '10px',
          backgroundColor: '#fff',
          borderColor: '#333',
          borderRadius: '5px',
          borderWidth: '1px',
          fontColor: '#444',
          fontSize: '14px',
        },
        animation: {
          effect: 'ANIMATION_EXPAND_BOTTOM',
          method: 'ANIMATION_LINEAR',
          sequence: 'ANIMATION_BY_PLOT',
        },
        borderRadius: '0px 5px 5px 0px',
        highlightMarker: {
          backgroundColor: 'red',
        },
        highlightState: {
          backgroundColor: 'red',
        },
      },
      plotarea: {
        margin: '100px 130px 70px 100px',
      },
      scaleX: {
        item: {
          fontFamily: 'Roboto',
          fontSize: '14px',
        },
        labels: ['Facebook', 'Apple', 'Microsoft', 'Intel', 'Google', 'Amazon'],
        lineColor: '#DDD',
        tick: {
          visible: false,
        },
      },
      scaleY: {
        values: '0:14:1.5',
        guide: {
          lineColor: '#DDD',
          lineStyle: 'solid',
        },
        item: {
          fontFamily: 'Roboto',
          fontSize: '14px',
        },
        label: {
          text: 'Investment in Billions (USD)',
          fontColor: '#777',
          fontFamily: 'Roboto',
          fontSize: '14px',
          offsetY: '5px',
        },
        lineWidth: '0px',
        tick: {
          visible: false,
        },
      },
      source: {
        text: '',
        fontColor: '#666',
        fontFamily: 'Roboto',
      },
      series: [{
          text: '2019',
          values: [4.8, 8.1, 12, 12.1, 12.3, 12.5],
          backgroundColor: '#d6d6d6',
          rules: [{
              backgroundColor: '#f98377',
              rule: '%i==0',
            },
            {
              backgroundColor: '#fbd972',
              rule: '%i==1',
            },
            {
              backgroundColor: '#78e5d2',
              rule: '%i==2',
            },
            {
              backgroundColor: '#7ad8e5',
              rule: '%i==3',
            },
            {
              backgroundColor: '#d2f27c',
              rule: '%i==4',
            },
            {
              backgroundColor: '#e572ec',
              rule: '%i==5',
            },
          ],
        },

        {
          text: '2018',
          values: [2.7, 6, 11.4, 11.5, 9.8, 9.3],
          backgroundColor: '#8e8e8e',
          rules: [{
              backgroundColor: '#F55443',
              rule: '%i==0',
            },
            {
              backgroundColor: '#FFCC33',
              rule: '%i==1',
            },
            {
              backgroundColor: '#44b6a2',
              rule: '%i==2',
            },
            {
              backgroundColor: '#10A5BA',
              rule: '%i==3',
            },
            {
              backgroundColor: '#96BD2C',
              rule: '%i==4',
            },
            {
              backgroundColor: '#b42cbd',
              rule: '%i==5',
            },
          ],
        },
        {
          text: '2017',
          values: [1.4, 4.5, 10.4, 10.6, 7.1, 6.6],
          backgroundColor: '#494949',
          rules: [{
              backgroundColor: '#EB1C12',
              rule: '%i==0',
            },
            {
              backgroundColor: '#FBA30A',
              rule: '%i==1',
            },
            {
              backgroundColor: '#1c8976',
              rule: '%i==2',
            },
            {
              backgroundColor: '#016B88',
              rule: '%i==3',
            },
            {
              backgroundColor: '#588C08',
              rule: '%i==4',
            },
            {
              backgroundColor: '#781c7e',
              rule: '%i==5',
            },
          ],
        },
      ],
    };

    // RENDER CHARTS
    // -----------------------------
    zingchart.render({
      id: 'myChart',
      data: chartConfig,
      height: '100%',
      width: '100%',
    });
  </script>
</body>

</html>

<!doctype html>
<html class="zc-html">
  <head>
    <meta charset="utf-8">
    <title>ZingSoft Demo</title>
    <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  </head>
  
  <body class="zc-body">
  
    <div id="myChart" class="chart--container">
      <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    </div>
    
  </body>
</html>

// CHART CONFIG
// -----------------------------
let chartConfig = {
  type: 'hbar',
  title: {
    text: 'Expenditures in Tech',
    align: 'left',
    fontColor: '#555',
    fontFamily: 'Roboto',
    fontSize: '30px',
    fontWeight: 'normal',
    offsetX: '10px',
  },
  subtitle: {
    text: 'R&D costs from 2017-2019',
    align: 'left',
    fontColor: '#777',
    fontFamily: 'Roboto',
    fontSize: '16px',
    offsetX: '10px',
    offsetY: '10px',
  },
  legend: {
    backgroundColor: 'transparent',
    borderWidth: '0px',
    cursor: 'hand',
    highlightPlot: true,
    item: {
      fontColor: '#333',
      fontFamily: 'Roboto',
      fontSize: '18px',
    },
    marker: {
      borderRadius: '10px',
      borderWidth: '0px',
    },
    offsetX: '0px',
    offsetY: '80px',
    padding: '10px',
  },
  plot: {
    tooltip: {
      text: '$%v billion USD <br>in %t',
      padding: '10px',
      backgroundColor: '#fff',
      borderColor: '#333',
      borderRadius: '5px',
      borderWidth: '1px',
      fontColor: '#444',
      fontSize: '14px',
    },
    animation: {
      effect: 'ANIMATION_EXPAND_BOTTOM',
      method: 'ANIMATION_LINEAR',
      sequence: 'ANIMATION_BY_PLOT',
    },
    borderRadius: '0px 5px 5px 0px',
    highlightMarker: {
      backgroundColor: 'red',
    },
    highlightState: {
      backgroundColor: 'red',
    },
  },
  plotarea: {
    margin: '100px 130px 70px 100px',
  },
  scaleX: {
    item: {
      fontFamily: 'Roboto',
      fontSize: '14px',
    },
    labels: ['Facebook', 'Apple', 'Microsoft', 'Intel', 'Google', 'Amazon'],
    lineColor: '#DDD',
    tick: {
      visible: false,
    },
  },
  scaleY: {
    values: '0:14:1.5',
    guide: {
      lineColor: '#DDD',
      lineStyle: 'solid',
    },
    item: {
      fontFamily: 'Roboto',
      fontSize: '14px',
    },
    label: {
      text: 'Investment in Billions (USD)',
      fontColor: '#777',
      fontFamily: 'Roboto',
      fontSize: '14px',
      offsetY: '5px',
    },
    lineWidth: '0px',
    tick: {
      visible: false,
    },
  },
  source: {
    text: '',
    fontColor: '#666',
    fontFamily: 'Roboto',
  },
  series: [
    {
      text: '2019',
      values: [4.8, 8.1, 12, 12.1, 12.3, 12.5],
      backgroundColor: '#d6d6d6',
      rules: [
        {
          backgroundColor: '#f98377',
          rule: '%i==0',
        },
        {
          backgroundColor: '#fbd972',
          rule: '%i==1',
        },
        {
          backgroundColor: '#78e5d2',
          rule: '%i==2',
        },
        {
          backgroundColor: '#7ad8e5',
          rule: '%i==3',
        },
        {
          backgroundColor: '#d2f27c',
          rule: '%i==4',
        },
        {
          backgroundColor: '#e572ec',
          rule: '%i==5',
        },
      ],
    },

    {
      text: '2018',
      values: [2.7, 6, 11.4, 11.5, 9.8, 9.3],
      backgroundColor: '#8e8e8e',
      rules: [
        {
          backgroundColor: '#F55443',
          rule: '%i==0',
        },
        {
          backgroundColor: '#FFCC33',
          rule: '%i==1',
        },
        {
          backgroundColor: '#44b6a2',
          rule: '%i==2',
        },
        {
          backgroundColor: '#10A5BA',
          rule: '%i==3',
        },
        {
          backgroundColor: '#96BD2C',
          rule: '%i==4',
        },
        {
          backgroundColor: '#b42cbd',
          rule: '%i==5',
        },
      ],
    },
    {
      text: '2017',
      values: [1.4, 4.5, 10.4, 10.6, 7.1, 6.6],
      backgroundColor: '#494949',
      rules: [
        {
          backgroundColor: '#EB1C12',
          rule: '%i==0',
        },
        {
          backgroundColor: '#FBA30A',
          rule: '%i==1',
        },
        {
          backgroundColor: '#1c8976',
          rule: '%i==2',
        },
        {
          backgroundColor: '#016B88',
          rule: '%i==3',
        },
        {
          backgroundColor: '#588C08',
          rule: '%i==4',
        },
        {
          backgroundColor: '#781c7e',
          rule: '%i==5',
        },
      ],
    },
  ],
};

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

@import 'https://fonts.googleapis.com/css?family=Roboto';

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

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

.zc-ref {
  display: none;
}

Economic Growth Bar Chart 135/281 Angular Gauge Bar Chart

Rainbow Horizontal Bar Chart

Related Documentation: