Horizontal Bullet Chart

Please enable JavaScript to see the interactive demo.

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

<!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>
    .zc-body {
      background-color: #f4f4f4;
    }

    .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"]; // DEFINE DATA
    // -----------------------------
    let chartData = [{
        text: 'Rihanna',
        values: [69, 71, 67, 87, 85, 67],
        backgroundColor: '#6FA3C1',
        goals: [85, 77, 87, 53, 70, 60],
        legendMarker: {
          borderColor: '#6FA3C1',
        },
        lineColor: '#6FA3C1',
      },
      {
        text: 'P!nk',
        values: [90, 55, 64, 65, 87, 90],
        backgroundColor: '#F79434',
        goals: [53, 61, 53, 75, 80, 76],
        legendMarker: {
          borderColor: '#F79434',
        },
        lineColor: '#F79434',
      },
      {
        text: 'Lady GaGa',
        values: [61, 70, 88, 62, 85, 67],
        backgroundColor: '#7A6652',
        goals: [81, 64, 79, 86, 84, 78],
        legendMarker: {
          borderColor: '#7A6652',
        },
        lineColor: '#7A6652',
      },
    ];

    // CHART CONFIG
    // -----------------------------
    let chartConfig = {
      type: 'hbullet',
      backgroundColor: '#f4f4f4',
      title: {
        text: 'Top Downloaded Artist',
        backgroundColor: 'none',
        fontColor: '#434F5B',
        fontFamily: 'arial',
        fontSize: '28px',
        fontWeight: 'normal',
        marginTop: '3%',
        textAlign: 'center',
      },
      legend: {
        backgroundColor: 'none',
        borderWidth: '0px',
        item: {
          cursor: 'hand',
          fontColor: '#307C70',
          fontFamily: 'arial',
          fontSize: '12px',
          fontWeight: 'normal',
          shadow: false,
        },
        layout: 'float',
        marker: {
          cursor: 'hand',
        },
        position: '50% 12%',
        toggleAction: 'remove',
      },
      plot: {
        tooltipText: 'Estimated Downloads: %g<br>Actual Downloads: %v',
        alpha: 1,
        animation: {
          effect: 'ANIMATION_EXPAND_BOTTOM',
          method: 'ANIMATION_LINEAR',
          sequence: 'null',
        },
        backgroundColor: '#000000',
        barSpace: '10px',
      },
      plotarea: {
        margin: '22% 5% 15% 10%',
        backgroundColor: '#ffffff',
      },
      scaleX: {
        values: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
        guide: {
          alpha: 0.25,
          lineColor: '#434F5B',
          lineStyle: 'solid',
        },
        item: {
          fontColor: '#434F5B',
          fontFamily: 'arial',
          fontSize: '12px',
          fontWeight: 'normal',
          offsetX: '-5%',
        },
        lineColor: '#434F5B',
        lineStyle: 'solid',
        lineWidth: '1px',
        tick: {
          lineColor: '#434F5B',
          lineWidth: '1px',
        },
      },
      scaleY: {
        values: '0:100:20',
        format: '%v',
        guide: {
          alpha: 0.25,
          lineColor: '#434F5B',
          lineStyle: 'solid',
        },
        item: {
          fontColor: '#434F5B',
          fontFamily: 'arial',
          fontSize: '12px',
          fontWeight: 'normal',
          offsetY: '5%',
        },
        lineColor: '#434F5B',
        lineStyle: 'solid',
        lineWidth: '1px',
        tick: {
          lineColor: '#434F5B',
          lineWidth: '1px',
        },
      },
      series: chartData,
    };

    // 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>

// DEFINE DATA
// -----------------------------
let chartData = [
  {
    text: 'Rihanna',
    values: [69, 71, 67, 87, 85, 67],
    backgroundColor: '#6FA3C1',
    goals: [85, 77, 87, 53, 70, 60],
    legendMarker: {
      borderColor: '#6FA3C1',
    },
    lineColor: '#6FA3C1',
  },
  {
    text: 'P!nk',
    values: [90, 55, 64, 65, 87, 90],
    backgroundColor: '#F79434',
    goals: [53, 61, 53, 75, 80, 76],
    legendMarker: {
      borderColor: '#F79434',
    },
    lineColor: '#F79434',
  },
  {
    text: 'Lady GaGa',
    values: [61, 70, 88, 62, 85, 67],
    backgroundColor: '#7A6652',
    goals: [81, 64, 79, 86, 84, 78],
    legendMarker: {
      borderColor: '#7A6652',
    },
    lineColor: '#7A6652',
  },
];

// CHART CONFIG
// -----------------------------
let chartConfig = {
  type: 'hbullet',
  backgroundColor: '#f4f4f4',
  title: {
    text: 'Top Downloaded Artist',
    backgroundColor: 'none',
    fontColor: '#434F5B',
    fontFamily: 'arial',
    fontSize: '28px',
    fontWeight: 'normal',
    marginTop: '3%',
    textAlign: 'center',
  },
  legend: {
    backgroundColor: 'none',
    borderWidth: '0px',
    item: {
      cursor: 'hand',
      fontColor: '#307C70',
      fontFamily: 'arial',
      fontSize: '12px',
      fontWeight: 'normal',
      shadow: false,
    },
    layout: 'float',
    marker: {
      cursor: 'hand',
    },
    position: '50% 12%',
    toggleAction: 'remove',
  },
  plot: {
    tooltipText: 'Estimated Downloads: %g<br>Actual Downloads: %v',
    alpha: 1,
    animation: {
      effect: 'ANIMATION_EXPAND_BOTTOM',
      method: 'ANIMATION_LINEAR',
      sequence: 'null',
    },
    backgroundColor: '#000000',
    barSpace: '10px',
  },
  plotarea: {
    margin: '22% 5% 15% 10%',
    backgroundColor: '#ffffff',
  },
  scaleX: {
    values: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    guide: {
      alpha: 0.25,
      lineColor: '#434F5B',
      lineStyle: 'solid',
    },
    item: {
      fontColor: '#434F5B',
      fontFamily: 'arial',
      fontSize: '12px',
      fontWeight: 'normal',
      offsetX: '-5%',
    },
    lineColor: '#434F5B',
    lineStyle: 'solid',
    lineWidth: '1px',
    tick: {
      lineColor: '#434F5B',
      lineWidth: '1px',
    },
  },
  scaleY: {
    values: '0:100:20',
    format: '%v',
    guide: {
      alpha: 0.25,
      lineColor: '#434F5B',
      lineStyle: 'solid',
    },
    item: {
      fontColor: '#434F5B',
      fontFamily: 'arial',
      fontSize: '12px',
      fontWeight: 'normal',
      offsetY: '5%',
    },
    lineColor: '#434F5B',
    lineStyle: 'solid',
    lineWidth: '1px',
    tick: {
      lineColor: '#434F5B',
      lineWidth: '1px',
    },
  },
  series: chartData,
};

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

.zc-body { background-color:#f4f4f4; }
.chart--container {
  height: 100%;
  width: 100%;
  min-height: 530px;
}

.zc-ref {
  display: none;
}

Chord Chart with Title Element and Legend 243/281 Animated Bullet Gradients

Horizontal Bullet Chart

Related Documentation: