The example I used:
https://jsbin.com/yekimavemu/2/edit?html,js,console,output
How can I build a box plot in chart-js with negative values on Y-axis?
I tried:
options: {
scales: {
yAxes: [{
ticks: {
max: 4,
min: -4
}
but I don't know where I can put this.
I would highly recommend using a modern plugin like Chart.js Box and Violin Plot (GitHub) instead of a hardly-readable workaround from a four year old version of chart.js (Version 1.0.2).
Related
Example of Stacked Y-Axes
I can't figure out a way in Chart.js to get the Y-Axes to stack like I have in the example picture.
When I keep the scales object simple like this:
scales: {
y: {
stacked: true,
title: {
display: true,
text: "Temperature (°C)",
}
},
x: {
type: "time",
time: {
tooltipFormat: "LTS",
unit: "hour",
},
title: {
display: true,
text: "Datetime",
},
}
},
I obviously get a single Y-Axis, but instead of scaling to the maximum of any of the datasets, it seems to add each dataset up (ex: Say max Temp from any set is 40 °C, if I have 6 datasets the Y Scale goes from 0 - 250)
Additive Y-Axis example
It does stack all of the lines nicely though so I'm really hoping there is a decent solution as the Y-Axis right now is not helpful to a viewer. Thanks for any help!
With help from the Chart.js Slack channel, the easiest and actually great looking solution was just to separate each dataset into their own chart with only the top most chart showing a legend, and only the bottom chart showing an X-Axis. All middle charts have the X-Axis and legend turned off.
At any point I will only have 2 labels, min and max. I would like to bring in the labels like in the design. I have tried mirror but that will affect both min and max. The only way I can think of doing this is by using positioned divs to make it look like labels
Any help would be greatly appreciated
Current:
Expected:
Thanks
You could define options.scales.xAxis.offset = true, this adds extra space to both edges and the axis is scaled to fit into the chart area.
options: {
...
scales: {
xAxes: [{
offset: true,
...
}],
}
}
Charts.js does not render all data points when using Point[] format.
Codepen example
Questions:
Why only two out of four data points are rendered for each dataset?
Why there are no ticks on X axis?
Why is "undefined" string shown on point hover?
How can I get both X and Y values display on point hover?
Thank you!
Adding "scales" option fixed the problem:
scales: {
xAxes: [{
type: 'linear',
position: 'bottom',
}]
}
I have a scatter graph using Chart.js and in the X axes I have time values (I use Moment.js).
The problem is that I want the scale reversed (see the image) but it doesn't work with the
scales: {
xAxes: [{
type: 'time',
...
ticks: {
reverse: true
},
So I need to use the linear type.
The problem is that with the linear time in the X axes I see the seconds and what I want are the seconds in 'mm:ss' format, so I think I need to use labels.
The question is: how can I use the labels for the x axes in the scatter plot graph?
graph image
That is surprising that it doesn't work since the reverse option is a base config item (not specific to any certain scale). When I'm back at a computer I will investigate if this is a bug.
In the meantime, you can use the tick callback option to format your labels. Here is an example.
scales: {
xAxes: [{
ticks: {
// Create mm:ss labels
callback: function(value, index, values) {
return moment.duration(value, 'seconds').format('mm:ss');
}
}
}]
}
I have a strange behavior that seems like a bug to me. I have a bar chart with one dataset with 2 points, but 1 is not shown, though it works fine with 3 or with horizontal bar e.g.
Is it a known bug of some kind that can be worked around? It seems that the chart does not scale itself well enough and one of the bars is below the "visibility point" somehow.
The problem was apparently that the Y-axis started not at 0 by default. It's possible to add an option for that:
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}