Is there any chance to customize chartjs with a large amount of data? To be exact, the problem is with overlapping labels when there is more data than in it's documentation. I've worked with other charting systems and labels (represented by dates for examples) where properly scaling, but ChartJS seems to do nothing with that?
Try to use Chart.Scatter plugin instead the line chart.
http://dima117.github.io/Chart.Scatter/
It receives the array of points with X and Y fields. Scale parameters are calculated automatically based on chart data
Related
I was building a chart in HighCharts with logarithmic axis type. Here is a link to the code in JSfiddle.
https://jsfiddle.net/PowerHouse/ekwoupcy/15/
I'm consuming data from Google sheets and at the moment, the values are plotted exactly as in Google Sheets. I however wanted to plot the changes over time instead, something similar to this image. Ignore the left percentages (labels), the ones on the right are the workable ones or rather where my focus is on.
I have tried applying the plotOptions and specifying the compare: 'percent', but still I get the chart not showing the change over time but the exact stock value instead. Is there a way I could get the percent changes instead of the values themselves? I will appreciate any assistance. Thanks!
I'm using Amcharts and I want to build something like this. But my x-axis is not in date format it is numeric (1,2,3,4..). Two questions
Can I use the above chart but with the numerical axis. I have tried but not able to make it work with the numerical axis.
Can I use other serial charts to create multiple y-axis charts with in the same chart where I have successfully replaced the date axis with the numeric axis
Also if there are any D3 alternatives available please mention.
I have a collection of projects, each of which have a completion date. I am trying to display it on a horizontal bar graph such that the label is on the y-axis and the completion date is on the x-axis, as in this image:
Target axis. I am currently using Chart.js
The problem I am encountering is that Chart.js seems to be incapable of interpreting my data as dates - instead it evaluates it (for example, 2017-02-10 is interpreted as 2005). Based on the documentation at chartjs.org/docs/#scales-time-scale, I have tried to use Moment.js to parse my date strings into moments, but it can't render it.
My best guess is that, since it's a horizontal bar graph, my x-axis values are being treated like y-axis values, and the documentation states that the time scale is only supported on the x-axis.
Is there some workaround that would allow me to use dates as the data, so that it looks like this image, but with the axes from the first image? If not, is there another library I could use that does support this? I haven't found any examples of people using time scales on a horizontal graph, so I don't know if other libraries like CanvasJS can do it either.
Goal data, but wrong x-axis
Thanks.
I have tried using all sorts of combinations of tickInterval, tickPixelInterval label formatter and tickPositioner and I haven't been able to solve this issue.
I have a chart builder that pulls in different feeds and allows the user to modify the date range of those feeds before shooting this data into highcharts and spitting out the chart.
The problem is that some of the time, the first and/or last dates get cut off. Here is an example:
Without adjusting the margins of the chart (which causes the chart to take up less space), how do I prevent this from happening?
If I was able to determine the pixel location of the ticks and their labels, I could in theory, hide the specific ticks and their corresponding labels which were located outside the graph / cut off. Thoughts?
Without looking at your code - there are a few things you can do.
Rotate your labels
Play around with the x/y axis labels
Align them to the right
Hopefully one of these would help your cause.
I want to make a graph which plots numeric points like (23,45),(32,67) etc using canvas tag in html5. I found this graph in this link http://www.worldwidewhat.net/2011/06/draw-a-line-graph-using-html5-canvas/ The problem in this graph is that only y-axis works with numeric values.I want to make X-axis work with numeric values as well using the same logic as y-axis...Please help
This is a really easy fix. The as it is graphing, it just references the length of the data instead of the X values. We can work around this easily by adding a getMaxX() function, and referencing the actual X values. Here is a working example.