Questions tagged [chart.js]
Chart.js is a JavaScript library for creating animated, interactive graphs for inclusion on web pages
0
votes
4answers
2k views
Ng2-charts / chart.js - how to refresh/update chart - angular 4
html:
<canvas *ngIf="actionData" baseChart width=800 height=300
[datasets]="lineActionData"
[labels]="lineActionLabels"
...
4
votes
4answers
5k views
How implement Chart.js in Angular 2?
I am using the latest version of Angular 2, V4.0.0 and I want to use graphs from the Chart.js library in my project without many complications.
How can I implement Chart.js in my angular project that ...
9
votes
3answers
7k views
How to disable chartjs legendclick
I would like to disable chart.js Spider chart legend click because when I click on the legend the data series is hiding the associated set of values as shown in the below images.
My requirement is ...
2
votes
1answer
25 views
Change point style in Chartjs via external event
I'm trying to change the point style of a specific element in a line chart via an external 'mouseover' event. This event retrieves the index number of the element in the line chart of which I would ...
0
votes
1answer
44 views
chart.js chart distorted with fixed width
I have a chart.js canvas inside a container which I gave a fixed min-width, so people could scroll the chart on mobile devices.
But as soon as the container has its fixed width, the chart is getting ...
0
votes
0answers
11 views
Plot an equation using Chart.js
I'm trying to use Chart.js to try and plot a equation (such as y=2x) given by the user. I don't specifically have to use Chart.js, I just liked it due to the interactive aspect that they have.
What I'...
0
votes
1answer
19 views
Chart.js - each dataset value = different axis
Using Chart.js, I want to scale a single value from my dataset to a different axis (Not the whole dataset)
As shown in the screenshot, the 4 items have different units (kgs, meters). The last item ...
0
votes
0answers
10 views
javascript - using lodash to summarise/reduce ChartData length
I have a ChartJs ChartData Object where the labels are evenly timesteps (1h, 1d,...) and datasets with corresponding data on them.
const chartData:ChartData = {
labels:['2018-08-23 0:00', ...
0
votes
0answers
16 views
Chartjs - Remove gap between bars
I have the following graph and I want to remove the gap between each of the bars.
I've tried everything I can think of to get rid of the gap. barPercentage & categoryPercentage are both set to ...
0
votes
0answers
18 views
Cannot get chart.js chart to load in chart.js tooltip
I am trying to put a radar chart.js chart inside of a chart.js tooltip. My chart.js tooltip is a custom function that displays a specific chart for each node that is highlighted. So in my custom ...
0
votes
1answer
9 views
chart.js tooltip position, tooltip not displayed
I have a line chart with two datasets. Initially the Y Axis is 0-100. The first line is roughly a straight line around a value of say 70, the second line is all below say 30. If I zoom the chart ...
2
votes
4answers
1k views
ChartJs title not showing
I'm using ChartJS version 2.6.0. and I'm having some difficulties with the 'title' option of the chart. It's simply not showing on the rendered chart.
I'm following the documentation, and passing the ...
0
votes
0answers
11 views
ChartJS, show tooltip only for the Charts in Bootstrap Modal
I have multiple ChartJS charts, some of them are in Bootstrap modals.
I have disabled tooltips globally with below code:
Chart.defaults.global.tooltips.enabled = false;
However, I would like to show ...
2
votes
1answer
23 views
ChartJS set default options only to specific Canvas, not globally
I have 10+ Charts and all are Line Charts, created using ChartJS.
Chart One
var ctx = document.getElementById(cid).getContext('2d');
Chart.defaults.global.elements.line.tension = 0;
var chartOne = ...
5
votes
1answer
54 views
Chart.JS Mixed Chart - Bars Not Showing
I'm building a graph using ChartJS and the Alpha-Vantage API. And for the most part, it works as expected.
But this is only if every dataset is plotted as a line-graph (So my data is definitely there)...
0
votes
1answer
17 views
chart.js animation gone when adding animation onComplete function
I'm using chart.js in an Angular application. The sliding from bottom of the bars in the charts works fine until I added the animation onComplete function. With this function enabled the bars just ...
0
votes
0answers
24 views
Chart.js Dynamic data,graph plot MVC
Hi guys I am trying to draw a graph using chart.js. I am giving it datapoints to draw the graph through a controller and model.
I have a main view consisting of partial views.Partial view is where I ...
0
votes
0answers
7 views
How to set ranges for a pie chart using chart JS for years (1960-1970 and so on with range of 10) in c#?
I have to generate a pie chart in the UI for which I have to write code in business layer (C#) and generate using the services.
In this process, I am considering the individual year to plot the pie ...
0
votes
0answers
10 views
Chart.js - remove labels
I have a pie chart made in Chart.js. I want to remove the label on the chart NOT the legend. AKA the grey numbers. Any thoughts? Not much online about this.
0
votes
0answers
11 views
How do I use a single Y scale to a double horizontal bar in chart js
I got a chart with double horizontal bars that are repecting differents y scales.
I've read the documentation, some tutorials and i didn't saw something about it.
I want to use a single y scale to ...
0
votes
0answers
10 views
How to insert shadow in Chartjs?
I need to insert shadow both in the graph and the text-shadow in the font, my code below it is inserting the shadow in the graph and in the font when hovering.
I'm using the new version of chartjs, ...
0
votes
0answers
18 views
Access Class Member from OnClick Function in Angular / Typescript [duplicate]
I am working on what is a fairly straight forward ChartJS graph in Angular. When the user clicks on a bar in the graph, I would like to route the user to a new view, but use the context of the bar ...
0
votes
0answers
18 views
Use Chart.js - How to make iframe not to generate
When I use the chart.js to create a chart on tag, it always auto-generate an <iframe> tag front my canvas...
I need to make the <iframe> tag not to generate, how I do that?
0
votes
0answers
11 views
Canvas size does not respect my style [duplicate]
I have in my Html code:
<div><canvas id="canvas" style="width:300px;height:300px"></canvas></div>
then I draw a graph using chart.js and the canvas vastly exceeds my given ...
0
votes
0answers
11 views
How to hide datasets value of line in Chart.js
I'm using Chart.js version 2.7.2 via CDN with below config. It's showing datasets value like this.
I have tried with version 2.1.0 with the same config and it works as expected.
Here is my config:
...
2
votes
3answers
6k views
How to add title inside doughnut chart in Angular Chart?
I'm using a doughnut chart in Angular Chart. I want to place some text in the center of the doughnut. I've read this question's answers but none of them works for me, because I have tooltips and for ...
-1
votes
2answers
44 views
How to show text as a series on a chart in Javascript?
How would I add a series that is just labels to a chart like the one shown below?
I'm happy to use any charting Javascript library, like ECharts, Chartist, Chartjs. Chartjs would be easiest I think.
...
0
votes
1answer
45 views
Chart.js chart by passing data through the controller MVC
I am trying to display a chart by passing to it data from a controller. I am using chart.js
Model:
public class DatapointLine
{
public DatapointLine(double x, double y)
{
this.X = x;
...
0
votes
0answers
45 views
Rendering dynamic data using chart.js
I am trying to generate a graph using chart.js . To draw the graph I am using a model and sending the data through a controller. I am getting the following error:
chartjs.init.js:3 Uncaught TypeError:...
2
votes
1answer
106 views
Make a Histogram in Chart.js
We use the Chart.js library in our codebase and I need to create a histogram, which is not one of their default chart types. So I'm attempting to override the x-axis tick marks on a bar chart so that ...
11
votes
3answers
13k views
Uncaught TypeError: Cannot read property 'offsetWidth' of undefined - chart.js
I have this simple html:
<canvas id="myChart" width="400" height="400"></canvas>
and this js:
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
...
2
votes
1answer
26 views
Changing style of individual point Chart.js
I want to change the style of a single point in my Chart.js graph. I tried the solutions here
ChartJS - Different color per data point
But none of them work for me. For example, to change the ...
0
votes
0answers
17 views
Unexpected padding with Chart.js
I am currently working on a back office, and I took a free theme to implement it (the theme: https://github.com/puikinsh/gentelella).
I am using ChartJS with this theme, but I have an unexpected ...
0
votes
0answers
16 views
Chart.js isn't rendering data correctly
I have a mongo query that I'm using to render data on the front end. When I tried using it, it was returning [object Object] on the front end but I fixed it using JSON.stringify.
The problem is that ...
1
vote
0answers
24 views
Set chart.js Y axis max and step size values
I wrote a simple line chart using charts.js which updates the data with ajax calls. And I have set the y-axis max and step size values according to the data by updating the chart options. Now I need ...
0
votes
0answers
6 views
ng2-charts: How to set fixed range for y axis
I have a chart.js chart using ng2-charts module. The chart shows Percentage on y axis and time on x axis. Is it possible to set y axis to show 0 to 100 instead of dynamic range based on data?
1
vote
0answers
21 views
moment.js is not loading before chart.js in Firefox extension
I am porting a Chrome extension to Firefox and it adds Chartjs charts to a page. It requires moment.js and works great on Chrome. However, when I port it to Firefox, the charts don't load and I get an ...
1
vote
0answers
24 views
How to set ticks on axes dynamically with chart.js?
We have values which can vary when the site is loaded and we want to dynamically set the tick step size. We have two datasets with differing units in the same chart and want to have the horizontal ...
0
votes
0answers
16 views
How to let the tooltip be displayed for longer time when user hovers over a line chart drawn in chart.js?
The tooltip that gets displayed after user hovers on a line chart in chart.js stays for a short time,about 2-3 secs. I want the tooltip to be displayed till the time mouse pointer is over that same ...
22
votes
2answers
28k views
Chart.js 2.0 doughnut tooltip percentages
I have worked with chart.js 1.0 and had my doughnut chart tooltips displaying percentages based on data divided by dataset, but I'm unable to replicate this with chart 2.0.
I have searched high and ...
1
vote
1answer
23 views
chartjs-plugin-streaming + chartjs-plugin-zoom
(sorry for my english)
I use chartjs-plugin-streaming for the real time chartjs and I want to use the chartjs-plugin-zoom.
But the zoom don't work.
When i test to zoom, appear the zoom area but on i ...
0
votes
0answers
14 views
ng2-charts: How to set Title of chart dynamically in typescript
Using "ng2-charts": "^1.6.0".
I have a line chart like this:
<canvas baseChart
[datasets]="lineChartData"
[labels]="lineChartLabels"
[options]="...
0
votes
1answer
7 views
setInterval on my Doughnut.js
Hello to all the team and everyone,
I want to repeat the animation of the animation of Doughnut.js every 5 seconds. when refreshing it only load itself once.
this is the Doughnut.js and the content ...
0
votes
0answers
14 views
How to populate Bar Chart.js in MVC 3 with 2 arrays?
I have a problem to fill out a bar graph, I managed to pass the controller's arrays to the view, they are 2, but I do not know how to assemble my graph, could you help me please?
I already tried some ...
14
votes
3answers
41k views
Draw a Chart.js with ajax data and responsive. A few problems and questions
I am using Chart.js (http://www.chartjs.org/docs/) for charting.
I need to get the data from an Ajax request and the chart to be responsive.
In my HTML code I added a canvas as follows:
<div>...
1
vote
0answers
13 views
chart.js AJAX laravel Uncaught TypeError: Cannot read property 'fontSize' of undefined
I'm trying to get chart.js data through AJAX, this returns error
"Uncaught TypeError: Cannot read property 'fontSize' of undefined"
Tried jquery ajax, same error
Tried following this tut, tested ...
0
votes
0answers
28 views
How to group labels in Chart js
Hi I'm working with Chart JS library and I need to group yLabel like this image. but I don't find any things in the library docs to do this need.
So How Can I do It?
0
votes
0answers
27 views
Rounded bar corners Vue chart js
I'm trying to create rounded bars on my chart js in vue.
I can't figure out how to make it work.
Can anyone help please.
I have my diagram.js where i initialize my vue chart.
import { Bar, mixins } ...
0
votes
0answers
16 views
ChartJS: how to correctly display tick marks for second yAxis?
I created a this bar chart in chartjs:
Unfortunately I cannot get the tick-marks on the second (right) Axes element to display correctly. As you can see, they are always floating freely to the right ...
0
votes
0answers
20 views
Long text in x-axis is cut in bar graphs ng2-charts
I've tried the bar graph in the documentation and it works fine responsively. But when I try to enter long text with grid layouts, the ticks of the x-axis is getting cut as in the following. I'm using ...
