Google-like Stock Chart / Line Chart [closed]

Question

I'm looking for a specific style of Javascript or SVG chart library that resembles a Google Chart (example)

I have searched for some time but can't find anything that closely resembles this style, and I was curious if anyone could point me in the right direction to achieve a similar end result.

I have looked in to the Google Visualization API and tried making a Line Chart in JSFiddle but can't seem to replicate that style of design. Any advice?

See Example Image

Javascript, SVG, and AngularJS are all acceptable for the bounty reward. Bonus points for SVG.

Answer 1

This is the closest I've managed to get, and I think I did a pretty good job given the requirements.

If you'd like the tooltip to always show when you're hovering over the chart (Example: Google Trends) this can be accomplished with the focusTarget option (Example JSFiddle) which currently only works with Classic Google charts and not the new material charts.

google.charts.load('current', { packages: ['line'] });
google.charts.setOnLoadCallback(drawBasic);

function drawBasic() {

  var data = new google.visualization.DataTable();
  data.addColumn('date', 'X');
  data.addColumn('number', 'Dogs');

  data.addRows([
    [new Date(2015, 9, 28), 6],
    [new Date(2015, 9, 29), 10],
    [new Date(2015, 9, 30), 19],
    [new Date(2015, 10, 0), 14],
    [new Date(2015, 10, 1), 16],

  ]);

  var options = {
    colors: ["#4184F3"],
    lineWidth: 3,
    legend: {
      position: "none"
    },
    hAxis: {
      pointSize: 2,
      format: 'MMM d',
      title: '',
      titlePosition: 'none'
    },
    vAxis: {
      title: 'Popularity'
    }
  };

  var chart = new google.charts.Line(document.getElementById('chart_div'));
  chart.draw(data, google.charts.Line.convertOptions(options));
}

#chart_div svg g circle {
  stroke: #4184F3 !important;
  fill-opacity: 1;
  r: 5;
  fill: #4184F3 !important;
  filter: none !important;
}
#chart_div svg g circle:hover {
  r: 8
}
#chart_div svg g path {
  stroke-width: 4 !important;
  stroke: #4184F3 !important;
  stroke-linejoin: bevel;
  stroke-width: 1;
  stroke-linecap: round;
  filter: none !important;
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>