All Questions
1,861
questions
0
votes
0
answers
35
views
How to make snap scrollable chart like an apple health?
I want to create a chart similar to the orange-colored chart in the GIF which is in Apple Health App with snap-scroll capabilities at both day and week levels,
but I'm not sure how to approach it. Is ...
- 4,501
0
votes
1
answer
47
views
Is it possible to hide segments in chart.js?
I wonder if I can set the lines to be hidden in chartjs datasets->segment,
like this:
const down = (ctx, value) => ctx.p0.parsed.y > ctx.p1.parsed.y ? value : undefined;
const up = (ctx, ...
1
vote
1
answer
45
views
How to change value in tooltip charJS
Im using LightningWebCharts here is the documentation link https://salesforcelabs.github.io/LightningWebChartJS/
I want add 'k' in tooltip value. Tooltip documentation https://salesforcelabs.github.io/...
1
vote
1
answer
80
views
How to avoid chartjs line coming down when adding new value?
I’ve created a line chart in Chart.js that updates every second with new values. However, there's a small issue: when a new value is added, the animation starts from the bottom and moves up to the ...
- 27.3k
-1
votes
0
answers
77
views
How to overlap weeks
I have datasets with date time as x-axis.
I did split the datas by weeks like "2024W41", "2024w42"...
I would like to display two lines, one for each week.
Sadly, as its based on ...
- 578
1
vote
1
answer
55
views
Chart.js - Alignment of 0 values for multiple datasets
I am trying to compare 2 datasets in chart.js. There are large differences in values so in order to compare the values a have decided to graph the data on 2 different y axes.
1 of the datasets has ...
- 493
1
vote
1
answer
61
views
Dataset scaling in a Chart.js bar chart for better comparison
I’m using Chart.js to graph two datasets on the same bar chart for a time-based comparison (x-axis). However, I’m encountering an issue where the height of one graph squashes or expands to fit the ...
- 493
1
vote
1
answer
36
views
Chart height is messing on creating new chart after destroying a canvas
During the creation of my chart initially it is rendering up perfectly like you can see below
but when i use my filter to get the dynamic datasets and render my chart, after destroying the initial ...
0
votes
1
answer
50
views
Chart JS Curved Labels in Polar Area
I am working on a web project using Chart.js to create a PolarArea chart that dynamically updates based on the selected class from a dropdown menu. I have encountered an issue where the labels are ...
- 1
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
-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
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
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
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
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
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
-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
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
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
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
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
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
565
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 ...
- 1
0
votes
0
answers
24
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
1
answer
39
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,803
1
vote
1
answer
94
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
1
answer
405
views
Charts in Primefaces 14.0.0 cause error in jQuery
I updated from Primefaces 13 to Primefaces 14.0.0. The Chart feature has been upgraded to use chart.js and i updated my code accordingly. Since it did not work out of the box, i copied the example ...
- 462
0
votes
1
answer
108
views
Uncaught TypeError: item is undefined chart.js
Im trying to make a page using vue and chart.js:
<script setup>
import { ref, onMounted } from 'vue';
import VueSlider from 'vue-slider-component';
import 'vue-slider-component/theme/default....
- 75
1
vote
0
answers
49
views
How to Show Only Highlighted Stack Value in Tooltip for Stacked Column Chart in FusionCharts
I am using FusionCharts in JavaScript to create a stacked column chart. When I hover over any stack in the chart, the tooltip displays the highlighted value of the stack along with the non-highlighted ...
1
vote
0
answers
42
views
vertical Gradient color for each bar is not working in a Grouped Bar Graph which has negative and positive bars using ChartJS
I am using Chart.js grouped bar chart. I want to show my bars with gradient colors. Grouped Bar Currently it show as shown in below image. Any help will be greatly appreciated.
How to create a ...
- 31
1
vote
1
answer
45
views
To configure Chart.js to display hours on the x-axis ticks when rendering charts in a Node.js
i am generating chart image in node using chart js how can i use hours on the ticks is there any idea for that
Error: This method is not implemented: Check that a complete date adapter is provided.
...
1
vote
1
answer
189
views
How to apply two color on each point labels in chart js?
Im working on displaying radar chart. I need to apply 2 color in each point labels. A image attached below. For example if first label 'Eating 65 / 28' then 65 is in red abd 28 in blue.
I have ...
- 25
0
votes
1
answer
83
views
Chart.js - How to generate time chart
I'm making a simple server log, and I want to use Chart.js to generate total hit reports by hour, day, month, or year. Here is my code:
import { ChartColors } from "$fresh_charts/utils.ts";
...
- 2,816
2
votes
1
answer
102
views
Set text at the circle end point in doughnut chart
Using HTML5 Canvas i am trying to add extra text in the ChartJs V3.8 doughnut chart. Chart is rendering correct.
Red circle value always be dynamic but not static.
I am trying to add text at the end ...
- 21
0
votes
1
answer
325
views
How to create a bar chart image on nodejs without a browser?
Have a single nodejs project using a PDF generator, and need paste a bar chart into it, but the project runs on a desktopless server.
Have any library or method to create a bar chart image on nodejs ...
- 4,039
1
vote
1
answer
281
views
ChartJS / react-chartjs-2 divide bar in to two data points
I am creating a barchart with ChartJS / react-chartjs-2.
The barchart is displaying allright so far, nothing special:
My data looks like this:
{
Name: "De Regenboog",
...
- 478
0
votes
0
answers
28
views
How can I increase the gap between the values of the x axis in a line chart and also change its width and height?
I just started using charts js in react and I wanted to know that can I increase the gap between the values of the x axis in a line chart and also in need to change the width and height of the chart.
...
1
vote
2
answers
89
views
How to make bar widths the same and category widths variable?
I have a bar chart with multiple datasets which include empty values. I use skipNull to hide the empty values. Currently each group (month) has the same width, and the width of the bars is inversely ...
- 92.1k
0
votes
1
answer
45
views
Group Bar chart tooltips showing time data as points instead of formatted HH:MM:SS in React Chart.js
I'm working on a React application that utilizes Chart.js to display bar charts. I'm encountering an issue where the tooltips in the bar chart display time data as points instead of the desired ...
- 418
1
vote
1
answer
93
views
chart issue achieving three donut under one another
Can someone help achieving a donut in this following format using chart.js?
really appreciate your help.
Thanks
var data = {
labels: ["Segment 1", "Segment 2", "Segment 3&...
- 13
0
votes
1
answer
43
views
Chartjs: How can stack the label of a different dataset on top of each bar in my bar chart?
chart.js 4.4.2
chartjs-plugin-datalabels
this is the effect id like to achieve
const chartCtr = document.querySelector('#temp-chart1') as HTMLCanvasElement;
new Chart(chartCtr, {
type: 'line',
...
- 93
0
votes
0
answers
50
views
How to set marker at the top and bottom of a bar in range barchart using chart.js
I'm currently working on a project where I need to create a range bar chart using Chart.js. I've successfully created the range bar chart, but I'm having trouble implementing custom circle markers at ...
0
votes
1
answer
160
views
Chart.JS - Configure x axis to show the hours of the full date in data.labels but it still shows the original labels below
chart.js: 4.4.2
date-fns: 2.30
chartjs-adapter-date-fns: 3.0.0
I wanted to truncate the x-axis as the dates were labeled in "YYYY:MM:DD HH:MM:SS" format. I achieved that via options.scales....
- 93
0
votes
0
answers
22
views
Customize react-chartjs-2
My task is to create a chart with the following design using react-chartjs-2:
My current approach:
With options:
scales: {
x: {
ticks: {
maxTicksLimit: 8,
},
...
- 51
1
vote
1
answer
158
views
How to control the width of bar charts in chartjs?
The bars in my bar chart using chartsjs are too wide. How can i make them thinner?
Here is my code
<body>
<div class="chart-container" style="position: relative; height:40vh; ...
- 13
0
votes
0
answers
80
views
Chart.js. How to combine Line chart with stacked Bar chart?
I am trying to create combined line + stacked bar chart, but I can't figure out how do this. There are two charts in the example. Chart1 is stacked bar chart, Chart2 is Line chart, basically I need ...
