4,631 questions with no upvoted or accepted answers
11
votes
0
answers
3k
views
ChartJS responsive resize for print - not working in Firefox/IE11/Edge
Using the following code I've managed to get ChartJS to resize correctly on Chrome before the print page appears;
function beforePrint () {
for (const id in Chart.instances) {
Chart....
- 399
9
votes
0
answers
14k
views
Insert a image in a excel worksheet using xlsx - Node.js
Good day everyone,
I'm looking for anyone that can help me to solve my problem. I am trying to save an chart generated using chart.js into an excel file. Right now, I am able to save it as an png but ...
9
votes
0
answers
1k
views
Why does Chartjs line chart does not animate to new values?
I am using a chartjs line chart showing time data where I want to update with new values from an ajax call.
I have time on the X axis (1 days on 15 minutes intervals) , and just numbers for the Y ...
- 7,769
8
votes
0
answers
5k
views
Chart.js keep two charts side by side on one canvas
Like in the title I would like to use one canvas to share by chart.js. I have seen side by side with DOM, but this is something else, I need to keep one canvas and preserve animations.
I use Chart.js ...
- 480
8
votes
0
answers
743
views
Adding a Highcharts 'Navigator' Component to Chart.js In React
I'd like to add a box underneath my chart that users can drag in order to select the specific date range that they'd like to view. It's difficult to explain, but the Federal Reserve includes it with ...
- 419
8
votes
1
answer
2k
views
Hover/click area in filled line chart in chart.js
Given a line chart in chart.js with areas under the curve filled. Is there a way to get a useful event when the user hovers over or clicks the filled area?
var chart_canvas = document.getElementById("...
- 19.9k
8
votes
1
answer
2k
views
Chart JS show multiple data points for the same label
I am using Chart JS for the first time and I wanted to show multiple data points for the same label. Can I do this without creating multiple datasets each time. Also, I will know the number of ...
7
votes
0
answers
5k
views
Increase padding between legend and chart with react-chartjs-2
I am trying to increase spacing between legend labels and chart with reactjs, I've looked for different solutions but most are with vanilla js. I've added this in my chart options based on this answer
...
- 1,638
7
votes
0
answers
1k
views
How to set a fixed or minimum tick limit in a chart with chart.js?
I have a chart, using chart.js, and I see there is an option maxTicksLimit, but that isn't enough, because my data on the X-Axis can range between 5 (so in this case I would need 5 ticks at 1 stepSize)...
- 1,783
7
votes
1
answer
4k
views
chart.js switch x/y axis on line chart
Let's say I have a line chart like this: https://jsfiddle.net/13fyhL4j/
HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.js"></script>
<canvas id="...
- 488
7
votes
1
answer
834
views
Editing Chart.js legend template
I am working on a project using chart.js. I want to display data in a Radar chart form. We have 5 different data sources. To make our radar chart more readable we have divided some of these data ...
- 346
7
votes
2
answers
2k
views
Remove left and right padding in Chart.js
How can I remove the padding within the canvas element when using chart.js? (See red area in the image below)
I already set the Padding Option to 0, but that doesn't seem to effect the spacing on the ...
- 1,512
6
votes
0
answers
5k
views
Rechart Scrollable bar chart, In a simple bar chart with large data how to implement scroll when Bar is dragged left or right( without Brush or Pan)
Hi I want to implement bar chart in rechart react. it should scroll when user clicks and drags Bar to Left or Right. I have already tried Brush and Panning but not suitable for me. requirement is no ...
- 96
6
votes
0
answers
2k
views
overlapping text in vue component for doughnut chart.js
I have a chart.js doughnut chart vue component as below
The problem is that when i use multiple chart instances the text in the middle overlap.
But they are overlapped. I tried changing titles pacing, ...
user10090131
6
votes
0
answers
2k
views
Fullscreen Chart.js while keeping the chart quality
I have chart.js. It looks good when it is with a smaller size, but I have implemented also a fullscreen option to the chart.
It opens as expected, but the quality of the chart when on fullscreen is ...
- 1,339
6
votes
2
answers
476
views
How to access labels array using chart plugin (Chart.pluginService.register) in Chartjs 2.x?
I want to hide the last label in the chart. It is not a static array, data keeps on coming. Hence the last label cannot be just set to blank or null value. Is there any chartjs option to hide it or ...
- 583
6
votes
3
answers
2k
views
implement chartjs zoom with buttons
Is it possible to implement zoom buttons for quick zooming (+ and - buttons) with chartjs
Now I use this code:
pan: {
enabled: true,
mode: '...
- 191
6
votes
0
answers
733
views
Multiple labels in chartjs with stacked bars on angular 4
My problem is that I have to display one label for each bar but i can't because when i add labels to the json chartjs add new group of empty bars
as I show in the picture, I'm using stacked bars, how ...
- 61
6
votes
1
answer
1k
views
Chart.js LineChart how to show only part of dataset and support horizontal scrolling
I'm using Chart.js 2.5. My case is that I have a dataset with 40 data, but I want to show only 7 data in the line chart, but still can horizontally move left/right to discover rest of data.
I tried ...
- 4,349
6
votes
0
answers
4k
views
Chart.js attach extra data
I have a pie chart that I want to attach a URL to, so I can navigate to it when clicked. However, I can't find any way to attach extra data to the chart, so that I can find the section of the pie ...
- 24.4k
6
votes
1
answer
5k
views
How to dynamically set ChartJs line chart width based on dataset size?
I'm using ChartJS (v2.1) to create line charts. I don't have a fixed size dataset, and I want the line chart to adjust its width based on how big the dataset is:
Large dataset:
Smaller dataset:
I ...
- 175
5
votes
2
answers
3k
views
This method is not implemented: Check that a complete date adapter is provided
I'm trying to get Chart JS to work with time axes, but I get this error in the browser:
Uncaught (in promise) Error: This method is not implemented: Check that a complete date adapter is provided.
I ...
- 51
5
votes
1
answer
3k
views
Missing Class Properties Transform Error using Chart.js in React
I'm trying to generate my first chart in react using Chart.js, and I cannot seem to get over this error. I'm using "react-chartjs-2": "^5.1.0", "chart.js": "^4.1.0&...
5
votes
0
answers
728
views
Render bars from multiple datasets at full-width when there is no overlapping data in ChartJS
Examples within. For reference, I am using the latest version of ChartJS (3.2.1) and the latest version of react-chartjs-2 (3.0.3).
I want to know how to make my bar chart display in a specific way ...
5
votes
0
answers
549
views
chart.js async callback (with return value)
I'm currently working on a port for chart.js to blazor. There we do interop from JavaScript to C# and the other way around. Chart.js supports callbacks like the custom tick callback or the onClick, ...
- 4,329
5
votes
0
answers
979
views
Responsive chart growing uncontrollably
I have a vue component that implements vue-chartjs's HorizontalBar component that I render as a cell in a bootstrap-vue table. My desire is to have the chart maintain a fixed height but scale ...
- 419
5
votes
2
answers
333
views
Live Update Callback -> afterTitle with Array via JSON file
I'm working on a chart, I'm live updating the Chart every 5 seconds that the data comes in. I could manage to get the info from the database and update it really easy, but I just came across a problem ...
- 79
5
votes
0
answers
192
views
Is there a way to include ticks/gridlines on non sequential axis? Also, is it possible to add border styling and custom tick positions?
So, Google charts API is getting deprecated soon, and we're migrating from it into chartkick + chart.js.
I've just joined the project, in a change of development team, so I'm fairly new to it, which ...
5
votes
0
answers
781
views
ChartJS Pie chart is too small on mobile
I am trying to make my ChartJS Pie chart responsive on mobile. All the labels and titles scale ok, but when it comes to the actual chart
it looks like this.
This is what I am aiming for it to look ...
user2062626
5
votes
0
answers
686
views
Have zoom work on x-axis, with y-axis to auto-scale to data points shown on visible graph segment
I have a graph plotting with ChartJS and plugin 'chart-plugin-zoom' for zooming.
I need to auto-scale y-axis to data points shown on visible graph segment while zoom on x-axis.
How I can do it?
zoom:...
- 71
5
votes
1
answer
537
views
Chartsjs multi-axis, make the scale appear/disappear when the dataset is activated/deactivated
I'm using charts.js.
This is my chart:
I have 3 or more datasets in the same chart, each with a different scale, let's image that all the scales are on the left.
As default when deactivating a ...
- 7,153
5
votes
0
answers
529
views
How to add labels inside a horizontal stacked bar chart with Chart.js
I'm trying to add labels inside each stacked data in a horizontal bar chart.
It seems the mirror option doesn't work for horizontal bar charts, and the similar questions on SO do not work (Chart.js - ...
- 23k
5
votes
0
answers
717
views
Real time application using ReactJS+ChartJS+SSE
I'm trying to build reactjs application. In this application I want to use chartjs to show line chart by subscribing the Server sent events(SSE).
I want to update line chart when there is new message ...
- 51
5
votes
0
answers
484
views
Chart.js gradient fill based on line position
I'm building a chart using Chart.js, and trying to fill the space under the line with a gradient, however I want the gradient to be based on the line and not from the canvas. e.g. this is the standard ...
- 51
5
votes
0
answers
9k
views
Horizontal chart label using Vue-chart.js
I have developed a horizontal Bar chart using Vue-chart.js, all the data and labels are coming from API. The problem is that the value is also visible along with the label, How can I hide the value ...
- 409
5
votes
0
answers
1k
views
Zoom a div/canvas element in angular on click
Trying to achieve zoomooz plugin like functionality in Angular . Since npm does not support zoomooz. Is it possible to have same functionality i.e. animated zoom on click. I am using Angular 6 with ...
- 719
5
votes
1
answer
4k
views
Issues with react-chartjs-2
I have issue with react-chartjs-2 and chartjs-plugin-streaming, my goal was to create a live graph with stream, but it ends up in error and I don't quite know why. Anyhow, my imports are like this:
...
- 126
5
votes
0
answers
4k
views
stepSize is not working in chart js for line chart x-axis
So i have a line chart in Chartjs, my X axis looks like this.
scales: {
xAxes: [{
display: true,
ticks: {
maxTicksLimit: 7
}
}],
When i do this, i get the appopriate number of ...
- 613
5
votes
3
answers
5k
views
How to dynamically change the annotation value in Chart.js
I am using chartjs-plugin-annotation and chartjs-plugin-draggable in my chart.js project. When I changed the value of an annotation which draws a vertical line and tried updating the chart the line ...
5
votes
0
answers
1k
views
Display json data on vuejs chartjs
I would like to read a json file and plot the data on a Chartjs using VueJs.
I was able to display some data but not from a Json file.
So far I have a vue.app looking like this:
export default {
...
- 133
5
votes
0
answers
515
views
How to get the value of the area under the curve in Javascript using Chart.js
I want to know if there is a easy way to get the value of the area of the curve that I plot using Chart.js.
I know that I can use a line chart and fill the area under the curve "line chart with fill ...
- 195
5
votes
1
answer
8k
views
Chartjs real time graph x axis movement
I want to display a chart with Chartjs which displays real time data and slowly scrolls along the x axis, I have tried it here with js fiddle and it just jumps like crazy up and down: https://jsfiddle....
- 51
5
votes
0
answers
355
views
Custom bullseye chart for Salesforce chart.js
I would like to create a layer of overlapping circles. Something like the following https://i.sstatic.net/pzeBH.jpg
I guess it would be similar to a bullseye chart. I would imagine it needs to be ...
- 369
5
votes
0
answers
1k
views
Chartjs: multiline year datasets to display in a one year span
I've created this chart with the code below, that takes a time span of multiple years for data comparison. I have a dataset similar to the one below, but each set can be either shorter or longer than ...
- 51
5
votes
1
answer
5k
views
set y-axis scale manually in a bar chart using angular-chart.js
I'm creating a bar chart using angular-chart.js(0.9.0). The version of Chart.js being used along is 1.0.2.
In my chart, unfortunately, the range of values is very broad. The highest value being in ...
- 271
5
votes
0
answers
4k
views
Chart JS display value of y Axes on mouse over chart with respect to X Axis
In chart JS my chart shows value only when my mouse move over chart I want to display multiple chart value when my mouse moves over any point in chart.
That value is for Y axis with respect to X axis ...
- 989
5
votes
1
answer
3k
views
Chart.js dataset controller 'null' when chart drawn
Let me apologize in advance. I'm not a javascript/web developer and I don't even claim to have a working knowledge of the language or a good grasp of the environment. I'm an embedded C/C++ programmer ...
- 51
5
votes
1
answer
2k
views
Chart.js not loading on reload
I'm having a pretty strange issue with Chart.js in Meteor.
I have one chart on the page that gets its data using Session.get('values'); to get their information. This works fine if you change routes ...
- 357
5
votes
1
answer
1k
views
How to get any y value for specified x in chart.js?
This example is very skewed, but it shows my point well enough. The blue line has a large gap (so a bunch of extrapolated data) for the first ~2 weeks of Nov. I want to hover over point on the red ...
- 1,069
5
votes
2
answers
5k
views
chart.js v2: Align time scale labels with the center of the bars
I am trying to align the generated time scale labels using Chart.js v2.2 with the centre of the bars of a bar chart. I have tried the offsetGridLines option but this seems to have no effect when using ...
- 51