Enhancing Graphs with Vertical Lines

I'm currently utilizing chartkick in conjunction with chart.js to create some line charts. I am attempting to incorporate a vertical line that displays a user-inputted note, but unfortunately, I am facing challenges getting the annotations plugin to function properly.

<line-chart width="80vw" :dataset="dataset" :library="chartOptions" class="animated slideInRight delay-0.01s" v-else :data="photon.data.tempF" ytitle="Temperature F" :colors="['#ff0000']" :download="true"></line-chart>





 chartOptions: {
                     annotation: {
                        annotations: [
                        {
                            type: "line",
                            mode: "vertical",
                            scaleID: "x-axis-0",
                            value: "Wed Jan 23 2019 10:31:27 GMT-0500 (Eastern Standard Time)",
                            borderColor: "red",
                            label: {
                            content: "TODAY",
                            enabled: true,
                            position: "top"
                            }
                        }
                        ]
                    },
                    tooltips: {
                        callbacks: {
                            label: function (tooltipItem, data) {
                                console.log(data.labels[tooltipItem.index])
                                console.log(tooltipItem)
                                return [data.datasets[0].data[tooltipItem.index],data.labels[tooltipItem.index]]
                            }
                        }
                    },
                    height: '400px',
                    pan: {
                        enabled: false,
                        mode: 'xy',
                    },
                    zoom: {
                        enabled: true,
                        mode: 'x',
                    },
                    drag: true,
                    gridLines: {
                        zeroLineColor: "rgba(0,255,0,1)"
                    },
                    },
javascriptvue.jschart.jschartkick

Answer №1

The issue with the annotations not appearing was due to the fact that I had forgotten to include and initialize it in my main.js file

import ChartAnnotationsPlugin from 'chartjs-plugin-annotation'
Chart.plugins.register(ChartAnnotationsPlugin)

Answer №2

annotations parameter value corresponds to the value on either the x-axis or y-axis. In order to ensure that annotations' value falls within the range of the x-axis and matches one of them, you must convert the time accordingly:

annotations: [
  {
    type: 'line',
    mode: 'vertical',
    scaleID: 'x-axis-0',
    // For example, set a value of "2019/1/23" to be able to align with the x-axis category
    value: '2019/1/23',
    // value: 'Wed Jan 23 2019 10:31:27 GMT-0500 (Eastern Standard Time)',
    borderColor: 'red',
    label: {
      content: 'TODAY',
      enabled: true,
      position: 'top'
    }
  }
]

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

The behavior of CSS position: sticky varies depending on whether the user is scrolling up or scrolling down

I am experiencing an issue in my Vue CLI app where a component with the position: sticky CSS property is being partially hidden under the top of the browser when scrolling down, but works correctly when scrolling up. This behavior is also observed on my Ga ...

javascriptcssvue.jscss-positionvuex

Load HTML table values dynamically with Ajax post page load in PHP

