Highcharts Example

HTML

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
<br />
<table border="0" cellpadding="0" cellspacing="0" id="sheet6" class="sheet6 gridlines">
        <col class="col0">
        <col class="col1">
        <col class="col2">
        <col class="col3">
        <tbody>
          <tr class="row0">
            <td class="column0 style119 s">Month</td>
            <td class="column1 style117 f">Manual</td>
            <td class="column2 style117 f">Automated</td>
            <td class="column3 style117 f">Profit/Loss</td>
          </tr>
          <tr class="row1">
            <td class="column0 style0 n">0</td>
            <td class="column1 style118 f">0</td>
            <td class="column2 style118 f">0</td>
            <td class="column3 style118 f">0</td>
          </tr>
          <tr class="row2">
            <td class="column0 style0 n">1</td>
            <td class="column1 style118 f">119</td>
            <td class="column2 style118 f">551</td>
            <td class="column3 style118 f">-432</td>
          </tr>
          <tr class="row3">
            <td class="column0 style0 n">2</td>
            <td class="column1 style118 f">238</td>
            <td class="column2 style118 f">717</td>
            <td class="column3 style118 f">-479</td>
          </tr>
          <tr class="row4">
            <td class="column0 style0 n">3</td>
            <td class="column1 style118 f">357</td>
            <td class="column2 style118 f">860</td>
            <td class="column3 style118 f">-504</td>
          </tr>
          <tr class="row5">
            <td class="column0 style0 n">4</td>
            <td class="column1 style118 f">476</td>
            <td class="column2 style118 f">980</td>
            <td class="column3 style118...

JavaScript

Highcharts.setOptions({
				lang: {
					thousandsSep: ','
				}
			});
	

				var chart = new Highcharts.Chart({
					colors: ["#cc1c0d", "#1d63af" , "#9eb215"],
					chart: {
						type: 'line',
						backgroundColor:'rgba(255, 255, 255, 0.85)',
						renderTo: 'container'
					},
				 data: {
					table: 'sheet6',
					complete: function(options){
						var series = options.series[1],
						point = series.data[8];

						series.data[8] = {
							x: point[0],
							y: point[1],
							marker: {
								fillColor: '#1d63af',
								symbol: 'circle',
								radius: 4
							}
						};
					}
				  },
				  title: {
					  text: 'Cost Comparison: Manual vs. Automated Testing'
				  },
				  xAxis: {
					  tickInterval:3,
					  title: {
						  text: 'Months'
					  },
				  plotLines: [{
					color: '#d9d9d6',
					dashStyle: 'line',
					value: 0,
					width: 1   
				  },
				  {
					color: '#d9d9d6',
					dashStyle: 'line',
					value: 12,
					width: 1   
				  },
				  {
					color: '#d9d9d6',
					dashStyle: 'line',
					value: 24,
					width: 1   
				  },
				  {
					color: '#d9d9d6',
					dashStyle: 'line',
					value: 36,
					width: 1   
				  },
				  {
					color: '#d9d9d6',
					dashStyle: 'line',
					value: 48,
					width: 1   
				  }],
				  },
					plotOptions: {
						series: {
							marker: {
								symbol: 'circle',
								radius: 3,
								fillColor: '#FFFFFF',
								lineWidth: 2,
								lineColor: null // inherit from series
							},
							shadow: true
						}
					},
				  yAxis: {
					  allowDecimals: false,
					  title: {
						  text: 'Cost [kUSD]'
					  },
					labels: {
						formatter: function () {
							return Highcharts.numberFormat(this.value,0);
						}
					}
				  },
				  credits: {
					  enabled: false
				  },
				  tooltip: {
					  headerFormat: '<b>{series.name}</b><br>',
					  pointFormat: 'Month {point.x}: {point.y} kUSD'
				  },
				});