<!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, '100%', '20%');
// Set chart layout
chart_1.layout('horizontal');
// 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);
// Set chart title
chart_1.title().text('2012').width('10%');
// 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(0,'20%','100%','20%');
// Set chart layout
chart_2.layout('horizontal');
// 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);
// Set chart title
chart_2.title().text('2013').width('10%');
// 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('horizontal');
// Set chart size and position settings
chart_3.bounds(0,'40%','100%','20%');
// 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);
// Set chart title
chart_3.title().text('2014').width('10%');
// 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('horizontal');
// Set chart size and position settings
chart_4.bounds(0, '60%', '100%', '20%');
// 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);
// Set chart title
chart_4.title().text('2015').width('10%');
// 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('horizontal');
// Set chart size and position settings
chart_5.bounds(0,'80%','100%', '20%');
// 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);
// Set chart title
chart_5.title().text('2016').width('10%');
// Initiate chart drawing
chart_5.draw();
});
</script>
</body>
</html>