We Keep Coding

How Can I Change the Y-axis labels to be shown as strings other than number in Chart.js?

I am creating a chart.js line graph with -y-axis values up to almost a million. and the values on the y axis are
0
100000
200000
300000
400000 and so on. This can be tiresome to read and I want to change it for those numbers to strings that say 100k 200k 300k while still maintaining the same value as before just showing different values on the page.
Is this possible?
Thank You

Use this example from their documentation, instead of returning a dollar sign + value return: (value/1000 + 'K')
options: {
scales: {
yAxes: [{
ticks: {
// Include a K in the ticks
callback: function(value, index, values) {
return (Number.parseInt(value)/1000) + 'K';
}
}
}]
}
}
https://www.chartjs.org/docs/latest/axes/labelling.html#creating-custom-tick-formats

How can I change x-axis position in dygraph?

I am new to dygraph and I have one issue: while creating dygraph using Javascript negative values of the y-axis are displayed above the x-axis 0 value.
Here is my code :
g6 = new Dygraph(document.getElementById('smooth-line'),
functionData,
{
labels: ['Year', 'First','Second'],
series: {
First: {
plotter: smoothPlotter,
color: '#26a69a ',
strokeWidth: 2
},
Second: {
plotter: smoothPlotter,
color: '#e57373 ',
strokeWidth: 2
}
},
legend: 'always',
gridLineColor: '#ddd',
//valueRange: [1.0, 30.0],
//yRangePad :[-20.0,20.0]
});
}
and the output of this code is:
Output of the code
As in the image x-axis is below to -ve values of y-axis so how to set position of x-axis at the 0 value of y-axis?

First a comment. Posting examples that are not self-contained takes a lot longer to troubleshoot.
This link: http://jsfiddle.net/yLytg398/1/ provides a reasonable approximation to your code that can be tested.
You actually had the solution already in your code, valueRange is what you need. You can even use valueRange: [0, null] to automatically calculate the upper bound.
Correction: I just realized that you actually wanted to have the x axis with labels moved into the middle of the graph, my solution does not address this, but for your example picture it still works, because valueRange can set the lower end of the y range to zero, so that the x axis is at y = 0.

In HighCharts how to set number of xAxis autoly?

As you can see , I'm using HighStock of HighCharts now in order to have scroll bar.
I want to set max number of xAxis. It works if I code like this:
xAxis: {
max: 8
categories: data.categories
}
Here is the rendering:
　
But when it concern to some data that hasn't so many xAxis data , it will show like this :
What I want to realize is that when the data is less than a certain number,for example, 8, It will occupy the chart instead of leaving so many blank.
Here is the pic:

The solution is check if categories array is bigger than 8, if not then set maximum value as categories length
xAxis: {
max: categories.length < 8 ? categories.length - 1: 8,
categories: categories
},
Example:
http://jsfiddle.net/x8azpjcw

How do I set a minimum upper bound for an axis in Highcharts?

I'm trying to set a minimum upper bound, specifically:
The Y axis should start at 0
The Y axis should go to at least 10, or higher (automatically scale)
The upper bound for the Y axis should never be less than 10.
Seems like something Highcharts does, but I can't seem to figure out how. Anybody have experience with this?

Highcharts doesn't seem to have an option for doing this at chart creation time. However, they do expose a couple methods to interrogate the extremes and change the extremes, getExtremes() and setExtremes(Number min, Number max, [Boolean redraw], [Mixed animation]) found in their documentation.
So, a possible solution (after chart creation):
if (chart.yAxis[0].getExtremes().dataMax < 10) {
chart.yAxis[0].setExtremes(0, 10);
}
yAxis[0] references the first y-axis, and I'm assuming that you only have one axis in this case. The doc explains how to access other axes.
This isn't ideal, because the chart has to redraw which isn't too noticeable, but it's still there. Hopefully, Highcharts could get this sort of functionality built in to the options.

A way to do this only using options (no events or functions) is:
yAxis: {
min: 0,
minRange: 10,
maxPadding: 0
}
Here minRange defines the minimum span of the axis. maxPadding defaults to 0.01 which would make the axis longer than 10, so we set it to zero instead.
This yields the same results as a setExtreme would give. See this JSFiddle demonstration.

