Skip to main content
Filter by
Sorted by
Tagged with
1 vote
1 answer
31 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/...
Afrose ahamed's user avatar
1 vote
1 answer
50 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 ...
Mo.'s user avatar
  • 27.3k
0 votes
1 answer
41 views

Chart Js; Bar chart; Can the X axis labels be simply left aligned/justified rather than appearing centered?

Can the labels on the X axis be left aligned/justified as opposed to appearing centered like the following example? i.e. the requirement is that the label should be aligned with the grey vertical ...
FridayStWa's user avatar
0 votes
1 answer
38 views

Customize ChartJS Dougnut Border on Hover

I have this following Prototype created by our Designer using Figma. My stack is: Vuejs Bootstrap ChartJS So my questions is can we add this custom border on certain segment on click? Goals: Add &...
sluxzer's user avatar
  • 29
1 vote
1 answer
38 views

Issues with Installing ng2-charts and chart.js in Angular Standalone Component

I'm currently working on an Angular project where I want to implement charts using ng2-charts and chart.js. However, I'm facing some dependency resolution issues. Here’s a summary of the situation: ...
Musfira L A's user avatar
-1 votes
0 answers
30 views

Why is the chart in Bootstrap example dashboard not loading?

I am having trouble loading the chart in the Bootstrap examples when loaded into Express. I am looking to replicate a local version of https://getbootstrap.com/docs/4.0/examples/dashboard/. When I ...
Chris's user avatar
  • 1
1 vote
1 answer
60 views

Applying custom plugins to specific charts in Chart.js (not globally)

I have 3 charts on a component in my angular app. I need to create text label plugins to show on the chart. Each chart needs to have specific plugin assigned to it. I have searched a lot and could not ...
user-newhc's user avatar
-1 votes
0 answers
42 views

Vue error: Cannot read properties of null (reading 'addEventListener')

I am using the Chart.js library to build a bar chart. My app has a <select> with some elements inside. The chart is generated well. I added a zoom plugin which works fine the first time the ...
Cvrpe0's user avatar
  • 1
0 votes
0 answers
30 views

how to add data labels in salesforce labs lightingWebchartJs

im using salesforce lwcc https://salesforcelabs.github.io/LightningWebChartJS/docs/api/chart.html How to show value on each stack and cumulative value on top of the bar and also in legend each with ...
Afrose ahamed's user avatar
0 votes
0 answers
46 views

Rails 7 chart.js upgrade from version 2.9.4 to 4.4.4 - Uncaught ReferenceError: Chart is not defined

I am trying to upgrade chart.js from version 2.9.4 to 4.4.4. Javascript is managed by Yarn tool. Package.json file `"chart.js": "^4.4.4",` Application.rb file had this path for ...
Mansi Shah's user avatar
1 vote
1 answer
53 views

How to use string time data with moment.js in Chartjs

