12,384
questions
0
votes
0
answers
86
views
Is there a way to use the chartjs-plugin-annotation in the chartjs R library
I am attempting to plot some charts in chart.js using this package in R for a shiny app.
This is possible in chart JS using plugins: https://www.chartjs.org/chartjs-plugin-annotation/latest/samples/...
- 41
0
votes
1
answer
54
views
How to restrict the zoom area to be inside chartArea
I am trying to use the zoom within chartArea, however zooming in causes the zoom to use the whole chartArea rather than within the X and Y axes.
var arbitraryLine = {
...
- 245
0
votes
0
answers
45
views
Ticks in radar chartjs 4.4.2
I don't seem to be able to change and set min and max ticks in radar chartjs version 4.4.2... whatever I do, the max ticks is set to the dataset highest value, but I want it to be set to max 100 (no ...
- 1
0
votes
1
answer
44
views
Stacked Grouped Chart
<!DOCTYPE html>
<html>
<head>
<title>Task Status Bar Chart</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head&...
- 11
0
votes
0
answers
41
views
To combine timeline and line chart
I have two distinct datasets in Power BI:
Source 1: (top)
• Date (not aligned with Source2)
• Count1, Count2, Countn (Also legend for the counts)
Source 2: (bottom)
• Date (non-continuous)
• ...
0
votes
1
answer
114
views
Chart Js chartjs-plugin-datasource-prometheus changing color for datasets
need some help if someone already used the plugin to use prometheus datasource on chart.js.
I am having problems changing the colors fo the data set.
The best That I was hable to acomplish is to ...
0
votes
1
answer
37
views
Custom tooltip doesn't show for horizontal bars which cover 100% of the horizontal length of the entire chart (react chart js)
I am using v4 of react chart js. The chart type is horizontal bar and I am using a custom tooltip to generate the tooltip but the tooltip is not displaying for bars which have 100% bar length.
...
- 13
0
votes
0
answers
41
views
Disable auto-fit behavior in Chart.js
I have made a bar chart importing variables from a database. Variables can have values from 0 to 100.
I want to maintain the X-axis fixed to 100 even when all 'real' values are lower.
I inserted the ...
- 1
0
votes
0
answers
174
views
Vue Chart.JS plugin-annotation throwing error: Cannot find module 'chartjs-plugin-annotation' or its corresponding type declarations
I am having trouble configuring chartjs-plugin-annotation.
I have it setup as a dependency in my vue project as well as chart.js
Versions:
"chart.js": "^4.4.2",
"chartjs-...
0
votes
1
answer
188
views
How to use Ticks formatter with Typescript in Chart.js?
If I make Chart.js to use locale en-US, I get the scale numbers formatted optimally.
If I use tick callback like in the documents:
ticks: {
callback: function(value) {
return value....
- 422
2
votes
1
answer
68
views
ChartJS: Grouped Stacked Bar Chart rendering incorrectly
I am trying to use ChartJS to create a grouped stacked bar chart. In my dataset, there are 2 groups: Groups A and Groups B. Groups A are rendered out correctly, but for some reason, Groups B (gray ...
- 6,455
1
vote
1
answer
116
views
Parsing data from python into javascript to then put into Chart JS
Originally I had a basic line chart. I then tried to parse data into the js portion of the html using jinja but obviously that didn't work. I then tried to parse directly into js. Unsuccessful. Now I ...
0
votes
0
answers
38
views
Unable to see center text and subtext in Chart.js doughnut chart
I am using Chart.js for a doughnut chart in a React application. I have used this component twice, but I am unable to see the center text and subtext. I am also having trouble registering the plugin.
...
- 15
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
2
votes
1
answer
130
views
Chart doesn't resize when moved to a differently sized container in Chart.js 4.4.2
I have two charts next to each other, the left one is big and the right one is small, each in their own container. When the small chart is clicked I want the charts to switch places so that the small ...
- 23
1
vote
2
answers
152
views
Setting Chartjs Global Defaults for Individual Axes
According to the documentation, Chartjs (v4) grid styling is controlled using the options.scales[scaleId].grid namespace. I can control the styling globally of select elements using statements like:
...
- 1,915
1
vote
2
answers
49
views
How to use Date labels as Y axis in chartsjs
Given the following chart how can I show a custom HTML label for the Y ticks?
const yAxisLabelsLookup = {
0: {
label: '2024-01-01',
color: 'red',
},
1: {
label: '2024-...
- 16.9k
0
votes
0
answers
93
views
How to display the label text when we hover over the labels on X or Y axes?
I am currently working on a React project that is using ChartJS to generate charts based on the data gathered from the database. Recently I found an issue when the labels are too long,the chart will ...
- 1
1
vote
2
answers
232
views
How do i set the timezone with Chart.js and date-fns adapter?
I am using Chart.js v4.4.2 with the date-fns adapter v3.0.0.
I've managed to customize the format of the time scale to a 24-hour clock by putting the following customization on the scales.x object:
...
- 3,731
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
votes
1
answer
266
views
moment.js not defined in odoo module
while i try to use moment in odoo module it through some error like this :
The following modules are needed by other modules but have not been defined, they may not be present in the correct asset ...
1
vote
1
answer
167
views
Chart.js image with php excel [closed]
What im trying to do is convert chart.js to image with toDataURL then past it using ajax and using the url to set image path for php excel. I want to past the data without using any button and my php ...
- 37
1
vote
1
answer
119
views
Event on clicking on labels of Doughnut chart in Primeng (Angular)
Need a method handler details, how to achieve the functionality. I tried (onDataSelect) method handler, it is not throwing an event on clicking on labels.
If options can achieve the functionality, ...
0
votes
0
answers
128
views
How to add chartjs/graph in and html and generate PDF from it using puppeteer
I am try to generate a pdf using puppeteer with my on custom HTML template.The problem I am facing is that when I set configuration in puppeteer config with "headless: false" to show virtual ...
1
vote
1
answer
83
views
How to fix data not show in page but appear in network preview
im trying to post image that been convert to url by using ajax. The problem is $image = $_POST['imgData']; not show anything but if i check developer tools on network preview the data can be seen.
...
- 37
0
votes
1
answer
61
views
Setting Grid Color of Radar Chart in Chart.js
I have a radar chart with 360 labels and I would like to hide the grid lines emanating from the center of the chart or color them to match the canvas. Changing the r axis grid properties doesn't ...
- 1,915
0
votes
1
answer
47
views
How to create a "gamut" diagram using chart.js
Do you have any ideas on how to create such charts?
Of course, the background can be set... but then these squares, dots in different colors, triangle line.
Do you have any ideas on how to utilize ...
0
votes
1
answer
23
views
Line chart not showing up in Chart.js using Laravel and PHP data
Description:
I'm working on a Laravel project where I'm trying to display a line chart using Chart.js. I'm fetching the data from my Laravel controller and passing it to the view, but the line chart ...
- 45
1
vote
0
answers
108
views
How to importing data adapter library of Chart.js in Deno?
I'm using Deno Fresh, and I need to have charts. To render it client-side, on islands/chart.tsx I have:
import { Chart } from "$fresh_charts/island.tsx";
export default Chart;
and on routes/...
- 2,816
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
0
votes
0
answers
56
views
Chart js. How to scroll to section when clicked
I just started learning how to include graphs in code but faced some issues.
I have a horizontal bar chart here that shows datas of transportations in countries.
under the chart there are sections ...
- 1
1
vote
1
answer
73
views
Left border of funnel chart not drawing after setting borderSkipped: false in ChartJS 3.8.x
I have this funnel chart:
this.chartLeads2 = new FunnelChart(document.getElementById("graphLead2").getContext('2d'),
{
data: {
labels: ["TOTAL Q LEADS&...
- 37
0
votes
0
answers
116
views
Laravel dynamic charts using chartjs
I have a website with transactions and I want to build transactions that are dynamically created with specific filters for each.
I am not sure what the right approach would be to do this. I have one ...
0
votes
1
answer
92
views
Chartjs react initially hidden LegendItems
how can I set {hidden:true} on all LegendItems? If I set hidden property to true the legend item is only striked-through but the graph is still displayed. Any ideas?
Thank you!
I already tried this:
...
- 11
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
351
views
Why in livewire app chartjs element lose canvas properties on data refresh?
In laravel 10 / livewire 3 app I make chartjs report based on data from db and 4 filters.
It work for me ok with blade file :
<div class="editor_field_block_wrapper">
<...
- 3,027
1
vote
1
answer
61
views
How to dynamically stack and unstack bar chart with chart.js
I have a barchart where i want to toggle if the bars are stacked or behind each others.
Note x-axes is stacked to be behinde each other.
useEffect(() => {
if (!myChart) return;
...
- 74
1
vote
1
answer
537
views
How do I create a funnel chart in ChartJS 3.8.x
I'm trying to create a funnel with this chart, but I can't find a way to make it work. I'm using VueCLI (vue 2).
After doing npm install chart.js chartjs-chart-funnel an error appears on console even ...
- 37
0
votes
1
answer
33
views
Horizontal Stackbar and Linear bar using Chartjs
I am trying to create a horizontal stack bar chart of machine events and a linear chart of speed using Chartjs. Machine events data have start and end time and the speed have time data. I was able to ...
- 33
0
votes
1
answer
58
views
How to display data from Mongodb in ChartJS?
I have a pie chart and I need to display the data from the 'post' in it
Does anyone know how to do this?
const DoughnutChartComponent = (post) => {
const Ferum = isNaN(parseInt(post.title)) ? 0 : ...
- 1
0
votes
1
answer
52
views
ChartJs tooltip is only visible if the mouse pointer is hovered away from the chart
ChartJs tooltip is only visible if the mouse pointer is 10-20 pixels away from the point.
Please see the image below. The tooltip only appears when the pointer is not on the chart. There is nothing ...
- 621
1
vote
1
answer
63
views
Bar Chart with Overlaid Bars Spanning Across Entire Chart
I am attempting to create a Chart.js that displays the main dataset as a bar chart. There will be YellowBar and RedBar datasets that will be overlaid on top of the main dataset, but these need to ...
- 113
0
votes
1
answer
85
views
Adding spring security to working spring-boot app
There are two controllers web
@Controller
public class WebController {
@CrossOrigin(origins = "http://localhost:8080")
@GetMapping("/api")
public String showForm() {
...
- 16
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
0
votes
0
answers
73
views
Chart.js does not respect min and max values for yAxis
I have a bar chart (chart.js v4.4.2) which shows 4 different datasets. At the beginning there is no data and no Labels. There is a dataset in the background with data about the temperature, the ...
0
votes
0
answers
70
views
Zooming in/out does not accurately use the mouse position
Whenever I am zooming in/out it displaces the mouse cursor and it does not actually zoom in where I put my mouse
Using a BarChart
Using: "chartjs-plugin-zoom": "2.0.1"
I tried ...
- 1
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: [
{
...
