41 questions
1
vote
0
answers
35
views
How to incorporate draggable feature into vue-chartjs?
I created a BarChart using vue-chartjs and have marked the threshold values using arrows
Here's the code
<template>
<Bar :data="data" :options="options" />
</...
- 103
0
votes
0
answers
197
views
Vue Chart.JS plugin-annotation throwing error: Cannot find module 'chartjs-plugin-annotation' or its corresponding type declarations
I am having trouble configuring chartjs-plugin-annotation.
I have it setup as a dependency in my vue project as well as chart.js
Versions:
"chart.js": "^4.4.2",
"chartjs-...
0
votes
0
answers
62
views
Render Image update when I click legend chartjs
In ChartJs I want to custamize the bar chart.I'm placed the images in empty places if i click on the legend that images cannot be hide. I made a attendance bar chart if person is absent that place ...
0
votes
1
answer
184
views
react-chartjs-2 not rendering vertical arbitrary line using chartjs-plugin-annotation
I am trying to show a arbitrary vertical line in my Line Chart. In line chart on X-Axis there is timestamp and on Y-Axis some data point integer.
I want to an arbitrary vertical line in my Line Chart ...
- 397
0
votes
0
answers
56
views
ChartJS - mark multiple regions on chart
Please advise,
i have ChartJS graph (4.4.1) which has X of 'time' type. I need somehow to select 3 periods on X axe.
I'm thinking of some trigger (checkbox) for activating each period selecting, so ...
- 807
0
votes
1
answer
129
views
It's not possible to read the Y property of the context element from a Chart.js BoxAnnotation
I'm new to using Chart.js and I've done a lot of research, but haven't found anything that could help me, so I'm reaching out to the community for assistance.
I'm working on a project using Chart.js ...
0
votes
0
answers
367
views
Compiler error when using chart.js v3.0 & chartjs-plugin-annotation v1.4.0
I'm using Angular 14 and have added the following imports and have registered as follows in my component where I'm using chart.js.
import { Chart, registerables } from 'chart.js';
import 'chartjs-...
- 21
0
votes
2
answers
181
views
Render annotation in timeseries chart
What's the correct configuration to add a line annotation to a chart.js chart where the x-axis is of the 'timeseries' type?
Without the timeseries the following code works as expected.
function ...
- 5,914
0
votes
0
answers
878
views
Labels are cutoff when using chart js and chart annotation plug in to draw vertical line with label on top
I have created line chart using chart.js 4.2.1 and created vertical line using chartjs plugin annotation 2.2.1, I tried to show the label at top of vertical line. But the labels are cutoff.
But ...
- 31
0
votes
1
answer
153
views
annotation library for chartjs
annotation library for chartjs, i have chart with labels 0, 1, 4, 8, 12, 15, 20, 24, 25, 28, 32, and i have label 7.5 for adding vertical line to that label but this library adding it between 24 and ...
- 3
0
votes
1
answer
2k
views
The annotation message does not appear. with Chart.js , react-chart-js , and chartjs-plugin-annotation
Show code
import React from "react";
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend,
} from "chart.js";
...
- 1
0
votes
1
answer
2k
views
chartjs question: annotation label position problem
question about Chartjs 3.x and chartjs-plugin-annotation
I have created this graph (except the green text) using chartjs and chartjs-plugin-annotation,
but I cannot get the green text "100%&...
- 359
0
votes
1
answer
1k
views
Chart.js annotation plugin - Box not being displayed correctly
I'm using [email protected] and [email protected] in a Vue 2 project. I was able to build a chart with a line but the box is always expanded out to the edges, I'm not sure if the issue is ...
- 15
1
vote
0
answers
701
views
Chart.js annotation two vertical line on time axis and two different color
What could be the possible reasons for the vertical line not appearing on the graph despite searching for mistakes in the code and adding the annotation plugin? Additionally, how can two different ...
- 48
1
vote
1
answer
381
views
Cannot find a way to correctly use chartjs annotation plugin with react
I am currently trying to use the plugin chartjs-plugin-annotation in my react project.
Unfortunately, it is not working...
He is my implementation :
import React, { Component } from "react";
...
1
vote
1
answer
726
views
import chartjs plugin annotation
I get the flowing error when importing chartjs plugin annotation
Uncaught TypeError: t.defaults.describe is not a function
at chartjs-plugin-annotation.min.js:7:22552
at Array.forEach (<...
- 11
0
votes
1
answer
820
views
Chartjs plugin annotation timestamp
I am using Chart.Js "2.8.0" and chartjs-plugin-annotation "0.5.7" to display boxes based on timestamp intervals
I am trying to show something like this:
based on timstamp ...
- 5
0
votes
2
answers
1k
views
Chart js (plugin annotation) label overflow issue
Need to know possible solutions to resolve such issue:
My annotation object looks like this:
{
type: 'label',
borderRadius: 0,
borderWidth: 0,
content: content,
font: {
...
- 658
0
votes
1
answer
1k
views
vertical line annotation on horizontal bar in chart js react not showing
I have a horizontal single bar chart showing percentage inside of an ag-grid row, I would like to add a line at a certain percentage to show a target. I am using the annotations plugin which is ...
- 145
0
votes
1
answer
2k
views
ChartJS Annotation line on stacked bar chart
I cannot get the annotation line to work on a stacked Bar Chart.
Example JS Fiddle: https://jsfiddle.net/cledwyn/rd5q6Lsz/10/
I have the standard Annotation per https://www.chartjs.org/chartjs-plugin-...
- 1,393
0
votes
2
answers
285
views
i can't create a line vertically with react annotation
I'm trying to create a line to show today's date with the help of react annotation, but I'm not successful. My line always stays horizontal between the x and y axis. What could I be doing wrong? This ...
- 1,774
1
vote
1
answer
540
views
ChartJSNodeCanvas plugin chartjs-plugin-annotation creates error: HTMLCanvasElement is not defined
I want to create my chart as png on the server.
The X axe is based on time, therefore I need the date adapter.
const chartJSNodeCanvas = new ChartJSNodeCanvas({
width: 512,
height: 400,
...
- 17
2
votes
1
answer
438
views
chartjs-plugin-annotation box in Django app
I have chartjs v2.9.3 in my Django app and it works great. Now I need to add a box to one of my charts using chartjs-plugin-annotation, and I've followed all the steps, but I can't get it to work.
I'...
- 373
0
votes
1
answer
460
views
Scatter plot in Chart.js with annotations
I've created a scatter plot in Chart.js v3.7.1 and I'm trying to add some label annotations (chartjs-plugin-annotation is v1.4.0) to it which don't seem to be working. I've added annotations in the ...
- 51
0
votes
1
answer
5k
views
Trouble configuring chartjs-plugin-annotation in Chart.js
I'm encountering difficulties while trying to configure the chartjs-plugin-annotation plugin in Chart.js.
Based on the documentation, I've installed version 0.5.7 of the plugin because I'm using Chart....
0
votes
1
answer
834
views
ChartJS Annotations display custom label
is there any way to display a custom label on mouse hover chartJS annotations like it displayed on ChartJS?
For example, when you create a line chart of points, and you hover one of the points, it ...
- 9
1
vote
0
answers
2k
views
Chartjs Plugin Annotation does not work (it is registered)
Box annotation wont render even though the configuration is correct
chartjs version: 3.6.0
chartjs-plugin-annotation version: 1.0.2
The plugin is registered like this:
import { Chart } from 'chart....
0
votes
2
answers
2k
views
Annotation problem with ng2-charts in Angular 11
i need to show a fixed line in my chart (like "Test Label" in the image):
So I added chartjs-plugin-annotation in to my Angular 11 project so I have those versions:
"chart.js": &...
- 629
0
votes
1
answer
1k
views
Chart.JS - multiple - box - annotations - displays only the last box
I am using Chart.Js and chartjs-plugin-annotation to display multiple line graphs and annotations to split the chart area in seven zones of different colors.
Right now I am trying with two boxes to ...
2
votes
1
answer
650
views
Grabbing the title in plugin for ChartJS
I want to figure out how to grab the title in a plugin in ChartJS I have the title in the configuration like so:
title: {
display: true,
...
- 25.7k
0
votes
1
answer
274
views
Draw vertical thresholds with chartjs-plugin-annotation and vue-chartjs
I try to position 2 vertical lines which are my thresholds for list of results for some tests.
My problem is that when I try to take value which is not part of the results, The lines are not shown.
...
- 1,071
1
vote
1
answer
3k
views
Annotations are not displayed in Chart.js
I'm sorry for my poor English.
I'm trying to display a horizontal line in a graph using vue-chartjs and chartjs-plugin-annotation.
The graph appears and the options are applied, but the horizontal ...
- 47
0
votes
1
answer
167
views
Chartjs annotations-plugin: Can I add multiple vertical lines to identically named x-axis labels?
I have a chartjs graph with an x-axis consisting of the hours of the past three days. Because it is 3 days, each hour appears in the x-axis 3 times. I want to draw vertical lines at each 12:00am, but ...
- 67
1
vote
1
answer
1k
views
How to import chart.js plugin into script on typical html site
I have a index.php with html and script sections. I have few canvas with charts on it and now I need to import plugin 'chartjs-plugin-annotation ' which looks like typical ES6 module. If I used React ...
- 23
1
vote
1
answer
720
views
Chart.js annotations in Vue.js break when defined in data ()
I've run into a problem using chartjs-plugin-annotations in a Vue.js application
We've been successfully embedding ChartJS charts in our Vue applications for a while with the config for the chart ...
- 2,692
3
votes
1
answer
2k
views
how to show data label on barchart using chart.js in Angular10 project?
In Angular project I am implementing charts using chart.js latest version 2.9.3
I implemented doughnut chart, stacked bar chart perfectly,,Now I have to implement stacked bar chart which contain data ...
- 1,024
1
vote
2
answers
4k
views
Angular 9 - chartjs-plugin-annotation error
I'm trying to draw a vertical line on my ng2-charts chart. In order to achieve this, I've installed the chartjs-plugin-annotation package. Unfortunately, it is not working and I cannot figure out what'...
- 891
1
vote
0
answers
608
views
chart.js Annotation Plugin - multiline annotations
I have created a graph using react-chartjs-2 with annotation plugin. The documentation simply states:
// Text to display in label - default is null. Provide an array to display values on a new line
...
- 679
5
votes
2
answers
3k
views
ChartsJS Annotations Plugin - Can you create a tooltip to accompany an annotation?
im trying to figure out how I can add a tooltip when I hover/mouseover the vertical line annotation I've drawn:
annotation: {
annotations: [{
"drawTime": "afterDatasetsDraw&...
- 185
2
votes
1
answer
2k
views
Correct config location of chartjs-plugin-annotation with ng2-charts?
I'm using ng2-charts to draw a bar chart in my Angular application. At some point I had to add static lines to my charts, and I decided to use chartjs-plugin-annotation. Connecting these two libraries ...
- 6,862
4
votes
0
answers
2k
views
Chart.js annotations working but causing console error in Angular 5
I have a dynamic chart generating component based on the data that is received. I create a chart instance inside the component and fill out the properties. I imported the chartjs-annotate-plugin as
...
- 41