Stock Chart that resembles the functionality of Google's popular line chart feature

Can anyone recommend a Javascript or SVG chart library that has a style similar to a Google Chart? I have been searching without much luck and would appreciate some guidance on how to achieve a similar look.

I've looked into the Google Visualization API and attempted to create a Line Chart in JSFiddle, but haven't been able to replicate the desired design. Any suggestions?

See Example Image

I am open to using Javascript, SVG, and AngularJS for this project, with a preference for SVG charts. Any help would be greatly appreciated!

Answer №1

https://i.stack.imgur.com/7SPDC.png

I've put a lot of effort into this solution, and I believe it meets the requirements quite well.

If you want the tooltip to always be visible while hovering over the chart (Check out this example on Google Trends), you can achieve this by using the focusTarget option (See an example on JSFiddle). It's worth noting that this feature currently only works with Classic Google charts, not the newer 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Attaching an input text box to an Angular $scope is not possible

In my angular app, I have a piece of markup that showcases a table with saved queries. Each query has the option to add a title using an input field. When you click the edit icon, it should display the newly created title. <table class="table table-str ...

Tips for restricting additional input when maximum length is reached in an Angular app

In my Angular 6 application, I am working on implementing a directive that prevents users from typing additional characters in an input field. However, I want to allow certain non-data input keys such as tab, delete, and backspace. Currently, I have an if ...

Route.get() function is expecting a callback function, but instead received a string object

Having searched through similar posts, I am unsure and lack the experience to apply the suggested resolutions to my project. I recently built a basic app with two main routes as part of a Udemy course, but I am struggling with the following error: "Route.g ...

Tips for integrating React into a jQuery-centric web application?

After diving into React, I'm eager to showcase my skills by implementing it on select pages as a proof-of-concept for my supervisor at work. Can anyone guide me on how to achieve this using traditional script tags instead of imports? So far, I'v ...

Convert HTML Tables to PDF Format

I am facing an issue with exporting my table data into a PDF using jQuery. I have made sure to install all the necessary library files, but my code doesn't seem to be working correctly. Can anyone spot any errors in my code or suggest what might be mi ...

Validating Input Field with Regular Expression in JavaScript/TypeScript to Avoid Starting with Zero

I need to create a RegEx for a text field in Angular / TypeScript that limits the user to inputting only a 1-3 digit number that does not start with 0. While it's straightforward to restrict input to just digits, I'm struggling to prevent an inpu ...

Deactivate radio buttons when the table value is greater than or equal to one

On my webpage, there are radio buttons for 'Yes' and 'No'. When 'Yes' is selected, a hidden <div> appears where users can fill in fields. Upon clicking the 'Add' button, the information is displayed in a table. ...

Adding a <link> tag with a specific onload attribute in the <head> using Next.js

While working on a Next.js project, I am trying to include the following HTML content within the <head>: <link href="..." rel="stylesheet" media="print" onload="this.media='all'" /> The code I ...

Numerous volume sliders catering to individual audio players

I'm currently working on implementing volume sliders for multiple audio players, similar to what you can find on . With the help of Deepak, I've managed to create code that allows me to control play/pause and adjust the volume of various audio pl ...

What distinguishes setting a $watch on a string variable from setting a $watch on an object's key in AngularJS?

When using angularJs, I am curious about the distinction between setting $watch on a string variable versus setting $watch on an Object's key. Let me explain with a detailed scenario: $scope.activeMenu = {'id' : '...', 'name ...

Encountering an Unexpected Identifier while trying to adjust the scope within an Angular.js Directive

Within Angular.js, I am attempting to update a $scope value located in my controller using a directive with two-way binding "=" functionality. The goal is for the directive to update the scope variable. However, I am encountering an error message stating ...

Switch the checked status of an input dynamically using jQuery function

It seems like I might be overlooking something quite obvious, but I can't figure out why this jquery function is behaving inconsistently. HTML: <label id="income_this_tax_year"> <div class="left"> <p>Have you had Self-Employm ...

Adding JSON data to an HTML document

Seeking guidance on how to efficiently parse and display information from a JSON file consisting of 3 objects onto a widget. Unsure of the best approach to achieve this task. Any suggestions or methods would be greatly appreciated. Widget Structure: < ...

Utilizing JSONP callbacks in Dart

I've been struggling with implementing basic JSONP in Dart and I can't seem to figure it out. After reading this specific blog post along with another helpful resource, it suggests using window.on.message.add(dataReceived); to receive a MessageEv ...

Avoiding cross-site scripting vulnerabilities, an AJAX response will return an HTML response

function accessAccount() { var errorMessage = ""; var checkedResult = true; $(".errorDisplay").hide(); var accountNumber = document.getElementById('customerAccountNumber').value; var accountType = document.getElementById(&apos ...

I am facing conflicts between vue-tsc and volar due to version discrepancies. How can I resolve this problem?

My vsCode is alerting me about an issue: ❗ The Vue Language Features (Volar) plugin is using version 1.0.9, while the workspace has vue-tsc version 0.39.5. This discrepancy may result in different type checking behavior. vue-tsc: /home/tomas/Desktop/tes ...

Expanding and collapsing UI elements within an ngRepeat loop in AngularJS

I have been attempting to incorporate collapsible panels within an ngRepeat loop. Below is the code I have been using: <div class="panel panel-default" ng-repeat="element in elements"> <div class="panel-heading"> ...

Tips on making sure video player controls are always visible on an HTML5 video player

Can anyone help me with my HTML video player? I am trying to make the control bar display always, instead of just when hovered over. Any suggestions? ...

I'm having trouble getting the [resetFilterOnHide]="true" functionality to work with primeng 5.2.7. Can anyone provide a solution for this issue?

I'm experiencing an issue with the p-dropdown component where the [resetFilterOnHide]="true" attribute isn't working as expected. When I type in the filter bar, close the dropdown by clicking outside of it, and then reopen it, the entered filter ...

What is the Best Way to Retain My Firefox Settings While Handling a JavaScript Alert?

I'm encountering an issue when trying to download a file by clicking on a link. I have set my Firefox preferences to save the file in a specific location. However, upon clicking on this particular link, a popup appears that I must accept before the do ...