My goal is to retrieve the connectivity status of available servers in a database on a PHP page. <tbody> <?php foreach ($data['servers'] as $server) { ?> <tr> <td class=""><?php echo $server->server_ ...

javascriptphpjqueryajaxdynamic-tables

Troubleshooting Failures in RequireJs Optimization for Windows

Currently working on optimizing a requirejs-based project on a Windows system. I have placed the r.js.cmd in the Scripts folder, along with the nodeBuild.js file containing the configuration settings. ({ baseUrl: ".", paths: { jquery: "empty:" }, name ...

javascriptnode.jsrequirejs

Avoid cascading of the 'display' property in JavaScript styling to prevent inheritance

Is there a way in Javascript to toggle the visibility of a larger portion of HTML without affecting inner display properties with display: <value>? Despite setting an outer display property using Javascript, the inner display properties are also alt ...

javascripthtmlcss

Ways to obtain the output of an If/Else statement

It seems like I might be missing something, but I am unsure of how to extract the result from an else-if statement. Take this code snippet that I've been working on for example: In this scenario, the output would read "It's warm!", and what I wa ...

javascriptif-statement

I am looking to display the results table on the same page after submitting a form to filter content. Can you provide guidance on how to achieve this?

Could someone provide guidance on how to approach the coding aspect of my current issue? I have a search form that includes a select form and a text box. Upon submission, a table is generated with results filtered from the form. Should I utilize a sessio ...

javascriptphpjqueryformssession

The error message "404 Not found" is returned when attempting to retrieve a Google spreadsheet

I have exhausted all of my options on the web trying to retrieve my Google spreadsheet as a json file. $.getJSON() However, I am constantly receiving a 404 Not Found error. When I publish to the web, the URL I get is: https://docs.google.com/spreadsheets ...

javascriptjqueryjsongoogle-docs-apigoogle-sheets-api

Encountering issues while attempting to modify the route from a particular Component

I have encountered an issue with changing routes in React from a specific component to another. Switching between '/' and '/login' works fine, but when the active route is '/menu-management', clicking on the Link causes an err ...

javascriptreactjsmaterial-ui

Updating the contents of a list with new additions and removals

Struggling with a simple issue that I just can't seem to find a solution for. My problem involves a list based on 5 checkboxes. abc.html <li id="DisplaySelection"> </li> {{form.Test1 }} //checkbox1 .... {{form.Test5 }} //checkbox5 ma ...

javascripthtmldjango

Side menu in Ionic - showing different links depending on whether the user is authenticated or not

I am working on an Ionic app with a side menu that is used for multiple pages. I want to customize the links in the side menu depending on whether the user is authenticated or not. This is how I have set up my routes: module.export = angular.module(' ...

javascriptangularjsionic-frameworkmenuionic-view

Is there a PHP function that functions similarly to JavaScript's "array.every()" method?

As I work on migrating JavaScript code to PHP, I am facing the challenge of finding a replacement for the array.every() function in PHP. I have come across the each() function in PHP, but it doesn't quite meet my requirements. ...

javascriptphparrays

Retrieve pairs of items from a given variable

Containing values in my 'getDuplicates' variable look like this: getDuplicates = 100,120,450,490,600,650, ... These represent pairs and ranges: Abegin,Aend,Bbegin,Bend My task is to loop through them in order to apply these ranges. var ge ...

javascriptjquery

Discovering escape characters while iterating through a string in javascript

I have a situation where I must rearrange a string into an array for a unique user display. Whenever encountering an escape character (such as \n for a new line), it needs to be added as a separate item in the array. For example, if the string is: sa ...

javascriptarraysstringhtml-escape-characters

"Facing an issue with my handleChange function not getting triggered in MaterialUI. Can anyone

Why isn't my handleChange function being invoked with the TextField component from Material UI? Even though I can input values in the text fields, the component's state is not updating. Here is the Auth component: const Auth = () => { cons ...

javascriptreactjsmaterial-ui

creating a clickable link in a datagrid using asp.net

In my DataGrid, I have organized information into 3 columns: a Problem id, Solution, and Hyperlink. I am looking to have the hyperlink open in a new window with a parameter of ProblemId. Additionally, I would like the size of the new window to be small. ...

c#javascript.netasp.netajax

Can we incorporate various CSS libraries for individual components on our React site?

Let's say, I want to use different CSS libraries for each of my components - Home, About, Contact. Would it be feasible to utilize material ui for Home, semantic ui for About, and bootstrap for Contact? If so, what is the process for incorporating t ...

javascriptcssreactjsmaterial-uisemantic-ui

What could be causing my function to not successfully retrieve elements based on their text content?

A function called matchTagAndText is designed to take two arguments: a selector and text, checking if any matched elements contain the specified text. The function code is as follows: function matchTagAndText(sel, txt) { var elements = document.queryS ...

javascriptarraysdom

Walls that collide in three.js

I am currently developing a game using three.js and despite being new to this field, I have extensively studied collision documentation. To handle collisions between my boat (inside a cube) and the islands (contained in cubes), I implemented raycasting. He ...

javascriptthree.jscollision-detectionraycasting

Checking for the existence of a plugin's function: A comprehensive guide

Here is the code I am working with: $(document).ready(function() { $('.tabs-container').tabs({ tabs: '.bar', tabs_container: '.foo' }); }); Occasionally, the tabs plugin script fails to load, resul ...

javascriptjquery

Empty Angular-chart.js Container

How can I resolve the issue of getting a blank div and no output while trying to display a chart where the options, labels, and other data are initialized in the TypeScript controller and then used on the HTML page? I added the angular-chart.js library us ...

javascriptangularjstypescriptangular-chart