All Questions
275
questions
1
vote
1
answer
36
views
Is it possible to create a graph in which a single broad bar contains multiple bars in Angular?
I want to create a graph like this
I haven't been able to find a solution.
I asked ChatGPT for the solution. The code it gave out did not work even after trying to make it work.
At the end of ...
- 838
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
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
0
answers
53
views
Where are the Java classes BarScale, CategoryTicks and BarOptions.IndexAxis?
I am migrating from PrimeFaces 13 to 14. The migration guide says the new chart component allows raw JSON or XDEV Chart.js Java Model. I copied the Java code for the bar chart example from the ...
- 495
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 ...
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,...
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
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
0
votes
0
answers
183
views
ChartJS and Vue-ChartJS: Scales in chart options do not work
I just started using ChartJS and VueChartJS and begin with a simple bar chart. The problem is that the scales in chartOptions do not affect the UI.I used ChartJS 4.4.2 and VueChartJS 5.3.1.
Here's my ...
- 69
2
votes
1
answer
635
views
ChartJS / react-chartjs-2 add horizontal reference line to bar chart
I am creating a barchart with ChartJS / react-chartjs-2.
The barchart is displaying allright, nothing special:
I want to add a horizontal line to display the average of the years totals to see how ...
- 478
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
48
views
Reducing white space on either side of a single-bar stacked horizontal bar chart - Chart js
I am using chart js to generate this chart within a React component.
My code is as follows:
setChartData({
labels: ['SDA300'],
datasets: [
{
...
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
0
answers
58
views
Render Image update when I click legend chartjs
In ChartJs I want to custamize the bar chart.I'm placed the images in empty places if i click on the legend that images cannot be hide. I made a attendance bar chart if person is absent that place ...
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
0
votes
0
answers
16
views
How can I decrease the width of the columns when there are only 2 data points
As you can see from the following image, there are only 2 data points with the whole graph is stretching to full screen, instead I want the graph to take full width but I want to control the widths of ...
- 1
1
vote
0
answers
172
views
Is it possible to change barThickness for data points of a ChartJS Horizontal bar per dataset?
I am using "chart.js": "^4.4.1" & "ng2-charts": "^4.1.1".
For my dataset.data.point which in an array of objext having x and y points.
I want to set the ...
- 11
2
votes
1
answer
90
views
Chartjs multiple bar using dynamic and variable JSON
I'm trying to create a bar graph based on json data that vary dynamically according to the filter.
I want the graph to show the TYPE related to the PERIOD, when it exists. If it doesn't don't show ...
- 23
0
votes
0
answers
49
views
How to add "data-gaps" in CharJs?
I try to create filled line chart from BarChart component. I need to fill gaps in chart.
Here is my chart settings (i`m using vue-chart-3, so, i show just configs):
Chart Data
{
labels: [
"...
1
vote
0
answers
156
views
How to add space between Legend text and chart in ChartJs v4
I'm using Chart.js version 4.4.1, and I want to increase the space between the legend and the chart.
I need a solution for barchart. I'm sharing the code for the bar chart.
I've checked several posts, ...
- 17
1
vote
0
answers
48
views
Chart JS multi axes | Line chart + Bar Chart | Dots are appearing in middle instead of Aligning with chart
I am working with chartjs Version (4.4.0).
I am looking to plot combo chart (Two bar charts and Two line charts).
Where 1 line and bar chart belong to current year data and other belong to previous ...
0
votes
0
answers
52
views
Chartjs - reverse animation in bar chart
I'm using Chartjs to render a bar chart and, in this case, I'm using the reverse option - https://www.chartjs.org/docs/3.9.1/api/interfaces/CoreScaleOptions.html - to render lower values on the top ...
- 91
0
votes
1
answer
35
views
How to set legend chart.js text is getting cut
How remove space from left and right side of bar so legend get displayed with complete text
- 121
0
votes
0
answers
78
views
Change horizontal line length - Annotation Chart js in Angular
I'm trying to add horizontal line as target for each bar in bar chart using chart.js in angular.
My Code here,
this.chart = new Chart("canvas", {
type: "bar",
data: {
...
- 159
0
votes
1
answer
1k
views
Uncaught TypeError: Chart.register is not a function
I want to display datalables on top of eachbar(Datalabels are showing when i mouseover through the bar). I used chartdatalabels plugin to acheive this. But when i register the plugin using Chart....
- 155
0
votes
0
answers
60
views
Stacked bar chart showing row labels above other labels
I am build a chart where the rows are the assignees' names
and when I have too many assignees the chart just put one name above other (https://i.sstatic.net/LNk5A.png). I want to just add space ...
0
votes
1
answer
566
views
Bar chart with multiple datasets - Chart.JS
I want to display a bar chart with multiple datasets as shown below,
I'm able to fetch the data as shown below
But how to convert this JSON array as below code. I need to show the attendance ...
- 155
0
votes
0
answers
76
views
Align bar to the center of the chart in chartjs
I have a chart with only two bars, and I want to align them to the center of the chart. Here's what I want it to look like:
Desired Chart Alignment
Here's what I've done so far:
Current Chart ...
2
votes
1
answer
722
views
How can I hide missing or null bars in a Chart.js bar chart?
I'm trying to display data from multiple datasets, with some datasets not having data for a specific x value. I'm using chart.js version 4.3.0.
To achieve this, I'm using a (x;y) data structure as ...
- 73
1
vote
1
answer
152
views
Bar and line chart not working using chart JS
I am trying the make a html report that contain a lot of charts in it.
every chart is working fine
except the one chart Surface Solar Radiation and Sunshine.
I have tried everything debug it and to ...
1
vote
1
answer
236
views
Adding a custom image to a chartjs bar chart
I am trying to add an image instead of a color to the dataset of a bar graph in Chart.js using Vue.js. All examples I found to implement this seem to indicate that the graph needs to be already ...
- 11
-1
votes
1
answer
91
views
add multi chart with multi axes label using chart js
function createDiagonalPattern(color = 'black') {
let shape = document.createElement('canvas')
shape.width = 10
shape.height = 10
let c = shape.getContext('2d')
c....
1
vote
1
answer
1k
views
Y axis labels are getting cut off on horizontal bar chart in Mobile view + ChartJS v4
I have a Nuxt 3 application with Vue 3. I am using composition API with typescript. In my package.json file I have the below dependencies:
{
...
"dependencies": {
"chart.js"...
- 912
0
votes
1
answer
71
views
How can I represent data over timeslots in ChartJS?
I've been looking everywhere but I cannot find the solution to my problem.
I have a dataset like so : {"2023-03-31T00:00:00": ["B", "C"], "2023-03-31T00:20:00": ...
- 1
0
votes
1
answer
252
views
I can't see the datalabels on the bars charts.js
I have done many tests and I am unable to put the data in the columns, can someone help me?
I only want the numbers to appear in each bar, I can do it in other types of graphs with the datalabel ...
- 11
1
vote
1
answer
538
views
Two Y axis Barchart in ChartJS
I have create a two Y-axis barchart, the data and axis display correctly, however, the two axis are both positioned to the left of the plot. I put the position for the two Y axes but I don't know why ...
0
votes
0
answers
161
views
How to place a point on a bar graph, but shift it in the y position
I'm not sure how to do this, but I've got some points I want to add to a bar graph. However, when I add the point, it ends up in the middle of the bar graph column. I'd like it to be at the bottom of ...
- 33
0
votes
0
answers
147
views
Loop through a list of employees and their projects and display their months spent in a bar chart
This is a continuation from this and user2057925 was super awesome helping me out and also gives a good explanation. However, since my javascript is still very basic compared to what user2057925 had ...
1
vote
1
answer
603
views
cannot find name 'ChartOptions'
in Angular i'm using "chart.js": "^3.9.1", getting error
ERROR in node_modules/chart.js/types/adapters.d.ts:1:15 - error TS2304: Cannot find name 'ChartOptions'.
1 import type ...
- 11
0
votes
1
answer
130
views
Chartjs bar chart position
I'm trying to make a bar chart that looks like this design:
My current chart looks like this (ignore the 2 missing bar elements):
The two questions I have are:
How can I shift the bars so that they'...
- 70
0
votes
1
answer
428
views
grid lines on bar chart V3 chart js
Need gridlines on the bar chart , chart js V3.
I tried many grid options nothing seems to be working , by default the grid lines seems to be going next to the bar chart and not on it.
- 263
1
vote
0
answers
59
views
Add space between two barchart record in Chartjs and design#2 label set in center same like design#1 sublabel in center
<canvas id="p-myChart" style="display: block; box-sizing: border-box; height: 450px; width:100% !important "></canvas>
@*parameter multi chart*@
<script src="...
- 11
2
votes
2
answers
747
views
Chart.js Custom parsing with floating bar chart
I have a floating bar chart that somewhat represents a Gantt chart:
The dataset looks as follows:
{
"labels": [
"Uwe Austermühle",
"Helmar Conradi",
...
- 2,817
0
votes
1
answer
629
views
Click Event Not working below the x-axis line in chart Js (Angular)
I am using Chart JS ,try to make click event in bar chart labels,click event not working below the x axis and I try some other achieve this in click event in canvas ,but it not working
HTML code:
<...
- 45
0
votes
0
answers
118
views
Chart.js how to show and hide charts with buttons
So i have 2 bar charts displayed: 2 Charts
The first bar chart id="myChart" (January to November) is the chart where it can be altered by the Date Range Filter button and Reset button.
The ...
- 1
1
vote
1
answer
320
views
I needed grouped Stacked Bar chart in compate current and previous years data with category wise count display in chart
I would like the chart as shown in below image in Jquery, I have tried lots of code but unable to achive it, I can post the code which i have tried but its worth less.
In the chart we are trying to ...
- 41
0
votes
3
answers
296
views
ChartJS: problem with height when data size is too small
I'm using ChartJS: 3.9.1 + react-chartjs-2: 4.3.1
I have a problem, when dataset is too small (2-3 values) - there is too much space between bars (see a picture):
This problem is not reproducible, ...
1
vote
0
answers
30
views
Configuring internal padding on Chart.js Bar chart
I am attempting to get Chart.js bar charts to have "internal" left and right padding, such that the bars are centered with minimal width between them, but larger space to the left and right. ...
- 309
1
vote
2
answers
915
views
ChartJS Add dynamic labels to vertical lines on horizontal bar chart
I am trying to get a horizontal bar chart with 3 overlay vertical lines at specific points on the horizontal axis. I am using ChartJS v2.8 and the annotations plugin (v 0.5.5). I would like to add a ...
- 25