All Questions
1,007
questions
3
votes
1
answer
82
views
Donut with rounded edges in one direction and white border between the segements
Chart js Donut segment is not displayed in one direction. First and last segments are not working as expected
Expectation : Need chart js donut rounded segments displayed in one direction with white ...
- 33
1
vote
1
answer
60
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 ...
- 81
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
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
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
0
votes
1
answer
50
views
I want to make only border top and border bottom to a doughnut chartjs
Problems :
I have the border left who add an triangle border left and right
And i have the natif problem of responsive legend size, i want to add css on segment but not on legend of this segment.
** ...
- 1
0
votes
0
answers
29
views
Updating donut with Chartjs
When I use the chartjs linear gaphic, my data is updated.
But when I use the donut chart, the data is not updated.
function addData(chart, label, data) {
chart.data.labels.push(label);
chart....
- 13
1
vote
1
answer
64
views
ChartJS : Fill within a curve dataset above a max, in between max/min, and below min limit with different color
Rails 5, ChartKick 5.0.5 => ChartJS 4.4.1
I have a curved line chart in ChartJS that plots about 0 on the Y axis with separate maximum threshold for positive values and minimum for negative values (...
- 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
0
answers
29
views
Dynamically size chart to fit within window
I'm using Chart.js to display charts. It's working well. I've decided to add a full-screen feature, which opens up the chart in a full-screen modal popup.
I have this working, but the chart takes the ...
- 66.9k
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
74
views
Graph.js does not apply my options setting
I have tried using lots of suggested things but nothing is working
I am trying to start y-axis from 0 but if there is only one data (one label and one data) it gives value on axis from example image -...
- 33
0
votes
0
answers
47
views
How to add total count in centre of the doughnut chart and bottom left and right value using Chart.js? [duplicate]
HTML
<canvas id="myChart" style="width:100%;max-width:600px"></canvas>
Jquery
<script>
const cValues = ["Candidate quotas", "Reserved seats&...
1
vote
0
answers
125
views
Apexcharts show all tooltip when page loads without hover
I copied samples from Apexcharts demo javascript and I want to show all the tooltips right after page loads.
var options = {
series: [{
name: "sales",
data: [{
x: '...
- 33
0
votes
1
answer
112
views
How do I set the fontsize fo the yaxis labels for radar graph in chartjs
I want to increase the font size of Yaxis step numbers.
I am using the below code
const myChart = new Chart(ctx, {
type: 'radar',
data: data,
...
0
votes
1
answer
89
views
Chart.js Bar chart doesn't show bars for multiple items
I am using chart.js with asp.net mvc 5 c# to draw charts. I am now facing a problem where multiple data values don't show the bar charts but only display the names. So for example data: [results....
- 31
0
votes
1
answer
44
views
show values on top of bars on each colmnin chart.js
I have tried a lot to show values on top of char but I couldn't do it please could you help me with this
i have also add plugins to show data.
<canvas id="myChart" width="200" ...
- 3
0
votes
1
answer
107
views
Is there any way to create a gap in between the stacked vertical bars in Chart.JS?
Image of stacked vertical bars with space in between
Is there any way to create a small gap between the stacked vertical bars in Chart.JS?
This is the example of the codepen: https://jsfiddle.net/...
2
votes
1
answer
882
views
Angular 9 chart.js Bar chart Click event
I have used chart.js in my Angular 9 application.
Here I want to get clicking bar dataset and label values.
This is my sample code
import { Component } from '@angular/core';
@Component({
selector: '...
- 651
2
votes
1
answer
1k
views
To increase the font size of label that appears on hover in chart.js
I want increase font size of label that appears on hover in chart.js,I am trying to give custom text to label but am not able to increase it's font.
var myPieChart = new Chart(ctxP, {
...
0
votes
1
answer
176
views
undefined labels in chart.js
$(document).ready(function(){
fetch_data();
var hour_chart;
function fetch_data(start_date = '', end_date = '')
{
var dataTable = $('#order_table').DataTable({
&...
0
votes
1
answer
151
views
annotation library for chartjs
annotation library for chartjs, i have chart with labels 0, 1, 4, 8, 12, 15, 20, 24, 25, 28, 32, and i have label 7.5 for adding vertical line to that label but this library adding it between 24 and ...
- 3
0
votes
1
answer
51
views
Aligning linechart with grouped-barchart using chart.js
The linechart datapoints are coming at the center of each label of grouped-barchart.
The input data will all be lists.
Plug-ins required to render the chart are "npm install chart.js", "...
1
vote
0
answers
528
views
Is there a way to rotate the background image of a Canvas without rotating the whole canvas? See example
Its a rough sample but would like to move the needle image as mouse moves without rotating the doughnut chart. Or is there a better way to approach it?
html:
<canvas id="myChart" style=&...
1
vote
1
answer
886
views
On hover / click change background color for the same bar on multiple charts - chart.js
I have 2 or more chart.js canvas. The purpose is to see quickly the same bar value on multiple charts.
When i put the mouse hover a bar on e the first chart ex "Thu" i want to search and ...
- 13
1
vote
0
answers
692
views
Chart.js annotation two vertical line on time axis and two different color
What could be the possible reasons for the vertical line not appearing on the graph despite searching for mistakes in the code and adding the annotation plugin? Additionally, how can two different ...
- 30
0
votes
1
answer
333
views
set stepSize for radar chart
I have used this radar chart.js
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
var options = {
elements: {
line: {
...
- 2,942
2
votes
1
answer
175
views
chart js radar chart make axes thicker
I have a radar chart with chart.js in MVC Core.net 6.
This is my code:
var options = {
scale: {
ticks: {
max: 100,
beginAtZero: true,
stepSize: 20,
display: ...
- 2,942
0
votes
0
answers
263
views
How can I use Chart.JS for minute-by-minute data?
I am trying to use Chart.JS to visualize temperature and humidity patterns throughout the day for an automated garden. For each day I have a JSON file which has a temperature and humidity reading ...
0
votes
1
answer
43
views
Unable to render two datasets from the controller in View
I am trying to draw a two-line chart with two datasets that share the same labels using chart.js on my ASP.NET MVC app.
I am only getting the data from "Value" plotted on the chart and not &...
- 141
1
vote
1
answer
189
views
Bar dashed chart is overlapping in chartjs
I have data and I am creating a stacked bar chart, I want one of the datasets to be a dashed bar chart.
The live: demo
Here is what I have done so far.
HTML.
<canvas id="myChart"></...
- 5,496
0
votes
1
answer
37
views
How to display dynamic PHP ID in chartjs
I am using chartjs inside PHP foreach for multiple charts. Im in a situation to call dynamic ID. I want to use ID as fulltime_32, fulltime_33 and so on. in the PHP foreach statement. I am getting ...
- 49
2
votes
1
answer
202
views
Instead of creating new chart in ChartJS, the new updated chart keeps the old data and adds the new
I have been trying to solve this problem with ChartJS for a few days now, and I am completely stumped
My program shows the user a set of input elements they use to select data needing to be charted, ...
- 59
0
votes
1
answer
119
views
How to load dynamic label and data from controller in chart?
I'm using List to load radar chart from controller.
How can i load dynamic labels and data for that chart from controller.
List<MyModel> modelIist = new List<MyModel>();
...
- 171
0
votes
1
answer
341
views
How to create chart with clickable bar using chart.js?
We need a chart with the ability to click on bar in this chart
and on click display element (div) and display data on this div using HTML and jquery
var xyValues = [
{x:50, y:7},
{x:60, y:8},
...
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
1
answer
462
views
Dynamically change ChartJS Line Chart using Jquery
I'm receiving 3 arrays from server as a response and I'm trying to create a line chart using ChartJS.
The line chart turns out to be fine when I feed in the static values but it doesn't reflect the ...
- 125
0
votes
1
answer
282
views
Problems Populating Chart.js OHLC Financial Chart from JSON Array (Ajax call from Django model)
Has anyone had success dynamically creating a Chart.js OHLC financial chart from a JSON array? In this case, I'm using an Ajax call to import the data from a Django model:
<script src="https://...
- 11
1
vote
2
answers
371
views
How to reference array results into Chartjs dataset in Javascript
I have managed to get a count of items in list by status, but cant seem to figure out how to add the data into Chart.js. I have tried referencing my dataset from within the chart but that does not ...
2
votes
1
answer
1k
views
How to add shadow effect on bar chart using ChartJs?
I'm using chartjs 3.9 to build a bar chart. I'm trying to get a shadow effect on the bars like this:
I couldn't find how to do this on the documentation. Can someone help me, please?
This are my ...
- 21
0
votes
2
answers
2k
views
Display text on tooltip when hover over Doughnut chart in JS
Here is the code. I am new in Js. I want to display text with data on tooltip when we hover on the doughnut without active the labels mentioned in datasets
const data = {
//labels: ['xyz', 'abc']...
1
vote
1
answer
119
views
xAxes value missing on chart.js
enter image description here
The value of xAxes are not showing at below of xAxes but the values are showing within the graph as per the image. I need to show all the values to be shown in the below ...
- 13
0
votes
1
answer
501
views
I want to Display Data instead of percentages when cursor hovers over Doughnut Chart in JS
const data = {
labels: ['xyz', 'abc'],
datasets: [{
label: 'Weekly Sales',
data: [12, 20],
backgroundColor: [
'rgb(254, 214, 10)',
'rgb(255, 90, 48)'
],
...
1
vote
0
answers
207
views
jsreport, dynamic number of charts through jquery
I'm using JSreport 3.4.1. and Chart.js 3.8.0. From a server API I'm getting a series of data to create n. charts. The problem is that the number of charts are never the same (they depend on various ...
- 520
1
vote
1
answer
51
views
how to make bar total in chartjs same like user input?
I want to make the total bars 12 when i input 12. how to make the length of variable labels same like my input???
this is my code:
function updateChart() {
let val = $("#num-input").val()
...
- 129
4
votes
1
answer
9k
views
How to Chart.Js, change the color by pressing the button (or any element)?
how can I change the line colors in the light mode of the chartjs I use when I switch to dark mode? Can you help me with this?
Here are the colors I use now:
This is how I need to change colors when ...
- 77
0
votes
1
answer
1k
views
Why Ticks Not Working in Chart.js but everything is correct?
var xValues = timeArray;
new Chart("myChart",
{
type: "line",
data:
{
labels: xValues,
datasets: [{
label: "Size",
data: sizeArray,
...
0
votes
0
answers
52
views
How to pass a function inside another function to an HTML button
I have two major functions fetchData() and getChart() they fetch data from my DB and have chart data(datasets, config, options etc.) respectively. Inside my getChart() I have 3 functions namely ...
0
votes
1
answer
69
views
How to pass a nested function to an HTML button and Dropdown menu
I have two major functions getChart() and fetchdata() and they get the chart data and my x and y axes data from database respectively. I want to use a function inside my getChart for my dropdown menu ...
user19247189
0
votes
0
answers
71
views
Updating chart.js with ajax
i'm trying to auto-update my chart js graph trough ajax , but my if statement always return the wrong awnser on the first iter , any idea why ? thank again. , tell me if you need anything more.
...
- 1