I have a logarithmic scaled axis and want to label each tick in a custom manner.
hAxis: {
ticks: [{v:0.001, f:'10-3'},{v:0.01, f:'0.01'},{v:0.1, f:'0.1'},
{v:1, f:'1'},{v:10, f:'10'},{v:100, f:'100'},
{v:1000, f:'10+3'},{v:10000, f:'10+4'},],
//...
}
However instead of 10-3 and 10+4 I want the -3 and 4 to be superscripts. Is that possible?
Unicode superscript characters work.
Eg: 10\u207B\u00B3 for 10^-3 and 10\u2074 for 10^4
See
https://en.wikipedia.org/wiki/Unicode_subscripts_and_superscripts
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.
How to fix the number of gridlines in X-Axis as label are too condensed.
Example: https://www.chartjs.org/samples/latest/charts/line/basic.html
If we add 60+ Data labels are too condensed, then after some more values axis lines adjust to hide some value in between to show label properly.
Is there a way to control trigger point which adjusts the axis line number ?
Assuming you defined xAxes.time.unit: 'month', you can define time.stepSize as follows.
xAxes: [{
type: 'time',
time: {
unit: 'month',
stepSize: 2
},
time.stepSize: the number of units between grid lines.
Chart.js internally uses Moment.js for the functionality of the time axis. Therefore you should use the bundled version of Chart.js that includes Moment.js in a single file.
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,
...
}],
}
}
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).
In VS2010 VB I am using MSChart (.Net 4) and I have a FastLine chart with values from -2000 to 2000 for X axis and -20 to 20 on Y axis.
The interval for the gridlines in X axix is 250 and I need the gridlines to be "mirrored" from origin (i.e. -250, 250; -500, 500;...) but when I execute the applications always the first gridlines are -200, 50 and then -450, 300...
I tried using StartFromZero = True in the axes properties without success. Is there any way to force the gridlines to be symetric from the origin (zero) ?
Thank you for your comments.
I solved this issue by setting the IntervalOffset of the Axis. This offset represents the offset of the first gridline from left of the chart (in the case of X axix) . By calculating the displacement required (myChart.ChartAreas(0).AxisX.IntervalOffset = myChart.ChartAreas(0).AxisX.Maximum Mod yourIntervalValue) to reach 0 from left most value with the interval used, I was able to make the gridline in the middle of the chart to match the zero line.
I hope it helps others.