Bullet Chart with Rules and Tokens

Please enable JavaScript to see the interactive demo.

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

<!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 {
      height: 100%;
      width: 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: 'bullet',
      theme: 'classic',
      backgroundColor: '#F2F2F0',
      title: {
        text: 'Sales Revenue',
        backgroundColor: 'none',
        color: '#333',
      },
      plot: {
        tooltip: {
          text: '<b style="color:%color">Actual Sales: %negation$%node-value</b> USD<br><em style="color:#C4473F">Sales Goals: %negation$%g</em> USD',
          align: 'left',
          alpha: 0.9,
          backgroundColor: '#fff',
          borderColor: '%color-1',
          borderRadius: '3px',
          borderWidth: '2px',
          color: '#000',
          fontSize: '15px',
          negation: 'currency',
          padding: '10px',
          shadow: false,
          thousandsSeparator: ',',
        },
        goal: {
          backgroundColor: '#C4473F',
        },
        styles: [{
            alpha: 0.7,
            backgroundColor: '#87E1FF',
          },
          {
            alpha: 0.7,
            backgroundColor: '#008cba',
          },
          {
            alpha: 0.7,
            backgroundColor: '#00526D',
          },
        ],
      },
      scaleX: {
        values: ['Breakfast Menu', 'Main Menu', 'Dessert Items'],
        guide: {
          visible: false,
        },
        item: {
          color: '#333',
          wrapText: true,
        },
        label: {
          text: 'Sales Revenue Streams',
        },
        lineColor: '#666',
        tick: {
          lineColor: '#333',
        },
      },
      scaleY: {
        guide: {
          lineStyle: 'solid',
        },
        item: {
          color: '#333',
          wrapText: true,
        },
        lineColor: '#333',
        short: true,
        thousandsSeparator: ',',
        tick: {
          lineColor: '#333',
        },
      },
      series: [{
        values: [394098000, 493665000, 321510000],
        goals: [380250000, 490000600, 260100000],
        hoverState: {
          styles: [{
              alpha: 1,
              backgroundColor: '#87E1FF',
            },
            {
              alpha: 1,
              backgroundColor: '#008cba',
            },
            {
              alpha: 1,
              backgroundColor: '#00526D',
            },
          ],
        },
      }, ],
    };

    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: 'bullet',
  theme: 'classic',
  backgroundColor: '#F2F2F0',
  title: {
    text: 'Sales Revenue',
    backgroundColor: 'none',
    color: '#333',
  },
  plot: {
    tooltip: {
      text: '<b style="color:%color">Actual Sales: %negation$%node-value</b> USD<br><em style="color:#C4473F">Sales Goals: %negation$%g</em> USD',
      align: 'left',
      alpha: 0.9,
      backgroundColor: '#fff',
      borderColor: '%color-1',
      borderRadius: '3px',
      borderWidth: '2px',
      color: '#000',
      fontSize: '15px',
      negation: 'currency',
      padding: '10px',
      shadow: false,
      thousandsSeparator: ',',
    },
    goal: {
      backgroundColor: '#C4473F',
    },
    styles: [
      {
        alpha: 0.7,
        backgroundColor: '#87E1FF',
      },
      {
        alpha: 0.7,
        backgroundColor: '#008cba',
      },
      {
        alpha: 0.7,
        backgroundColor: '#00526D',
      },
    ],
  },
  scaleX: {
    values: ['Breakfast Menu', 'Main Menu', 'Dessert Items'],
    guide: {
      visible: false,
    },
    item: {
      color: '#333',
      wrapText: true,
    },
    label: {
      text: 'Sales Revenue Streams',
    },
    lineColor: '#666',
    tick: {
      lineColor: '#333',
    },
  },
  scaleY: {
    guide: {
      lineStyle: 'solid',
    },
    item: {
      color: '#333',
      wrapText: true,
    },
    lineColor: '#333',
    short: true,
    thousandsSeparator: ',',
    tick: {
      lineColor: '#333',
    },
  },
  series: [
    {
      values: [394098000, 493665000, 321510000],
      goals: [380250000, 490000600, 260100000],
      hoverState: {
        styles: [
          {
            alpha: 1,
            backgroundColor: '#87E1FF',
          },
          {
            alpha: 1,
            backgroundColor: '#008cba',
          },
          {
            alpha: 1,
            backgroundColor: '#00526D',
          },
        ],
      },
    },
  ],
};

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

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

.zc-ref {
  display: none;
}

Animated Bullet Gradients 245/281 Animated Gauge

Bullet Chart with Rules and Tokens

Related Documentation: