Questions tagged [chart.js]
Chart.js is an open source JavaScript library for creating animated, interactive charts for inclusion on web pages.
chart.js
12,381
questions
0
votes
0
answers
9
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 ...
- 11
0
votes
1
answer
98
views
How to show gridline at up?
I created show forecast of weather and I want to show gridlines (of temperature) at up. I tried something like this:
yAxes: [{
gridLines: {
display: true,
color: "gray&...
- 61
-1
votes
1
answer
39
views
How to render the coinbase API in stream line chartjs
Question: I am trying to render the level2 api in the chartjs. But unable to do it
I have kep the data in 2 variable bid, ask and trying to plot them against time.
code sandbox https://codesandbox.io/...
- 1,537
1
vote
0
answers
31
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
35
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
0
votes
1
answer
30
views
How to show dashed Y-axis, center X-ticks, and hide X-grid in Vue-Chartjs?
I need a horizontal dashed line, no y-axis ticks, hidden x-axis grid lines, and centered x-axis ticks for my bar chart. Solution required in vue-chartjs.
Chartjs installed package:
"chart.js"...
- 2,887
0
votes
0
answers
18
views
how do I set the pie color with pychartjs?
How do I add colors to pie chart with pychartjs?
chartjs has an example where it does the following:
backgroundColor: colorize.bind(null, false, false),
How can colorize be used in the python code ...
- 641
0
votes
0
answers
36
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 ...
0
votes
0
answers
35
views
How can I encode Tooltip in Chart.js?
hello I'm the beginner of making a webpage. I just used the template which I downloaded at Internet and changed a little.
Actually I'm Korean. so I used korean at my pages. but only the tooltip part ...
- 1
-1
votes
0
answers
36
views
Overlapping colours in chart.js not working
I was trying to achieve an overlapping line chart with filled colors by setting the alpha channel of the background colour to be 0.5 but it simply does not work.
The colours are yellow and grey and ...
1
vote
1
answer
95
views
ChartJS Pie chart with react-chartjs-2 Legend align to the right error
I am trying to create a Pie chart in react using react-chartjs-2 and chartjs.
For that I'm using "chart.js": "^4.4.3", "react-chartjs-2": "^5.2.0"
The problem ...
0
votes
1
answer
53
views
Show all data in chartjs
I've got some issue where I can't show all data which is the date and time.
I want the chart height to be at least take 80% of the screen height, allow horizontal scroll so that they will not be ...
- 241
0
votes
0
answers
16
views
Adding Custom Left Padding to Chart.js Title
I want to add left padding to the title of my Chart.js chart. Currently, Chart.js only allows setting padding for the top and bottom of the title. I need the title to be positioned 200px from the left ...
1
vote
1
answer
36
views
Legend label is not showing dash point style, it shows a line instead
The legend label is not showing dash point style, instead it shows a line:
I tried configuring the legend label but it did not work.
<div>
<canvas id="myChart"></canvas>
...
- 93
1
vote
1
answer
46
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
9
views
Show Tooltip on hover over label on horizontal bar graph in chart.js
i want to show the tooltip on hover over label
now what happening is when i drag my cursor from bar to label the tooltip remains i want
type: "bar",
data: {
labels: data....
- 1
0
votes
0
answers
15
views
Value on the Y axis is being skipped in chart.js 3
Having a weird issue with a graph where a line (450,000) is getting skipped
options: {
scales: {
x: {
scaleLabel: {
display: ...
- 11
0
votes
1
answer
19
views
Parcel build differs from localhost
I'm developing a small webapp with parcel to display some charts. I'm using
https://parceljs.org/
https://www.chartjs.org/
https://www.chartjs.org/chartjs-plugin-annotation/latest/
My app runs ...
- 956
2
votes
1
answer
40
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() {
...
- 33
1
vote
0
answers
60
views
Error: Cannot read properties of undefined (reading 'plugins')
I'm trying use chartjs-plugin-colorschemes plugin, but in your documentation says that I need install and import plugin, I use these commands:
yarn add chart.js chartjs-plugin-colorschemes react-...
0
votes
0
answers
23
views
How can I display datalabels after chart draw - Chart.js
I want to display datalabels after all of the chart animation completed.
But datalabels are already shown before the chart animation ended in my code.
Additionally, I'm not sure that my code is right ...
- 1
1
vote
1
answer
40
views
I need to format data from a json with chartjs with reactjs to display data with 2 x axes
I can't understand what I'm doing wrong, I need it to be like this example:
Corretly graphic as example
This is the json data I receive:
[
{
"label": "Others",
"type&...
0
votes
2
answers
77
views
How do I change the font of Chart.js/React-Chartjs-2 labels?
I have a Next.js personal website that I want to add features to. One of these features is a Chart using Chart.js + React-Chartjs-2. I use App Router.
The issue is that the fonts used in the chart ...
- 117
0
votes
2
answers
79
views
Prevent chart to resize due to long labels
i am using chart.js and react-chartjs-2. I have this polar chart and a dropdown at top left, as seen in the screenshots, they get resized due to long labels. when I give an empty array to display no ...
- 1,791
-2
votes
0
answers
29
views
How to center tick between grid line in Radar chart.?
To center ticks between grid lines in a Radar chart using Chart.js, you can adjust the offset option in the scale configuration. Here's how you can do it:
1
vote
1
answer
49
views
How to center the ticks between grid lines in Radar chart?
The problem is that I don't know how to position the ticks (numbers from 1 to 5) between the grid lines. Currently it is showing above the grid lines:
Here is the javascript code:
const ctx = ...
- 93
0
votes
1
answer
48
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
1
vote
0
answers
31
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
81
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
0
answers
36
views
Uncaught runtime errors: ERROR dispatcher is null
Trying to use chart.js, but everytime i try fetch the data it throws me 'Uncaught runtime errors:
ERROR
dispatcher is null' this error. The page doesn't render at all, everything on there is gone, ...
- 11
0
votes
1
answer
40
views
how to make chartjs-plugin-colorschemes 0.4.0 work with Chart.js v4.4.3
basically im doing everything like written in the doc, so
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script type="...
- 3,853
0
votes
2
answers
35
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
1
vote
0
answers
32
views
Indicate label for Horizontal line
I'm trying to find a way to add a label to show what red horizontal line indicates (in this case it's target) Can anyone help me to add a label for horizontal line which cross through y = 100, please?
...
0
votes
0
answers
54
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
37
views
How do I change the font color of this chart in chart.js
How do I change the font color of this chart in chart.js?
can anybody help me
this is my code:
const ctx = document.getElementById('chart');
// Chart.defaults.color = '#000';
new Chart(ctx, {
type:...
- 1
0
votes
0
answers
32
views
chart.js graph elements shifting position during continuous updates
I have implemented a Chart.js graph in a Blazor project for monitoring a flow. The x and y values are updated approximately once every second (not at exact intervals) when window.updateHistory(...
- 360
0
votes
0
answers
42
views
Chart.js line plot with multiple overlapping datasets
I'm trying to draw several lines on the same graph.
The different datasets have different labels (the X axis comes from a TIMESTAMP sql).
Here, the different datasets are concatenated, but they should ...
- 83
1
vote
0
answers
33
views
ChartJS Tooltips aren't correctly displaying. What am I doing wrong?
I am trying to add extra information to my tooltips (when a user hovers over data point in a line chart) and the only information showed is the Player Count. It should include Player Count, Game Time, ...
- 11
0
votes
2
answers
44
views
Trouble getting a candlestick graph to plot
The relevant parts of package.json are:
"@angular/core": "^18.0.3",
"chart.js": "^4.4.3",
"chartjs-chart-financial": "^0.2.1",
...
- 893
1
vote
0
answers
35
views
How can I add value text after graph with chart.js
I tried to add the value text that's stored in the var data1, and var data2 after the two graphs, but it won't show, I tried to solve this issue with the plugin "afterDatasetsDraw".
What &...
0
votes
1
answer
89
views
How do I create charts on my javascript website using data from mySQL database. Using EJS front-end
I am making a website where I can enter data for golf course greens, and then analyze it.
I am using express in my backend to route to my ejs pages. I am also using a mySQL database to store the data.
...
0
votes
1
answer
28
views
Rotate arrow radial axis radarchart chart.js
In reference to an question I asked before.
How to get radar chart coordinates using getValueForDistanceFromCenter with Chart.js?
I would like to rotate the arrow like a clock based on degrees. I can ...
- 11
0
votes
0
answers
50
views
Overflowing tooltips with custom callback
I use ng2-charts 3.1.2 and with using of line chart label callback and following settings:
lineChartOptions = {
scales: {
xAxis: {
type: 'time',
ticks: {
source: '...
- 326
0
votes
2
answers
63
views
How to have two consecutive points in a line chart be in the same category?
I'm trying to create a line chart that can have up to two points in one category in chartjs. In the example, the labels and data are each passed as arrays, so each label can only have one point. I ...
- 1
0
votes
1
answer
46
views
In Chartjs, how can I set the scales.y.min value externally
I am using a linear chart and using it to visualise waveshapes that can be quite complex. The application requires the data y range to be pre-scaled based on variable external requirements, with ...
- 11
0
votes
1
answer
58
views
Why is there a 1px gap between the background fill and the canvas edge in my Chart.js line chart?
I'm using Chart.js and react-to create a line chart, but I've noticed a small issue with the background fill. The line chart extends to the edges of the canvas as expected, but the background fill ...
- 437
0
votes
0
answers
60
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
1
vote
1
answer
390
views
Upgrading to latest angular 18 with ng2-charts errors on nsg-serve
Upgrading angular 18 with ng2-charts 6.0.1 on running n-serve throws error as below
imports ng2-charts, chart.js,chartjs-plugin-annotation. nothig helps and throws error.
I am trying to use in npn -...
- 139
0
votes
0
answers
74
views
How can I improve React Leaflet performance when rapidly updating a marker position?
I'm working on a page which reads GPX files (a series of lat/lon GPS points) and plots the route using React Leaflet as well as showing an elevation profile using react-chartjs-2.
When hovering over ...
- 1,330
0
votes
0
answers
41
views
How do I add padding for a grid in Line Chart-JS?
I want the point area with a tooltip to not break if the maximum value is reached.
There should be padding/margin in front of the top and bottom gridlines
I use "react-chartjs-2", its my ...
