html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // create cartesian chart

  var chart = anychart.cartesian();

​

  // create data set on our data

  var dataSet = anychart.data.set(getData());

​

  // map data for the first series,take value from first column of data set

  var seriesData = dataSet.mapAs({ x: 0, value: 1 });

​

  // create jumpLine series with mapping data

  chart.jumpLine(seriesData);

​

  // set chart title text settings

  chart.title('Interest Rates Continue to Increase');

​

  // set scale minimum

  chart.yScale().minimum(0);

​

  // tooltips position and interactivity settings

  chart.tooltip().positionMode('point').format('Value: {%Value}%');

​

  // set interactivity

  chart.interactivity().hoverMode('by-x');

​

  // set yAxis labels formatter

  chart.yAxis().labels().format('{%Value}%');

  // axes titles

  chart.xAxis(true);

​

  // set container id for the chart

  chart.container('container');

  // initiate chart drawing

  chart.draw();

});

​

function getData() {

  return [

    ['Q1 2014', 0.9],

    ['Q2 2014', 0.9],

    ['Q3 2014', 1.8],

    ['Q4 2014', 2.1],

    ['Q1 2015', 2.5],

    ['Q2 2015', 2.5],

    ['Q3 2015', 2.1],

    ['Q4 2015', 2.5],

    ['Q1 2016', 3.0],

    ['Q2 2016', 3.0],

    ['Q3 2016', 3.5],

    ['Q4 2016', 4]

  ];

}