<!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() {
// Create stage for all charts
stage = anychart.graphics.create('container');
//create 3 palettes
var palette_red = anychart.palettes.distinctColors();
palette_red.colors(['#c06a6a', '#d39797', '#e0b6b6']);
//create palette based on green color (using anychart.color.lighten)
var palette_green = anychart.palettes.distinctColors();
palette_green.colors(['#82c182', '#a8d4a8', '#c2e1c2']);
//create palette based on green color (using anychart.color.lighten)
var palette_orange = anychart.palettes.distinctColors();
palette_orange.colors(['#ffd382', '#ffe0a8', '#ffe9c2']);
// Create bullet chart
var chart_1 = anychart.bullet([{value: 6, fill: 'black'}, {value: 11, fill: 'brown'}]);
// Set chart to render on stage
chart_1.container(stage);
// Set chart size and position settings
chart_1.bounds(0, 0, '16.7%', '100%');
// Set chart layout
chart_1.layout('vertical');
// Disable axis
chart_1.axis().enabled(false);
// Create chart ranges
chart_1.range().from(0).to(5);
chart_1.range(1).from(5).to(10);
chart_1.range(2).from(10).to(15);
// Set chart to use palette
chart_1.rangePalette(palette_red);
// Disable chart title
chart_1.title().enabled(false);
// Initiate chart drawing
chart_1.draw();
// Create second bullet chart
var chart_2 = anychart.bullet([{value: 7, fill: 'black'}, {value: 11, fill: 'brown'}]);
// Set chart to render on stage
chart_2.container(stage);
// Set chart size and position settings
chart_2.bounds('16.7%', 0, '16.7%', '100%');
// Set chart layout
chart_2.layout('vertical');
// Disable axis
chart_2.axis().enabled(false);
// Create chart ranges
chart_2.range().from(0).to(5);
chart_2.range(1).from(5).to(10);
chart_2.range(2).from(10).to(15);
//set chart to use palette
chart_2.rangePalette(palette_red);
// Disable chart title
chart_2.title().enabled(false);
// Initiate chart drawing
chart_2.draw();
// Create bullet chart
var chart_3 = anychart.bullet([{value: 3, fill: 'black'}, {value: 11, fill: 'orange'}]);
// Set chart to render on stage
chart_3.container(stage);
// Set chart size and position settings
chart_3.bounds('33.3%', 0, '16.7%', '100%');
// Set chart layout
chart_3.layout('vertical');
// Disable axis
chart_3.axis().enabled(false);
// Create chart ranges
chart_3.range().from(0).to(5);
chart_3.range(1).from(5).to(10);
chart_3.range(2).from(10).to(15);
//set chart to use palette
chart_3.rangePalette(palette_orange);
// Disable chart title
chart_3.title().enabled(false);
// Initiate chart drawing
chart_3.draw();
// Create bullet chart
var chart_4 = anychart.bullet([{value: 9, fill: 'black'}, {value: 11, fill: 'orange'}]);
// Set chart to render on stage
chart_4.container(stage);
// Set chart size and position settings
chart_4.bounds('50%', 0, '16.7%', '100%');
// Set chart layout
chart_4.layout('vertical');
// Disable axis
chart_4.axis().enabled(false);
// Create chart ranges
chart_4.range().from(0).to(5);
chart_4.range(1).from(5).to(10);
chart_4.range(2).from(10).to(15);
//set chart to use palette
chart_4.rangePalette(palette_orange);
// Disable chart title
chart_4.title().enabled(false);
// Initiate chart drawing
chart_4.draw();
// Create bullet chart
var chart_5 = anychart.bullet([{value: 2, fill: 'black'}, {value: 11, fill: 'green'}]);
// Set chart to render on stage
chart_5.container(stage);
// Set chart size and position settings
chart_5.bounds('66.7%', 0, '16.7%', '100%');
// Set chart layout
chart_5.layout('vertical');
// Disable axis
chart_5.axis().enabled(false);
// Create chart ranges
chart_5.range().from(0).to(5);
chart_5.range(1).from(5).to(10);
chart_5.range(2).from(10).to(15);
//set chart to use palette
chart_5.rangePalette(palette_green);
// Disable chart title
chart_5.title().enabled(false);
// Initiate chart drawing
chart_5.draw();
// Create bullet chart
var chart_6 = anychart.bullet([{value: 13, fill: 'black'}, {value: 11, fill: 'green'}]);
// Set chart to render on stage
chart_6.container(stage);
// Set chart size and position settings
chart_6.bounds('83.3%', 0, '16.7%', '100%');
// Set chart layout
chart_6.layout('vertical');
// Disable axis
chart_6.axis().enabled(false);
// Create chart ranges
chart_6.range().from(0).to(5);
chart_6.range(1).from(5).to(10);
chart_6.range(2).from(10).to(15);
//set chart to use palette
chart_6.rangePalette(palette_green);
// Disable chart title
chart_6.title().enabled(false);
// Initiate chart drawing
chart_6.draw();
});
</script>
</body>
</html>