Learn how to incorporate a line into your bar chart using Chart.js

Does anyone know how to add a straight line to a Chart.js - Bar Chart to represent achievements, such as marking 75/100 as a passing point? I'm looking for something like a thick line on the grid...

For reference, here is an example of what I'm trying to achieve:

If you check out this fiddle (http://jsfiddle.net/rnX2Z/1/), you'll see that I attempted to add a straight line at the value of 75000 using this code:

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,200);
ctx.lineTo(500,200);
ctx.stroke();

I've been struggling with adding this line to the canvas. Would appreciate any guidance or suggestions on how to improve this code or perhaps need to modify the .js file. Any help would be greatly appreciated as I aim to enhance the overall look of my charts. Thank you!

Answer №1

If you're using a chart from highcharts.com, like in this example...

Check out the demo here.

<script type="text/javascript" src="http://code.highcharts.com/highcharts.src.js"></script>
<div id="container" style="height: 400px"></div>

Then you'll need a lot of Javascript code to make it work... including JSON data for plotting lines and colors.

I'm not sure about ChartJS - I couldn't find information on that. Maybe it's SVG?

I'm not sure why there was a negative reaction before I posted this answer... just trying to help anyone who might read this.

Cheers, Simon

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

Issues have arisen with jQuery methods functioning properly within the Owl Carousel

My owl carousel displays rotating boxes that each contain a button. When I click the button in a box, I want to switch a class on a div within that same box. This functionality works perfectly until I wrap it in an owl carousel and initialize it. Once th ...

Pattern matching to restrict specific characters

Currently, I am facing an issue with using JQuery Validate to implement a regex pattern that detects the presence of 3 specific characters (I, O, or Q - case insensitive) in a 17-character alphanumeric string and displays an error message. Although I am ab ...

The functionality of AC_FL_RunContent is failing after an UpdatePanel postback

In the code for the repeater item, I have a JavaScript function that calls AC_FL_RunContent to display a flash file when a link within the repeater item is clicked. The datasource I am using displays the first page of video links with five items per page, ...

Centered at the bottom of the screen lies a Bootstrap button

As a beginner with bootstrap, I am currently exploring new concepts and experimenting with different features. One thing I am attempting is to center a bootstrap button at the bottom of the screen. Here is my current code: .bottom-center { position: a ...

Having trouble adjusting the grid's width property

My personal page features a section dedicated to displaying my skills and proficiency in various programming languages (although it may not be entirely accurate). I am struggling to adjust the width of the Skill grid to match the layout of the other grids ...

Achieving a Side-Along Sidebar with CSS, Fully Embracing

I'm encountering an issue with achieving 100% height using CSS. Despite my extensive search for tutorials and solutions, I haven't been able to achieve the desired results. My layout consists of a sidebar and a main column where the content will ...

Enhance the functionality of your Rails application by implementing Ajax or jQuery to asynchronously load table elements separately from the page

Currently, I am facing an issue with a page that displays a list of user sites. The problem lies in the fact that I am making an API call for each site to check its status, which is causing the page to load very slowly. To address this issue, I would like ...

working with html data in a bootstrap modal using javascript

Utilizing an id, I pass data to a bootstrap modal and link that id with stored data. $("#fruit").html($(this).data("fruit")); In addition, I am appending data to the bootstrap modal $('#mymodal').find('.modal-body').append('< ...

Some pages are experiencing a lack of visibility of Tinymce buttons

Currently, I am utilizing the tinymce plugin for image upload and it is functioning properly on one specific page. However, on a different page, there is a sidebar located on the left side while the main content area is positioned on the right side. The t ...

When a user repeatedly clicks the "see more" button, they will continue to receive no results multiple times

I have created a partial view and added the rendering in the Index page. A button (See More) triggers an AJAX call to the controller each time it is clicked, appending new data to the screen. The issue arises when there are no results left to display, and ...

Reorganize column layout with Bootstrap grid and modify sequence

Below is an image showcasing the desired change: https://i.sstatic.net/mnUUq.png Currently, the page layout consists of two main columns: a sidebar on the left with rows, and the main body on the right, formatted in a 3x9 grid. My goal is to have the firs ...

issues with passing values on second click using ajax and jquery

Just starting out with JavaScript, jQuery, and AJAX and running into issues with a basic script to load more data from a database upon button clicks. The first load more button click works fine. But subsequent clicks do not pass values and do not execute. ...

What is the best way to choose items with identical IDs and only change the ID to a new random one?

In the scenario where I have multiple input elements with the same id: <input type="text" id="first" attribute1="test" attribute2="hello" attribute3="happy"> <input type="text" id="first" attribute1="test" attribute2="hello" attribute3="happy"> ...

`A dilemma with dynamic tooltip functionality in JavaScript`

I am currently utilizing the Tooltipster jquery plugin, which I find to be quite useful. However, I am facing a challenge in making my tooltips dynamic. Despite thinking it should be a simple task, I seem to be struggling with it. It could be due to fatig ...

Import HTML document into a Bootstrap Popup

Currently, I am working on creating a modal that loads content dynamically. Below is the JavaScript code I have been using for this task: function track(id,title) { $('#listenTrack').modal('show'); $('#listenTrack').f ...

Transfer the selected user content from one canvas to another

After successfully implementing a simple selection area on canvasA, I encountered an issue with copying the area to canvasB. The user is supposed to select an area and then see that selection appear on another canvas once they finish making the selection b ...

Arranging multi-level array with distinct keys and values

Users have the ability to add custom fields on a form. Note: I am looking for ways to streamline and organize the code more efficiently, with further explanations to follow. https://i.sstatic.net/2xMQe.jpg The HTML structure has been simplified for clar ...

Difficulties encountered when adjusting the size or reducing the images in a Cycle2 slideshow

Greetings to all fellow coders! Thank you for taking the time to read this post. I am currently facing a challenge in my web development project where I am trying to make my Cycle 2 slideshow images resize and reposition alongside other divs when the wind ...

Place a locator on the variable at the identical level

My objective is to locate an element with both an id and a class. I achieve this using the following code snippet: return element(by.css('#right.closed')).isPresent(); While this method works correctly, I am looking to enhance it by introducing ...

Use JavaScript to access the dynamic checkboxes in an ASP table by utilizing the functions checkall, uncheck, and middlestate

Currently, I am working on creating a privilege group checkbox similar to the one shown in this link. On my page, I have created an empty control that looks like this: <fieldset> <legend><asp:CheckBox ID="GroupName" runat="server" TextAl ...