Questions tagged [chartjs-plugin-annotation]
35 questions
1
vote
0 answers
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
content: "Test label",
Does this mean I…
Omer Lubin
- 551
- 2
- 8
- 24
0
votes
0 answers
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…
Rich Stewart
- 21
- 4
0
votes
2 answers
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 average(ctx) {
const values =…
Sig
- 5,476
- 10
- 49
- 89
0
votes
0 answers
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 expectation should be labels need to be show at top of…
FrontEnd
- 21
- 4
0
votes
1 answer
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 25
my code:
for (const valueObj of valueList) {
…
a.k
- 3
- 2
0
votes
1 answer
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";
import { Line } from "react-chartjs-2";
import annotationPlugin from…
blas
- 1
- 1
0
votes
1 answer
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%" placed on the very right side of the horizontal line.
I…
amu03
- 129
- 11
0
votes
1 answer
Chart.js annotation plugin - Box not being displayed correctly
I'm using chart.js@2.9.4 and chartjs-plugin-annotation@0.5.7 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 related with my x-axis, since the values are…
Juan Osorio
- 15
- 4
0
votes
1 answer
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 intervals, but cannot find something from their docs.
The result is...:
code…
flba
- 5
- 3
0
votes
2 answers
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: {
size: 8,
weight: 'bold'
},
…
IngBond
- 601
- 1
- 5
- 18
0
votes
1 answer
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 registered. I have tried several different versions of…
Will Rollason
- 125
- 1
- 1
- 10
0
votes
1 answer
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-annotation/latest/samples/charts/bar.html
const…
Lloyd
- 1,395
- 6
- 20
- 37
0
votes
2 answers
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 is how it looks now.
But I want it to appear…
CanUver
- 1,756
- 2
- 6
- 19
0
votes
1 answer
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 past with earlier versions, but this version…
Raluca Micu
- 39
- 7
0
votes
1 answer
Use chartjs-plugin-annotation 0.5.7 in Charts 2.9.x with React
I'm not able to configure the plugin chartjs-plugin-annotation in Chartjs.
From the doc, I installed V 0.5.7 because I'm using Chart.js V 2.9.4.
Here my configuration:
register the plugin:
import Chart from "chart.js";
import annotationPlugin from…
michele buzzoni
- 97
- 1
- 3
- 9