<!doctype html>
<html>
<head>
<script src="//cdn.anychart.com/js/7.4.0/anychart.min.js"></script>
<style>
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
anychart.onDocumentReady(function() {
stage = anychart.graphics.create('container');
// Create bullet chart
var chart_1 = anychart.bullet([{value: 4}, {value: 0, type: 'line'}]);
// Set chart to render on stage
chart_1.container(stage);
// Set chart size and position settings
chart_1.bounds(0, 0, '20%', '100%');
// Set chart layout
chart_1.layout('vertical');
// Create chart ranges
chart_1.range().from(-15).to(-5);
chart_1.range(1).from(-5).to(5);
chart_1.range(2).from(5).to(15);
// Disable chart title
chart_1.title().enabled(false);
// Initiate chart drawing
chart_1.draw();
// Create bullet chart
var chart_2 = anychart.bullet([{value: -7}, {value: 0, type: 'line'}]);
// Set chart to render on stage
chart_2.container(stage);
// Set chart size and position settings
chart_2.bounds('20%', 0, '20%', '100%');
// Set chart layout
chart_2.layout('vertical');
// Create chart ranges
chart_2.range().from(-15).to(-5);
chart_2.range(1).from(-5).to(5);
chart_2.range(2).from(5).to(15);
// Disable chart title
chart_2.title().enabled(false);
// Initiate chart drawing
chart_2.draw();
// Create bullet chart
var chart_3 = anychart.bullet([{value: -2}, {value: 0, type: 'line'}]);
// Set chart to render on stage
chart_3.container(stage);
// Set chart layout
chart_3.layout('vertical');
// Set chart size and position settings
chart_3.bounds('40%', 0, '20%', '100%');
// Create chart ranges
chart_3.range().from(-15).to(-5);
chart_3.range(1).from(-5).to(5);
chart_3.range(2).from(5).to(15);
// Disable chart title
chart_3.title().enabled(false);
// Initiate chart drawing
chart_3.draw();
// Create bullet chart
var chart_4 = anychart.bullet([{value: 7}, {value: 0, type: 'line'}]);
// Set chart to render on stage
chart_4.container(stage);
// Set chart layout
chart_4.layout('vertical');
// Set chart size and position settings
chart_4.bounds('60%', 0, '20%', '100%');
// Create chart ranges
chart_4.range().from(-15).to(-5);
chart_4.range(1).from(-5).to(5);
chart_4.range(2).from(5).to(15);
// Disable chart title
chart_4.title().enabled(false);
// Initiate chart drawing
chart_4.draw();
// Create bullet chart
var chart_5 = anychart.bullet([{value: 13}, {value: 0, type: 'line'}]);
// Set chart to render on stage
chart_5.container(stage);
// Set chart layout
chart_5.layout('vertical');
// Set chart size and position settings
chart_5.bounds('80%', 0, '20%', '100%');
// Create chart ranges
chart_5.range().from(-15).to(-5);
chart_5.range(1).from(-5).to(5);
chart_5.range(2).from(5).to(15);
// Disable chart title
chart_5.title().enabled(false);
// Initiate chart drawing
chart_5.draw();
});
</script>
</body>
</html>