Adding to Julian D's very good answer, the following avoids a potential re-positioning problem if your calculated max varies in number of digits to your desired upper bound.
In my case I had percentage data currently going into the 20's but I wanted a range of 0 to at least 100, with the possibility to go over 100 if required, so the following sets min & max in the code, then if dataMax turns out to be higher, reassigns max up to it's value. This means the graph positioning is always calculated with enough room for 3-digit values, rather than calculated for 2-digits then broken by squeezing "100" in, but allows up to "999" before there would next be a problem.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
events: {
load: function(event) {
thisSetMax = this.yAxis[0].getExtremes().max;
thisDataMax = this.yAxis[0].getExtremes().dataMax;
if (thisDataMax > thisSetMax) {
this.yAxis[0].setExtremes(0, thisDataMax);
alert('Resizing Max from ' + thisSetMax + ' to ' + thisDataMax);
}
}
}
},
title: {
text: 'My Graph'
},
xAxis: {
categories: ['Jan 2013', 'Feb 2013', 'Mar 2013', 'Apr 2013', 'May 2013', 'Jun 2013']
},
yAxis: {
min: 0,
max: 100,
title: {
text: '% Due Tasks Done'
}
}
//Etc...
});

HigtCharts has a really good documentation of all methods with examples.
http://www.highcharts.com/ref/#yAxis--min
In your case I think you should the "min" and "max" properties of "yAxis".
min : Number
The minimum value of the axis. If null the min value is automatically calculated. If the startOnTick option is true, the min value might be rounded down. Defaults to null.
max : Number
The maximum value of the axis. If null, the max value is automatically calculated. If the endOnTick option is true, the max value might be rounded up. The actual maximum value is also influenced by chart.alignTicks. Defaults to null.
If you are creating your chart dynamically you should set
min=0
max=10 , if your all data values are less then 10
and
only min=0, if you have value greater then 10
Good luck.

Try setting the minimum value of the axis and the interval of the tick marks in axis units like so:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
yAxis: {
min: 0,
max: 10,
tickInterval: 10
}
});
Also don't forget to set the max value.
Hope that helps.

Highcharts Column Chart overflowing the plot area

The problem is as follows:
If I have a very sparsely populated date time x axis with column chart type then some columns are getting cut.
Here is a fiddle example: http://jsfiddle.net/qzqnX/
In this example, I have two columns and the column on extreme ends is getting cut.
If I increase data to have 3 columns, one of the series gets completely hidden.
Here is fiddle example: http://jsfiddle.net/GrKKt/
I would like to have the columns displayed within the plot area and not get partially cut or hide. It would also be nice if they draw with some margin from the plot area extremities. Thanks.

I have found two solutions to the problem above:
First solution as given in first answer is to add nulls. I have found that adding two nulls is optimum and works fine. Even if you have lots of series in your data.
Example: http://jsfiddle.net/vwzeP/
Second solution is to add minPadding, maxPadding to xaxis. There is no need to add nulls to your input either. But highcharts is a little inconsistent in its behavior for padding. So you need to apply different values for min/maxPadding properties. Once you have more than 6 points on datetime x-axis the column width are automatically according to plot area and you can set minPadding/maxPadding to their default of 0.01.
good padding values are following:
switch (numberOfPointsInDataArray) {
case 1:
case 2:
padding = 0.25;
break;
case 3:
padding = 0.13;
break;
case 4:
padding = 0.075;
break;
case 5:
padding = 0.05;
break;
case 6:
padding = 0.03;
break;
}
Example of padding with 2 points in data array: http://jsfiddle.net/J7zsk/
hope this helps others.

The widths of columns are not handled very well when a datetime axis is used, the best way to work around this is to enter null values for the dates inbetween. Like so:
chart: {
renderTo: 'container',
type: 'column'
},
xAxis: {
type: 'datetime'
},
series: [{
data: [29.9, null, null, null, null, null, 71.5],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 1 * 24 * 3600 * 1000 // one day
},
{
data: [29.9, null, null, null, null, null, 71.5],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 1 * 24 * 3600 * 1000 // one day
}]
This will make the calculated widths to be evenly spaced between 7 days in this case. Example on jsfiddle.