I'm trying to display a formatted string for thousands and million amounts for only certain ticks on a horizantal stacked bar chart.
See line 18 (which works): https://stackblitz.com/edit/angular-sl5pqg
If the line is changed to const actualAmount = 12500000;, I am expecting "$12.5M" to be displayed on the first tick point I want to display but it's coming up blank.
Could someone kindly let me know what I'm doing wrong?
Many thanks!
Ben
Your code looks fine but you need to define ticks.autoSkip: false:
ticks: {
...
autoSkip: false,
Please have a look at the amended StackBlitz
If autoSkip is true (default), Chart.js automatically calculates
how many labels can be shown and hides labels accordingly. Labels will
be rotated up to maxRotation before skipping any. Turn autoSkip
off to show all labels no matter what.
Related
I'm trying to apply the zooming function on a chart I have on my website.
More or less, the actual code of the chart is the one I added in the following CodePen: https://codepen.io/leonardodaga/pen/eYNZdVV
This example works, but I'm trying to use a different xAxis type (not "time") and to format the xAxis ticks with a callback (now commented in the CodePen):
callback: function (value, index, values) {
return Math.floor(value).toFixed(0) + '.' + (((value - Math.floor(value)) * 12).toFixed(0));
},
Removing type: "time" the zoom ends to work.
Is there something wrong with what I'm doing?
It was my mistake, I was passing the data with a wrong format.
In codepen code above, X and Y data were passed using two different array (the first as labels). I should have passed the XY data as a single, two components array.
There is another codepen in my dashboard (Chart.js Linear Zoom example) that shows the way to beginners like me :-)
Callback for ticks was definitely not the problem.
I have too many points on x-axis in my chart. I would like to limit maximum of displayed points to 100. But at the same time still displaying same chart. Exactly same chart - but with fewer points.
screenshot of my chart with too many points
I have no idea how to do it in PHP at server side so I was thinking if there is any solution on client side in chart.js?
It's your responsibility to give chart.js the points it should display. You have to limit the arrays with the labels and the data to 100 datapoints. Use every second data or so. Just do it in plain JavaScript. There's no function in chart.js for that.
For large datasets, chart.js does offer a data decimation plugin that automatically decimates data at the start of the chart lifecycle, reducing the number of data points drawn.
According to chart.js docs, to use the decimation plugin, the following requirements must be met:
The dataset must have an indexAxis of 'x' The dataset must be a line
The X axis for the dataset must be either a 'linear' or 'time' type axis
Data must not need parsing, i.e. parsing must be false
The dataset object must be mutable. The plugin stores the original data
as dataset._data and then defines a new data property on the dataset.
Your chart options should look something like this:
options: {
parsing: false,
plugins: {
decimation: {
enabled: false,
algorithm: 'min-max',
},
},
scales: {
x: {
type: 'time',
ticks: {
source: 'auto',
autoSkip: true,
}
}
}
Remember also that if you disable parsing the data you pass should be in the right format for the type of chart you chose, so epoch timestamps in this case. More info here.
Finally, you can find a working example here.
Currently working on a chart that displays upwards ~1000 datapoints at any given moment between 2-3 datasets.
The only thing is that each of the points has a different timestamp (x-value).
Our goal is that upon hovering on one data point, it also brings the closest data point from the other datasets as well. We were able to achieve that with:
options={{
tooltips: {
mode: 'x'
}
}}
I understand that there is a default pointHitRadius and that seems to be the reason why multiple values of the same dataset are appearing in the same tooltip.
I made a simple test case: TEST
I increased the pointBorderRadius and it seems to include 1-5 points at a time.
Is there a way to only include data from each dataset ONCE?
The closest thing I found (before having to extend functionality), is that there is a filter function available.
However, from what I can see, it looks like it only returns one instance from each dataset. Which wouldn't be too helpful.
Anyone run into this issue?
We have a horizontal google visualization chart, and there appears to be a bug where, if the value of the bar is zero, it will pop the label off to the left side of the axis, covering up the scale ticks, rather than pushing it to the right. We noticed that, if we set alwaysOutside to true, the zero label works as expected, but we want the non-zero values to be inside the bars. Is it possible to set custom values for alwaysOutside depending on the row, or does anyone else run into this bug? What we're looking for is something like:
alwaysOutside: [true, false, false, false]
I couldn't tell you why, but setting the bar:groupWidth value to 75% somehow fixed the issue completely. The look is slightly different, but it's acceptable, and leaves out the hassle of having to modify the location of the label. Thanks for all of your help!
this was originally asked on Google groups but since I received no replies, I'm asking here on SO.
I am plotting basic data like temperature, various counts and such with date time and I like to append a third column as a further description.
E.g.
time, value, description
time, value, description
time, value, description
So I am looking at the simplest way of plotting that, as full screen as possible, as minimally (least LOC) as possible.
So far with https://jsfiddle.net/kaihendry/q1mczqc1/2/ I have not figured how to show the description (is it a infobox/selection? not sure on terminology), which in my example is the kernel version, when I click a point.
Furthermore I don't understand why on the right of the graph there are these null value labels:
http://s.natalian.org/2015-06-16/1434449447_1054x1058.png
And any tips to make http://s.natalian.org/2015-06-16/foo.html scale to fill the whole screen? I especially want to make it usable on my iPhone.
I have not figured how to show the description (is it a infobox/selection? not sure on terminology)
In web development, this is called a tooltip. In Google charts, you can add a tooltip by replacing the commented line with the following one :
//data.addColumn('string', 'kernel');
data.addColumn({type: 'string', role: 'tooltip'});
So, the 3rd column will not be handled as a data series, but as a tooltip.
Furthermore I don't understand why on the right of the graph there are these null value labels
The null values are shown, because (as previously stated), you have inserted 2 series of data ('Date' and 'kernel'). If you make the replacement mentioned before, the null values will be replaced
And any tips to make .. scale to fill the whole screen ?
You can add the following option to configure the dimensions of the chart :
var options = {
chartArea: {width: '80%', height: '80%'}
};
Furthermore, since the version of line charts you are using are slightly obsolete, you shoud replace
var chart = new google.charts.Line(document.getElementById('linechart_material'));
with
var chart = new google.visualization.LineChart(document.getElementById('linechart_material'));
In the following jsfiddle, you can find a final working version
(with some more fixes, like horizontal axis range and legend positioning).
If I understand right you want to add third column as a description for each point.
If you add 3rd column like this
data.addColumn('string', 'kernel');
Google chart takes this as another series and because the data are string it can't draw the series and shows null.
You can add 3rd column as a tooltip.
data.addColumn({type: 'string', role: 'tooltip'});
But for tooltip to work you need to change the line chart to visualization line chart
var chart = new google.visualization.LineChart(document.getElementById('linechart_material'));
To make chart fill the screen you can change the div style.
<div id="linechart_material" style="height:100%;"></div>