12,380
questions
0
votes
0
answers
70
views
Chartjs Nextjs - Both the Two charts should display crosshair if hovered on any one
Two line charts should display crosshair if hovered on any one. When first chart is hovered crosshair is displayed on the first but on second chart only points are highlighted without the crosshair
...
0
votes
1
answer
37
views
How to make the month label on x axis in the center of each segment and allow the first month to appear
I am trying to plot my data with Chart.js. The labels on the x-axis are Date object:
const labels = [
"1900-07-01T00:00:00.000Z",
"1900-07-02T00:00:00.000Z",
"1900-...
- 3,485
1
vote
0
answers
46
views
Line chart displays incomplete data when adding multiple datasets
I have an issue with my chart. When I only update the temperature, the graph will be okay. But when I add the humidity, the chart is only filling up halfway:
// Declare chart variables
let ...
0
votes
0
answers
34
views
ChartJs.Blazor: Error Could not find a chart with the given id
I have just installed ChartJs.Blazor.Forked (0.2.0) and defined a pie chart. I took the sample from GitHub and adjusted it so I could populate the chart with data from an async service.
The odd part ...
- 9
0
votes
0
answers
37
views
Put The Chartjs on Canvas using Nextjs
I have the problem when using chart on the image canvas, the issue is that the chart does not show/appear on the image canvas.
const drawCanvas = (canvasWidth, canvasHeight) => {
const dpr = ...
- 3
0
votes
1
answer
55
views
Combining multiple datasets in chartjs
Currently I have 2 points in my line chart's dataset as seen in the screenshot.
Now I want to add 4th dataset like in the screenshot, its the non-linear dataset.
But 4th non-linear dataset is a ...
- 1,913
0
votes
0
answers
35
views
Using chartjs 3.9.4 to draw dynamic chart on the same canvas ID
I am working on an Analysis part of my project and I have two buttons, which each button have different data by clicking them, and I want use jQuery to be loading data to the same canvas ID. This ...
- 1
0
votes
0
answers
28
views
how to create complex polar area chart [duplicate]
Refer this image I have a reference image that I want to recreate in my project, but I haven't found anything similar. The closest matches I found are Highcharts and D3.js charts. The chart I'm ...
1
vote
1
answer
40
views
Radar Chart Color Transition and Border Smoothing Issue
"I am trying to make smooth color transitions in graphics using Radar Chart. At the same time, I want the lines to be smooth, but I cannot get the results I want. The color transitions are smooth,...
- 13
2
votes
1
answer
54
views
ChartJS v4 - Using Points in a line chart will result in all x-values at 0
I am facing a rather strange problem with line charts and ChartJS. Given the following very simple code. I expect to have a line chart where 3 data points (at x: 0, x:1 and x: 2). But instead, all ...
- 1,683
0
votes
0
answers
89
views
chartjs-chart-financial in next.js is not showing
I am working on a simple Chart dashboard app in Next.js, using Chart.js. I am trying to add a Candlestick chart component, for which I use the chartjs-chart-financial library. However I only get an ...
- 21
0
votes
2
answers
63
views
How to dynamically write Names on X Axis in ASP.NET MVC Chart.js
I am working on a project to create Bar charts where in X Axis we dynamically display the Agent Names and their respective Deal status.
So in bar chart we call the data from db and display the values ...
- 33
-1
votes
1
answer
122
views
How to create a chart with custom graphics? [closed]
I need to create a chart looking like the image above, but I have no idea how. The data needs to be dynamic and it would great to also include some animation when the chart is loaded.
My tech stack ...
- 72
1
vote
1
answer
48
views
Chart.js: Aligning multiple side-by-side bar charts with inconsistent label widths
I'm using Chart.js (4.4) to create multiple bar charts side by side, each representing a different country. My current implementation uses separate <canvas> elements for each chart. However, I'm ...
0
votes
1
answer
135
views
How to restrict the area of a react-rnd Rnd window that is draggable?
I put some ChartJS graphs in Rnd and it's mostly great but if I want to pan around in the graph, it also moves the window. Here's an example...
My current code is
<>
<Rnd
...
- 17.8k
0
votes
0
answers
57
views
Chart Js - Doughnut chart - Setting data circumference to less than 180 degrees renders the chart off center?
I'm not sure if i have a fundamental misunderstanding of doughnut charts.
I'm looking to render a doughnut chart with 1 data point (we'll call this datapoint 'completed_A).
The full circumference of ...
- 348
0
votes
0
answers
25
views
chartjs create a custom mode
From chartjs documentation it's possibile to create a custom mode, defaults are: 'active',"show","resize","hide". It's not clear how to create a custom one and what ...
0
votes
0
answers
44
views
How to retrieve or export the numeric data from a Chart.js canvas object
I want to retrieve the numeric data from a canvas object created with Chart.js in a website.
The website is https://microwave-cablebuilder.gore.com/builder.html
When a cable configuration is typed, e....
2
votes
1
answer
82
views
Display value on each bar of the primefaces Bar Chart
Is it possible to show value on / in/ above each bars on Primefaces BarChartModel. I did not found this functionality. I use primefaces 13.0.0 i jsf application. I woul like to have somthing like this:...
- 139
1
vote
1
answer
69
views
ChartJS Bar chart - Modify legend
I am new to ChartJS and I am trying to build a bar graph. This graph should have the following information:
labels = ['D1', 'D2', 'D3', 'D4', 'D5', 'D6', 'D7', 'D8', 'D9', 'D10']
data = [1,2,3,4,5,6,...
0
votes
0
answers
62
views
Why do my line graph dashed grid lines disappear when I hover over graph point data?
My Chart.js line graph dashed border grid line vanishes for few few seconds when I hover over graph point data. This also happens when I activate and deactivate datasets using the "This Month&...
0
votes
0
answers
46
views
How to create horizontal stacked bar charts (sort of Gantt chart) multiple groups with line charts for each group in Chart.js?
Horizontal stacked bar charts with multiple groups
As for the horizontal stacked bar charts with multiple groups, I like this solution. It seems to work with [email protected] without any issues, so I’d ...
- 792
1
vote
1
answer
215
views
Hide overlapping labels based on smallest value (or other custom logic) in chartjs-plugin-datalabels
display: "auto" only hides overlapping labels based on the relative index; instead I need to hide, if 2 or more labels overlap, the label that has the smallest value.
I got this far, and it ...
- 30k
0
votes
1
answer
30
views
Chart.js Zoom Limits Not Working: Infinite Scrolling Still Possible
I'm working on a larger project but have created a minimal "working" example here: https://jsfiddle.net/brLh2yk4/16/
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
...
- 33
1
vote
1
answer
37
views
combo-bar-line with differest number of element
I would like to make a graphic design showing the trend of amounts.
Specifically a bar graph with the monthly delta and a graph with the cumulative total so far.
In my situation, the starting amount ...
- 59
0
votes
0
answers
30
views
How to use all the functions of Chart.js in a php controller
I'm transferring the graphic generation from js code to php, but functions such as borderRadius and legend => display = false don't work. I need borderRadius, because roundedBars does not ...
- 1
0
votes
0
answers
41
views
ChartJS Annotations on Horizontal Bar Chart
I am trying to get a Per Bar (or Stack) Line Annotation to show up on a horizontal Bar Chart. simply using the ChartJS documentation example, if you add, "indexAxis: 'y'" it breaks. Is it ...
- 1
0
votes
0
answers
106
views
chartjs 4 - ecg graph with 12 derivations, problems with the scale
I'm building a graph in chartjs to show ECG data. The data comes from PHP/Livewire, but, let's say that the data is an array.
For context a typical ECG comes in a grid representing 25mm/s (x = time) ...
- 975
0
votes
1
answer
104
views
React Chart.js is not rendering lines when state changes
I am using React Chart.js V2 and I am trying to update my chart when the state changes. However it is only rendering the y-labels on the left side and is not drawing the lines. The dataset and label ...
- 49
0
votes
1
answer
227
views
PrimeFaces chart changes between 12 and 14
I am trying to upgrade from PrimeFaces 12 to PrimeFaces 14. Chart data is deprecated in version 12, inside my bar chart model I am using chart data. Any suggestions with rewrite in this scenario.
I am ...
- 3
0
votes
1
answer
74
views
Using Webworkers for both parallel rendering and data generation in Chartjs
I am changing from Dygraph to Chartjs because of rendering webworkers and wish to fully multithread the graph to keep main thread empty as much as possible. I am trying to use Workers for handling ...
1
vote
0
answers
35
views
Add another data to ChartJS X-Axis in relation
I am trying to add another data to my chart.
I have to line which a representing a reference data. Now I want to add some points which are showing real results.
The chart should show that the points ...
- 21
0
votes
1
answer
135
views
How to show gridline at up?
I created show forecast of weather and I want to show gridlines (of temperature) at up. I tried something like this:
yAxes: [{
gridLines: {
display: true,
color: "gray&...
- 57
-1
votes
1
answer
50
views
How to render the coinbase API in stream line chartjs
Question: I am trying to render the level2 api in the chartjs. But unable to do it
I have kep the data in 2 variable bid, ask and trying to plot them against time.
code sandbox https://codesandbox.io/...
- 1,553
1
vote
0
answers
36
views
Odd behaviour when changing screens in Angular application
I have a dashboard page with visualisations where their height and width are set to be 100% of their container. When I shrink the page manually it works, but when I switch screens I have to refresh ...
- 59
0
votes
0
answers
40
views
How to create a chart with custom visible range selection?
I want to create a chart where date is an x-parameter, so that the user can choose from what date and to what date to view the chart, as is usually implemented on cryptocurrency-related sites (I will ...
- 1
0
votes
1
answer
98
views
How to show dashed Y-axis, center X-ticks, and hide X-grid in Vue-Chartjs?
I need a horizontal dashed line, no y-axis ticks, hidden x-axis grid lines, and centered x-axis ticks for my bar chart. Solution required in vue-chartjs.
Chartjs installed package:
"chart.js"...
- 3,065
-2
votes
0
answers
28
views
Hide fillText when I move mouse at the tooltip
I'm using version 2.9.4. My appp shows weather. There are some fillText texts with temperature. But: I want hide these fillText (animation, onProgress) values when there is my mouse which shows some ...
- 57
0
votes
0
answers
20
views
how do I set the pie color with pychartjs?
How do I add colors to pie chart with pychartjs?
chartjs has an example where it does the following:
backgroundColor: colorize.bind(null, false, false),
How can colorize be used in the python code ...
- 641
0
votes
0
answers
48
views
How to remove labels from the chart made with Chart.js on the print screen?
I'm using Chart.js for some charts and I’ve run into a bit of an issue. I’ve got these neat comparisons set up, but I need the unselected ones to not show up on the printout. Any ideas on how to do ...
- 11
0
votes
0
answers
43
views
How can I encode Tooltip in Chart.js?
hello I'm the beginner of making a webpage. I just used the template which I downloaded at Internet and changed a little.
Actually I'm Korean. so I used korean at my pages. but only the tooltip part ...
- 1
1
vote
1
answer
249
views
ChartJS Pie chart with react-chartjs-2 Legend align to the right error
I am trying to create a Pie chart in react using react-chartjs-2 and chartjs.
For that I'm using "chart.js": "^4.4.3", "react-chartjs-2": "^5.2.0"
The problem ...
0
votes
1
answer
60
views
Show all data in chartjs
I've got some issue where I can't show all data which is the date and time.
I want the chart height to be at least take 80% of the screen height, allow horizontal scroll so that they will not be ...
- 261
0
votes
0
answers
21
views
Adding Custom Left Padding to Chart.js Title
I want to add left padding to the title of my Chart.js chart. Currently, Chart.js only allows setting padding for the top and bottom of the title. I need the title to be positioned 200px from the left ...
1
vote
1
answer
58
views
Legend label is not showing dash point style, it shows a line instead
The legend label is not showing dash point style, instead it shows a line:
I tried configuring the legend label but it did not work.
<div>
<canvas id="myChart"></canvas>
...
- 87
1
vote
1
answer
90
views
How to group the Y and X axis labels at the very bottom left corner in Chart.js?
I'm using Chart.js v4.4.3.
My goal is to group the Y and X axis label to achieve something like this:
I wasn't able to find what options to use to group this two axes labels together in https://www....
- 627
0
votes
0
answers
14
views
Show Tooltip on hover over label on horizontal bar graph in chart.js
i want to show the tooltip on hover over label
now what happening is when i drag my cursor from bar to label the tooltip remains i want
type: "bar",
data: {
labels: data....
- 1
0
votes
0
answers
22
views
Value on the Y axis is being skipped in chart.js 3
Having a weird issue with a graph where a line (450,000) is getting skipped
options: {
scales: {
x: {
scaleLabel: {
display: ...
- 11
0
votes
1
answer
27
views
Parcel build differs from localhost
I'm developing a small webapp with parcel to display some charts. I'm using
https://parceljs.org/
https://www.chartjs.org/
https://www.chartjs.org/chartjs-plugin-annotation/latest/
My app runs ...
- 966
2
votes
1
answer
49
views
Rotating labels on lower half of pie chart
I am using Chart.js to generate a pie chart.
I want to rotate the labels on the lower half of the pie chart.
Here is my current code to generate the pie chart:
$(document).ready(
function() {
...
- 53