I have an array of lap times as strings shown below: ['00:01:41.413000', '00:01:38.790000', '00:01:38.917000', '00:01:38.470000', '00:01:37.906000', '00:01:37.997000', '00:01:37.774000', '00:01:37....
Dalton's user avatar
  • 13
-1 votes
0 answers
75 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 ...
user3916429's user avatar
1 vote
1 answer
57 views

how to adjust draggableElement to have correct x and y position

I have implemented chart js to plot a two curve indicated by red and blue line. I want to add a slider (black vertical line) so that it remains always within two curves and user can move it left and ...
Sagar Rawal's user avatar
2 votes
1 answer
53 views

Hide and collapse x-Axis when no data available

I would like to create a graph using chart.js where the x-Axis shows only those ticks for whose there is data available. Of course I could do some preprocessing of the data and eliminate those labels ...
nhaggen's user avatar
  • 433
2 votes
1 answer
48 views

Group data differently in bar chart

I am trying to build a bar-graph using chart.js where i add "random" groups of data. Each group should be labeled with a group name and each bar with the property it really represents. Data ...
nhaggen's user avatar
  • 433
0 votes
0 answers
25 views

Fill graph doesn't work for line charts in chart.js 3.9.1 version

I'm plotting a line chart in my react project using chart.js (3.9.1). This is the data I'm passing to the chart. I can see the chart but I don't see the fill color for the chart. Strangely I see the ...
Ravada Ratnakar's user avatar
0 votes
0 answers
26 views

Chart.Js Chart's layout is not updated in storybook

my goal I'm trying to make Chart preview with using StroyBook and Chart.Js. what I Did make Chart Component with using Chart.Js make Story Component with using Chart Component versions "chart....
jyc-coder's user avatar
1 vote
0 answers
47 views

Chartjs: chart is blurry when using webworker

I am trying to use chart.js with webworker. I am able to create the webworker and show the chart on the screen with the right dimensions. The problem is: the chart is blurry and a bit "zoomed in&...
tlvi38's user avatar
  • 311
1 vote
1 answer
51 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 ...
Digitalwolf's user avatar
1 vote
1 answer
53 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 ...
Digitalwolf's user avatar
1 vote
0 answers
47 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 ...
Jorge Campins's user avatar
0 votes
0 answers
42 views

Combine upload image with chart.js

Is it possible to upload an image and then use it as a background in Chart.JS? I found two separate codes but cannot combine them. It is possible to combine the two codes? window.addEventListener('...
Patlion's user avatar
  • 11
1 vote
1 answer
33 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 ...
Lakshay Malhotra's user avatar
0 votes
1 answer
43 views

Issue with Dark and Light Mode in Chart.js using react-chartjs-2 with React, TypeScript, Vite, and Bootstrap

I'm working on a React project with TypeScript, Vite, and Bootstrap, and I'm using react-chartjs-2 and Chart.js to display a bar chart. The chart is displayed correctly, but I'm having trouble setting ...
Dikshit Patel's user avatar
1 vote
0 answers
51 views

Line chart rendering based on dynamic duration changes with suffixes

prTimeToMergeChartOptions : any = comboChartOptions; prTimeToMergeChartsOptions(){ this.prTimeToMergeChartOptions.scales.x.title.text = "duration" this.prTimeToMergeChartOptions....
Sidrameshwar Biradar's user avatar
0 votes
0 answers
18 views

How to force scripted chart.js element color changes to persist, rather than immediately revert to default values

I am creating a bubble graph plotting each bubble as a separate dataset. An event handler displays additional information about each dataset when the corresponding point is clicked on. The display is ...
C McNorgan's user avatar
2 votes
2 answers
50 views

How to remove extra paddings on top and bottom of bar chart in ChartJS?

I have created a single line stacked horizontal bar chart with ChartJS v4.4.4. Additionally, I disabled the legend display, made the point radius equal to 0. I also added negative padding for layout ...
daniil sidorov's user avatar
2 votes
1 answer
53 views

How to control the ticks labels major or minor?

I have not been able to control the labels from scales/x/ticks/major or minor. Here is a simple code to illustrate the problem. <!DOCTYPE html> <html lang="en"> <head> &...
PBrockmann's user avatar
0 votes
0 answers
55 views

Chartjs > Display tooltip on two charts when hovered over anyone of the chart

on Hover tooltip works for one chart at a time, it should display tooltip on both the charts. The second chart does displays active points but not the tooltip. The tooltip is a custom one used here. ...
Nishant Salode's user avatar
0 votes
1 answer
27 views

Android WebView cannot render ChartJs bitmap on device but works in emulator

WebView does not create a bitmap when ChartJs is used in the webview. The resulting bitmap is all white. It does work on the emulator but not on an actual device. UPDATE: I set hardwareAccelerated ...
imsunburnt's user avatar
1 vote
1 answer
73 views

Tooltip for a 2 dataset doughnut chart is being presented when mouse's rover is out of the dataset placement

I have a doughnut chart implemented with Chart.js 4.4.1. This chart has 2 datasets, one in an outside dataset doughnut, and the other one in the inside dataset doughnut. Each dataset has his own ...
ddias's user avatar
  • 73
0 votes
1 answer
46 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 ...
Sas Ber's user avatar
1 vote
0 answers
54 views

URL segment "undefined" when clicking on item in chart.js

I'm having trouble with Chart.js where clicking on a chart segment always redirects to an undefined value. I have a doughnut chart and want each segment to redirect to a specific URL based on the ...
ALDI DAIM FAUZAN's user avatar
0 votes
1 answer
41 views

Chart.js 3.9 and Vue: Unable to handle onClick event

Usually, StackOverflow is my last resort cause I don't enjoy being annoyed and I assume neither do you, but I'm desperate. I want to capture a click on a graph Bar but I don't see a trace in the logs ...
Uriel's user avatar
  • 454
0 votes
0 answers
64 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 ...
Nishant Salode's user avatar
0 votes
1 answer
36 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-...
alextc's user avatar
  • 3,475
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 ...
MAQUIRANG MICHAELA KIM G's user avatar
0 votes
0 answers
30 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 ...
Skattch's user avatar
0 votes
0 answers
36 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 = ...
gifarz's user avatar
  • 3
0 votes
1 answer
52 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 ...
wasilikoslow's user avatar
  • 1,903
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 ...
Mi Hart's user avatar
0 votes
0 answers
26 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 ...
Shivshankar Prasad's user avatar
1 vote
1 answer
39 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,...
Samet Şahin's user avatar
2 votes
1 answer
52 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 ...
Link's user avatar
  • 1,683
0 votes
0 answers
84 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 ...
ChrisHusky's user avatar
0 votes
2 answers
62 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 ...
Rezo's user avatar
  • 33
-1 votes
1 answer
118 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 ...
Kris D. J.'s user avatar
1 vote
1 answer
45 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 ...
Marc Baeuerle's user avatar
0 votes
1 answer
113 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 ...
Dean MacGregor's user avatar

1
2 3 4 5
248