We Keep Coding

How can I eliminate the extra space added to the bottom when the value dips below 0 on the Y axis in Chart.js?

I styled my chart with a legend below it like this, and you'll see a grey chart faintly rendered on another chart behind it for comparison (their data scales are different, couldnt put them both on the same actual chart):
As you can see, because the data on the front chart dipped below zero on the Y axis, 0 on the Y axis was moved upward way further than it needed to (the bottom of the chart normally lines up with the bottom of the gray chart behind it). I can of course resize and move the gray chart so that it's Y0 and the front chart's Y0 align, but that still leaves a big gap between the lowest data on the chart and the legend.
How can I eliminate this extra space below the lowest data rendered on the chart? I want the lowest value rendered to touch the bottom on the chart.
Putting my code, I think, wouldn't be useful here, since this behavior seems to be universal across Chart.js, and what I'm looking for is probably a setting in the options object that I don't know of yet, or know of, but don't know it can produce the desired result.

Found the setting for it:
yAxes: [{
ticks: {
autoSkip: true,
maxTicksLimit: 0,
stepSize: 0.1
}
}]

Highcharts pie chart issue (gaps between pie slices)

I have a half-donut pie chart using a 100-point series in Highcharts. Please see screenshot.
I've spent the last four or five hours trying to figure out why there's a line between each pie slice. It's not a border, because if I change the background color behind the chart to black, I can actually see the black between each pie piece. So there's a 1-pixel gap between each pie piece. I would like the chart just to be a solid color, not have a 1-pixel gap between each pie piece. Pulling my hair out trying to figure out where this setting is. Any help much appreciated.

I was finally able to fix the issue by reading about series.borderWidth. (Thanks to #BarbaraLaird.) This is from the Highcharts API docs:
borderWidth: Number The width of the border surrounding each slice.
When setting the border width to 0, there may be small gaps between
the slices due to SVG antialiasing artefacts. To work around this,
keep the border width at 0.5 or 1, but set the borderColor to null
instead.
Defaults to 1.
I was able to fix the issue by setting borderWidth to 1 and setting borderColor to null. (My borderWidth was previously set to 0 and borderColor was undefined.) That filled in the "gaps" between the antialised slices.

Custom gridLines and Axes Chartjs

I am trying to design a CDF Chart using chartjs to show probabilities in a graph. Basically, I will always have 100 points starting at 0 to some max number which I calculate beforehand and I want to generate the charts as I attached. Smooth and not many gridLines. I tried using chart type "line", yet it is far off.
Could you please help me out to configure the chart correctly.
Examples of what I am looking for:

This is a solution without autoSkip, using gridline colour options to hide unwanted x axis gridlines. (sorry about my British spelling of 'colour'!)
I can't use autoSkip since my time/x axis labels show new Year, Month, Date only once and I couldn't work out how to not skip the particular labels which indicate a new month, for instance. I finally found that you can define gridline colours in an array, so my solution is to create a gridline colour array, setting the chart background colour to the gridlines I want to hide. In my case, I already send a list of labels with empty values for when I don't want a label and gridline, just a datapoint.
var labels = data3json['labels'].split(',');
//set gridline colour to background when label is empty:
var xaxis_gridline_colours = [];
for (var i = 0; i < labels.length; i++) {
if (labels[i].length > 0) {
if (i == 0) {
xaxis_gridline_colours.push("#cccccc"); //x and y axis!
} else {
xaxis_gridline_colours.push("#dddddd"); //visible gridline
}
} else {
xaxis_gridline_colours.push("#ffffff"); //invisible gridline
//or call a chart background colour variable like:
//xaxis_gridline_colours.push(chart_bkg_colour);
}
}
Later in the code:
chart = new Chart(ctx24, {
options: {
scales: {
xAxes: [{
gridLines: {
display: true, //default true
color: xaxis_gridline_colours,
etc

First about the gridLines, you can in your chart options change the stepSize of your xAxes (put it to 10 for instance) so you will have 10 times less vertical grid Lines (since your xAxes stepSize seems to be 1 by default).
If the big points are bothering you, when you create your datasets you can change their pointRadius to 0; this way no points displayed just a smoothline.
Finally you can change the color of the line of each dataset by setting the property borderColor.
Take a look at this page for more customization : http://www.chartjs.org/docs/latest/charts/line.html
Hope this helps.

I have noticed that most of you add the line styles only via code. I just spend 1h looking for the settings, as I change it once, but then I couldn't change it again.
How to do it. Post on Stackoverflow pointed me in the right direction.
Charts grid lines style
Line: this.chart1.ChartAreas[0].AxisX.LineDashStyle.Dot
Go to Properties->Chart->Chart Areas and click on 3 dots (...) next collection.
Properties
In Collection, go to Axes and again click on 3 dots (...) next collection.
Axes Collection
You will have 2 Axis: X and Y. Select each Axis and go to the required section to change properties. Be careful. They are well hidden, but I tried to highlight all the options. Of course, to perform the custom modification, you will have to code it.
Axis Collection Editor

Highcharts - Series tooltip doesn't work when plotting lines that zigzag on the x axis

I have a highcharts chart that I need to plot but which has lines which can go back on themselves on the X Axis.
e.g. jsfiddle example
My problem isn't that I can't plot it but rather the series tooltips don't display correctly.
If you zoom right in to individual points they seem ok, but not at normal zoom level.
E.g. if you scan your mouse across the series from right to left it doesn't want to show you the tooltip on x Value 1, intead it jumps to the second set of values on x value 2.
I've changed the tooltips to being not shared:
tooltip: {
shared: false,
},
but this has made little difference, apart from now it seems to work when zoomed in, but I suspect this is only because there are only one set of x Axis values visible.
Does anybody know how it is possible to configure Highcharts to allow for series where the x values aren't sorted either ascending or descending as I can't find anything in the documentation.

From the API documentation:
Note that line series and derived types like spline and area, require
data to be sorted by X because it interpolates mouse coordinates for
the tooltip. Column and scatter series, where each point has its own
mouse event, does not require sorting.
So change your series to type: 'scatter' with a lineWidth > 0. Here's an updated fiddle.

Chart background highlight in HighChart

In this question it's explained how to set the background to have two colours (zebra like). My need is to highlight in the chart temporal changes via setting accordingly the background colour, like this:
the two blue area may identify periods where something was happening and the white one when it wasn't. On top of this I'll then add lines and other charts.
Can this be done via passing Highchart with start and end date of periods to be highlighted? (an area chart workaround maybe?)

What you most likely need is plotBands
xAxis.plotBands
A colored band stretching across the plot area marking an interval on
the axis.
In a gauge, a plot band on the Y axis (value axis) will stretch along
the perimiter of the gauge.
plotBands can be added on either of the axes, in your case you seem to want it on the xAxis, following is how one could do it
xAxis: {
plotBands: [{
color: '#FCFFC5',
from: Date.UTC(2010, 0, 2),
to: Date.UTC(2010, 0, 4)
}]
}
Plotbands # jsFiddle