Questions tagged [chart.js]
Chart.js is an open source JavaScript library for creating animated, interactive charts for inclusion on web pages.
chart.js
12,400
questions
0
votes
0
answers
21
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 ...
- 417
0
votes
0
answers
42
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
1
vote
1
answer
56
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 -...
- 139
0
votes
0
answers
40
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
-1
votes
0
answers
51
views
Chart.js colored regions [closed]
In an early post from 2016, I found a solution to my problem that I haven't been able to solve.
I want to fill my area chart between two certain lines. I want my graph to have colored regions between ...
- 7
0
votes
0
answers
33
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
26
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
37
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
1
answer
45
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
35
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
27
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 ...
- 21
0
votes
0
answers
39
views
Chart.js fails to hide grid on axis [closed]
I'm creating a Chart.js graph and I want to hide the scales and grid to have a "cleaner" design but I'm having difficulties hiding that stuff.
const xyValues = Array.from({ length: 200 }, (_,...
1
vote
1
answer
43
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
27
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
23
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 ...
- 21
0
votes
0
answers
31
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
70
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
21
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
24
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
28
views
How do I make it so that a value in a slider does not exceed a value from another slider?
I am implementing a chart using chartjs and I am using two sliders to configure the x-axis value range for the data that I am showing through html and javascript but I cannot figure out how to limit ...
- 1
0
votes
0
answers
24
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....
- 11
0
votes
0
answers
20
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.
...
- 303
0
votes
0
answers
23
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 ...
- 11
0
votes
0
answers
42
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
21
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
38
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
46
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
2
votes
0
answers
54
views
How to hide the chartjs-chart-treemap text data
Here is my Vue3 project issue, I use chart.js package "chartjs-chart-treemap" to draw
As you can see in the picture, there is a gray text that should not appear.
My chart.js version is &...
- 21
0
votes
1
answer
61
views
How to Make a Chart.js Chart Responsive with Fixed Aspect Ratio in React?
I'm working on a React project where I need to display a Chart.js chart inside a parent component which is in grid layout. The chart should resize according to its parent container while maintaining a ...
- 9
0
votes
1
answer
31
views
Unable to change pointBackgroundColor after initial configuration is done using Chart.js
I am using Chart.js version 4.3.x. I am having issues creating different color points on a line graph. All the entries I see on StackOverflow are older versions. It's still listed in the API
I have ...
1
vote
1
answer
34
views
Chart js beforeTitle in tooltip
I am trying to display custom text before title in tooltip. This should work according to documentation: https://www.chartjs.org/docs/latest/configuration/tooltip.html#label-callback
But it only ...
- 4,824
0
votes
0
answers
15
views
How can we set line chart without stacked in it out of 5 stacked lines in Line Chart using QuickChart
I need to show a Line Chart with multiple line data in it. One of the line in Line Chart should not be stacked and remaining lines should be stacked.
I could able to achieve it if I set y1 axis(...
0
votes
0
answers
64
views
React Chart Js 2 , x axes value not my value
i try formatting my x axis value in chart js
myData
const chartData = {
labels: data.map(item => item.toString()),
datasets: [
{
label: '',
...
0
votes
0
answers
28
views
In some browser appears in other browser not
In some browser canvas are not visible. Appear for one seconds and then disappear. Im going mad. What´s wrong? If i disable the second one the first one is visible.
There is a solution about it? I ...
0
votes
0
answers
32
views
Limit X Axes labels in Chart.js
I'm trying to create a stock chart (with Chart.js v4) similar to the ones you see on Google. My goal is to display only intervals on the x-axis, rather than showing labels for each day. I managed to ...
- 198
0
votes
0
answers
40
views
Dynamically resize chart.js charts when adding new charts to fixed size container
function addChart(key, colors) {
const chartData = getChartData(currentYear.value, key);
const chart = {
chart: null,
data: chartData,
colors: colors,
key: key
};
charts....
- 75
0
votes
1
answer
37
views
Stack js some padding between outside border
I would like to add some padding to the border on the outside of my chart, see attached image of expected outcome.
as you can see i have a border width of 1, but its sitting on the chart, i would ...
- 2,782
1
vote
1
answer
58
views
Chart.js - X-axis not displaying dates with timestamps in format "YYYY-MM-DDTHH:mm:ss.SSSSSS" (React chartjs-2)
I'm trying to create a line chart in React using chartjs-2 to visualize timestamps and their corresponding power measurements. My timestamps are in the format "YYYY-MM-DDTHH:mm:ss.SSSSSS" (...
0
votes
1
answer
27
views
Animation is stuttery on mobile phones [Solved]
I made a spinning wheel using chart.js pie chart and it works flawlessly on pc - basically am drawing a pie chart with datalabels for each option, and then spinning the chart accordingly. The problem ...
0
votes
0
answers
30
views
Can chartjs draw this kind of line chart with intervals?
Can chartjs draw this kind of line chart with intervals like this?
This is my option:
const options11 = {
responsive: true,
maintainAspectRatio: true,
aspectRatio: 2,
scales: {
...
0
votes
1
answer
46
views
Cutout percentage in data chart
How would I add cutout percentage to my data chart in chart js, the aim id to make the chart thiner.
const data = {
labels: ['onek', 'teo', 'Three'],
datasets: [{
data: [1, 3, 9],
...
- 2,782
1
vote
1
answer
43
views
How can i change the format of my candlestick chart in chart.js?
I am using vite and react to build a node.js program where I am collecting data from coinbase exchange API to rebuild a dashboard. This is my code, where the API returns: an array of arrays of the ...
- 23
0
votes
0
answers
26
views
Data lables not working proper in node + ts
I have used chart js to generate chart image in node + ts and generate bar chart for that bar chart i want data labels at the end of the chart but that is not working properly i have used below config ...
0
votes
1
answer
38
views
Setting the Size of a Canvas width and height issue
I'm trying to set the size of a canvas for a chart made with Chart.js. It isn't resizing.
let ctx= document.createElement("canvas")
ctx.width = 200
ctx.height = 100
document.body.appendChild(ctx)
...
1
vote
0
answers
49
views
I need to change my label style onClick Vue-chartjs
I am using Chart.js to create a Doughnut chart with Vue.js, and I want to customize the legend items when they are clicked. Specifically, I want to change the color and add a line-through style to the ...
- 11
1
vote
1
answer
65
views
How can i make that all the chart in a radar chart.js show me in hover a list of the data?
I'm trying to make a chart where the data shows up when I put the mouse in all the area generated and not only in the nodes. The idea is that the hover shows the entire data together.
This is what I ...
- 11
2
votes
0
answers
25
views
Is there a way I can determine start position of an animation in chart.js using a websocket datasource?
I have implemented an area chart in my angular application using chart.js (ng2-charts). Data is populated on the chart using a WebSocket. However, when animating the inserted data point, the curve ...
- 31
0
votes
0
answers
19
views
Chart js. How to customize font styling for elements in the "Labels" array?
I am making a Gantt style chart that contains two labels in the Y axis, however I am hoping to find a way to make the "title" label be in bold, while the "description" is not. I've ...
- 21
0
votes
1
answer
26
views
Using point styling with dense line charts
My chart has lines which are quite close together, but still need to be differentiated in the legend. There are a few hundred datapoints for this line charts, so when I use pointstyle to differentiate ...
- 75
0
votes
3
answers
34
views
chartjs changing time display using select value
I try to adapt a simple chartjs code in order to modify time display according to values from a select field into my html page. The fact is I don't understand why the values selected is not linked to ...
- 95