12,384
questions
1
vote
0
answers
275
views
Error: Cannot read properties of undefined (reading 'plugins')
I'm trying use chartjs-plugin-colorschemes plugin, but in your documentation says that I need install and import plugin, I use these commands:
yarn add chart.js chartjs-plugin-colorschemes react-...
0
votes
0
answers
38
views
How can I display datalabels after chart draw - Chart.js
I want to display datalabels after all of the chart animation completed.
But datalabels are already shown before the chart animation ended in my code.
Additionally, I'm not sure that my code is right ...
- 1
1
vote
1
answer
44
views
I need to format data from a json with chartjs with reactjs to display data with 2 x axes
I can't understand what I'm doing wrong, I need it to be like this example:
Corretly graphic as example
This is the json data I receive:
[
{
"label": "Others",
"type&...
0
votes
2
answers
151
views
How do I change the font of Chart.js/React-Chartjs-2 labels?
I have a Next.js personal website that I want to add features to. One of these features is a Chart using Chart.js + React-Chartjs-2. I use App Router.
The issue is that the fonts used in the chart ...
- 117
0
votes
2
answers
99
views
Prevent chart to resize due to long labels
i am using chart.js and react-chartjs-2. I have this polar chart and a dropdown at top left, as seen in the screenshots, they get resized due to long labels. when I give an empty array to display no ...
- 1,913
1
vote
1
answer
71
views
How to center the ticks between grid lines in Radar chart?
The problem is that I don't know how to position the ticks (numbers from 1 to 5) between the grid lines. Currently it is showing above the grid lines:
Here is the javascript code:
const ctx = ...
- 87
0
votes
1
answer
50
views
I want to make only border top and border bottom to a doughnut chartjs
Problems :
I have the border left who add an triangle border left and right
And i have the natif problem of responsive legend size, i want to add css on segment but not on legend of this segment.
** ...
- 1
1
vote
0
answers
44
views
ChartJS Category Axis for line chart to behave same as bar chart
I have a chart which shows different datasets depending on what has been selected.
Some datasets are line charts and some are bar charts all using the same categories on the x-axis.
Now my problem is ...
- 1,073
2
votes
0
answers
87
views
Chart js 2.9.4 - showing tooltip of another column in bar chart
I am using Angular 4 and Chart js 2.9.4 - bar chart and pie chart where I am hovering on 2nd column and showing me tooltip of 1st column.I have tried different configuration in tooltips using position,...
- 580
0
votes
0
answers
51
views
Uncaught runtime errors: ERROR dispatcher is null
Trying to use chart.js, but everytime i try fetch the data it throws me 'Uncaught runtime errors:
ERROR
dispatcher is null' this error. The page doesn't render at all, everything on there is gone, ...
- 11
0
votes
1
answer
131
views
how to make chartjs-plugin-colorschemes 0.4.0 work with Chart.js v4.4.3
basically im doing everything like written in the doc, so
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script type="...
- 3,933
0
votes
2
answers
50
views
How to have line span from 2 points in chartjs?
I currently have a chart with a dynamic line and a horizontally static line:
Right now, the code manually types out the horizontal data points 50 times:
var data1 = {
datasets: [
...
- 488
1
vote
0
answers
39
views
Indicate label for Horizontal line
I'm trying to find a way to add a label to show what red horizontal line indicates (in this case it's target) Can anyone help me to add a label for horizontal line which cross through y = 100, please?
...
0
votes
0
answers
121
views
Chart.js 2.9.3 - Issues with time-based charts and zooming
I have a problem with chart.js 2.9.3.
The program is quite simple:
You must choose a time period
You must choose whether the X axis will be spatial (kilometers) or temporal (dates)
You must choose ...
0
votes
1
answer
39
views
How do I change the font color of this chart in chart.js
How do I change the font color of this chart in chart.js?
can anybody help me
this is my code:
const ctx = document.getElementById('chart');
// Chart.defaults.color = '#000';
new Chart(ctx, {
type:...
- 1
0
votes
0
answers
49
views
chart.js graph elements shifting position during continuous updates
I have implemented a Chart.js graph in a Blazor project for monitoring a flow. The x and y values are updated approximately once every second (not at exact intervals) when window.updateHistory(...
- 370
0
votes
0
answers
46
views
Chart.js line plot with multiple overlapping datasets
I'm trying to draw several lines on the same graph.
The different datasets have different labels (the X axis comes from a TIMESTAMP sql).
Here, the different datasets are concatenated, but they should ...
- 83
1
vote
0
answers
38
views
ChartJS Tooltips aren't correctly displaying. What am I doing wrong?
I am trying to add extra information to my tooltips (when a user hovers over data point in a line chart) and the only information showed is the Player Count. It should include Player Count, Game Time, ...
- 11
0
votes
2
answers
74
views
Trouble getting a candlestick graph to plot
The relevant parts of package.json are:
"@angular/core": "^18.0.3",
"chart.js": "^4.4.3",
"chartjs-chart-financial": "^0.2.1",
...
- 893
1
vote
0
answers
55
views
How can I add value text after graph with chart.js
I tried to add the value text that's stored in the var data1, and var data2 after the two graphs, but it won't show, I tried to solve this issue with the plugin "afterDatasetsDraw".
What &...
0
votes
1
answer
178
views
How do I create charts on my javascript website using data from mySQL database. Using EJS front-end
I am making a website where I can enter data for golf course greens, and then analyze it.
I am using express in my backend to route to my ejs pages. I am also using a mySQL database to store the data.
...
0
votes
1
answer
47
views
Rotate arrow radial axis radarchart chart.js
In reference to an question I asked before.
How to get radar chart coordinates using getValueForDistanceFromCenter with Chart.js?
I would like to rotate the arrow like a clock based on degrees. I can ...
- 11
0
votes
0
answers
63
views
Overflowing tooltips with custom callback
I use ng2-charts 6.0.1 and with using of line chart label callback and following settings:
lineChartOptions = {
scales: {
xAxis: {
type: 'time',
ticks: {
source: '...
- 346
0
votes
3
answers
110
views
How to have two consecutive points in a line chart be in the same category?
I'm trying to create a line chart that can have up to two points in one category in chartjs. In the example, the labels and data are each passed as arrays, so each label can only have one point. I ...
- 36
0
votes
1
answer
77
views
In Chartjs, how can I set the scales.y.min value externally
I am using a linear chart and using it to visualise waveshapes that can be quite complex. The application requires the data y range to be pre-scaled based on variable external requirements, with ...
- 11
0
votes
1
answer
87
views
Why is there a 1px gap between the background fill and the canvas edge in my Chart.js line chart?
I'm using Chart.js and react-to create a line chart, but I've noticed a small issue with the background fill. The line chart extends to the edges of the canvas as expected, but the background fill ...
- 447
0
votes
0
answers
76
views
How to style Chart.js bar chart? I have an example of Chart
I need to create some bar chart.
This is a reference:
https://i.sstatic.net/Zj4G3BmS.png
This is what I have for now:
https://i.sstatic.net/pzPxKaZf.png
I marked my 3 questions on the reference with ...
- 1
2
votes
1
answer
1k
views
Upgrading to latest angular 18 with ng2-charts errors on nsg-serve
Upgrading angular 18 with ng2-charts 6.0.1 on running n-serve throws error as below
imports ng2-charts, chart.js,chartjs-plugin-annotation. nothig helps and throws error.
I am trying to use in npn -...
- 149
0
votes
0
answers
116
views
How can I improve React Leaflet performance when rapidly updating a marker position?
I'm working on a page which reads GPX files (a series of lat/lon GPS points) and plots the route using React Leaflet as well as showing an elevation profile using react-chartjs-2.
When hovering over ...
- 1,330
0
votes
0
answers
41
views
How do I add padding for a grid in Line Chart-JS?
I want the point area with a tooltip to not break if the maximum value is reached.
There should be padding/margin in front of the top and bottom gridlines
I use "react-chartjs-2", its my ...
0
votes
1
answer
33
views
Show only the first 2 bars on the Y-Axis using Chart.js? [closed]
I have a bar graph which needs to display a set of values like
Total Likes (likes on Facebook+Twitter+LinkenIn...)
Total Comments(comments on Facebook+Twitter+LinkenIn...)
My dataset currently holds ...
- 107
0
votes
0
answers
43
views
on second visit chart and button not working
<?php
if (!isset($_SESSION)) {
session_start();
}
if (!isset($_SESSION["loggedin"])) {
if (!header("Location: index.php")) {
header("Location: index.php&...
- 41
1
vote
2
answers
287
views
How can I force a re-render react component Chart(react-chart.js) and update the custom plugin?
I made tooltips for all points using the plugin with two background colors dark and light. But the plugin works only after refreshing page. I made a code sandbox to show a problem. When you'll open ...
0
votes
1
answer
38
views
how to position elements in the many layers of this tier circle, distributed evenly and equidistant from the center?
Image of the css concentric circles i have
I need to display items dinamically given a list of jsons, but what i need to know is how to get all the items in the correct position. I thought of doing ...
0
votes
1
answer
72
views
Chart.js use one canvas to display different charts based on user selection (button)
I'm building a program that will display different economic data charts for different countries (currently between Canada and US). I was hoping to have one canvas for each type of chart and change it ...
- 41
0
votes
1
answer
55
views
How do i insert a value into a chart?
So i have this code that makes a bar chart that would shows a teaching points an university has. But, when i try to choose a university, the value of teaching1, 2 and 3 would just sit empty. Heres the ...
0
votes
1
answer
72
views
Chart JS update transition - zoomed in blurry chart
I'm doing what I think is a pretty standard destroy() and recreation of a chart using Chart.js. The chart updates as expected but I see a strange zoomed-in, blurry chart during the transition. I can't ...
- 637
0
votes
0
answers
53
views
(QuickChart / Chart.Js) First X-Axis Tick Mark Not Displaying
Im using QuickChart to generate a Gantt chart (using ChartJs v2) and my first x axes tick mark is not showing up. I've tried setting the xAxes timeUnit to round:'week', which gets me a tick on the ...
- 31
0
votes
0
answers
64
views
Error message in console while using Chart.js with NextJS: Canvas is already in use
I am trying to display some basic data within chartjs and nextjs. below there is the main code and some key notes to consider
Main code having the problem
import Chart from "chart.js/auto";
...
- 1
1
vote
0
answers
209
views
Chartjs line chart with tension not filling whole area?
I am using Chartjs(4.4.3) and react-chartjs-2(5.2.0) to show line chart in ui
I am having issue with area fill in line chart,
It is not filling completely for certain width
It happens only on latest ...
- 31
0
votes
0
answers
25
views
Render bar statics with library charts
I used a library chartjs3.9. I want to render some graphics with dynamic data, but I don't know why the data is not being rendered. Here is my code:
the result for request to db is for example: b2b:[...
0
votes
0
answers
28
views
Not able to download different tab components data containing graph data in pdf format
I have two tabs with different graphs created using chart.js.
TabOne.vue
<template>
<div class="tab-content tab-one" :class="{ active: isActive }">
<h3>Tab ...
0
votes
0
answers
29
views
Updating donut with Chartjs
When I use the chartjs linear gaphic, my data is updated.
But when I use the donut chart, the data is not updated.
function addData(chart, label, data) {
chart.data.labels.push(label);
chart....
- 13
0
votes
1
answer
70
views
ChartJS: Property 'fit' does not exist on type 'LegendElement<"bar">'
Quick question:
I'm using ChartJS with react-chart-js2 and typescript.
I wanted to increase padding between legend and chart, and got to a solution that works, but I can't seem to get the types right.
...
- 313
0
votes
0
answers
31
views
Update specific data with chartjs
I use chartjs for my charts.
I am unable to update targeted data. The code I propose allows me to update only the last data.
I'm looking to update a specific piece of data from the donut chart.
Here ...
- 13
0
votes
0
answers
47
views
Chart JS Stacked Bar Chart with time
I am trying to create a stacked bar chart where the Y axis is time and the X axis is various categories.
edit: slightly clearer wording
https://www.reddit.com/r/learnjavascript/comments/1dj8ap7/...
- 21
0
votes
0
answers
59
views
Chartjs - disable hover effects/z-index
I have a chart-js (v4) donut chart with two data vals ver dataset - an 'active' value (in orange) and an 'empty' value in grey which is an upper limit - value
two values per dataset
The arcs/radials ...
0
votes
1
answer
44
views
build data dynamic for data in dataset for chartjs in javascript
I would like to make the data been made dynamic according the variable 'AmountOfPoints'
Now i'm working with a switch and make the data fixed (please see example below):
__processPlot1() {
if (this....
- 3
0
votes
0
answers
117
views
Error updating real-time data with chart.js
I want to create a chart using WebSocket to display real-time information in Vue using vue-chartjs and chart.js. The issue is that for some reason, the data is not displaying. The array of numbers ...
- 71