html, body, #container {

            width: 100%;

            height: 500px;

            margin: 0;

            padding: 0;

        }

​

        #custom-tooltip {

            position: absolute;

            pointerEvents: none;

            padding: 4px;

            border: solid black 2px;

            background-color: lightgray;

            display: block;

            z-index: 10000;

        }

anychart.onDocumentReady(function () {

​

  //create stage and container

  var stage = anychart.graphics.create("container");

  var target = 190;

  var current_value = 225

​

  // Create bullet chart

  var chart = anychart.bullet([{value: current_value}, {value:target, stroke:'black', fill:'black'}]);

​

  // Set chart ranges

  chart.range().from(0).to(100);

  chart.range(1).from(100).to(150);

  chart.range(2).from(150).to(200);

  chart.range(3).from(200).to(250);

  chart.range(4).from(250).to(300);

  /* Set HTML content and styles for

  custom title and body of tooltip  */

  var tooltip = document.getElementById('custom-tooltip');

​

  //chart listeners show proper tooltip

  chart.listen("mouseMove", function(e) {

    //track cursos position

    var clientX = e['offsetX'];

    var clientY = e['offsetY'];

​

    tooltip.style.left = clientX + 20+"px";

    tooltip.style.top = clientY + 10+"px";

​

    //set data to HTML-tooltip

    tooltip.innerHTML = name;

    tooltip.insertAdjacentHTML( 'beforeend', '<br />target: '+target);

    tooltip.insertAdjacentHTML( 'beforeend', '<br />actual: '+current_value );

  });

​

  chart.listen("mouseOver", function() {

    tooltip.style.display = "block";

  });

​

  // Set chart size and position settings

  chart.bounds(0, 0, "100%", 125);

​

  // Set chart container

  chart.container(stage);

  // Initiate chart drawing

  chart.draw();

​

  var legend = anychart.standalones.legend();  

​

  // set the source of legend items

  legend.items([

    {index: 0, text: 'Current value', iconFill: '#4db4f9'},

    {index: 1, text: 'Very bad', iconFill: '#828282'},

    {index: 2, text: 'Bad', iconFill: '#a9a9a9'},

    {index: 3, text: 'Normal', iconFill: '#c3c4c4'},

    {index: 4, text: 'Good', iconFill: '#d5d5d5'},

    {index: 5, text: 'Great', iconFill: '#e2e2e2'}

  ]);

  console.log(chart)

​

  legend.parentBounds(anychart.math.rect(50, 150, 500, 60));

​

  // set the container for the legend

  legend.container(stage);

​

  // draw the legend

  legend.draw();

});