Google-like Stock Chart / Line Chart

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.

In what way isn't the chart in your jsfiddle matching the chart above? It looks very close to me (which i suppose isn't a surprise, given they're both google charts). If you want dates in the x axis you just have to supply the right axis type and objects in the data, see the update at: https://jsfiddle.net/wbufx12p/1/ — mgraham, Feb 04 '16 at 15:22
Here is a few resources that might help: http://stackoverflow.com/questions/793808/svg-charting-library ... http://www.sitepoint.com/15-best-javascript-charting-libraries/ — Asons, Feb 04 '16 at 15:34
I just wanted to say thank you for the advice @mgraham and LGSon - here is where I'm at so far: https://jsfiddle.net/jaggedsoftware/tr5dsgwL/ — jaggedsoft, Feb 04 '16 at 21:56
You're either asking for a library recommendation (off topic), or asking someone to code and style a chart for you (too broad; off topic). — Matt, Feb 11 '16 at 09:08

jaggedsoft · Accepted Answer · 2016-02-14T00:46:35.427

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>

See thread: Google-visualization-api: [Request for focusTarget to work on material charts](https://groups.google.com/forum/#!topic/google-visualization-api/Ol2yVy6mrVE) — jaggedsoft, Feb 11 '16 at 19:30
please can you see my question maybe you have an idea http://stackoverflow.com/questions/37256487/i-want-to-change-the-chart-for-each-city-or-subcity-selected — Abderrahim, May 17 '16 at 13:48
I recommend http://metricsgraphicsjs.org/examples.htm as well — jaggedsoft, Aug 23 '16 at 22:24

Google-like Stock Chart / Line Chart

1 Answers1