Develop Reference

I have 10 points inn x-axis, ranging [-25,-20,,-15,-10,0,10,20,30,40,50]. But I want my line chart to start from -15 of x-axis. How we can achieve?

I have 10 points inn x-axis, ranging [-25,-20,-10,0,10,20,30,40,50]. But I want my line chart to start from -15 of x-axis. How we can achieve?
Below is the code i tried with suggestedmin and suggestedmax but it didnt worked.
Please suggest some way to achieve this
export class CgChartComponent {
lineChartData: ChartDataSets[] = [
{ data: [3145000, 3430001, 1499998, 1700000, 3515340, 2480011], label: 'ABC', lineTension: 0, },
];
lineChartLabels: Label[] = ['-25','-20','-15', '-10', '0', '10', '20', '30','40','50' ];
lineChartOptions = {
responsive: true,
responsiveAnimationDuration: 30,
legend: {
position: 'bottom'
},
scales: {
xAxes: [{
ticks: {
suggestedMin: -15,
suggestedMax: 40
}
}]
}
};
lineChartColors: Color[] = [
{
borderColor: 'black',
},
];
lineChartLegend = true;
lineChartPlugins = [];
lineChartType = 'line';
}

Try to use min and max instead of suggestedMin and suggestedMax as follows:
xAxes: [{
ticks: {
min: -15,
max: 40
}
}]
From Chart.js documentation
Axis Range Settings
The suggestedMax and suggestedMin settings only change the data values that are used to scale the axis. These are useful for extending the range of the axis while maintaining the auto fit behaviour.
Tick Configuration
min: User defined minimum value for the scale, overrides minimum value from data.
max: User defined maximum value for the scale, overrides maximum value from data.
UPDATE
The problem is probably that the labels are strings but min and max are defined as numbers. This can be solved in two different ways.
Either you transform the labels into numbers or you define min and max as follows:
xAxes: [{
ticks: {
min: '-15',
max: '40'
}
}]

Chart.js automatic scaling

I've been testing out chart.js for maybe including it in a project. I just have one smallish issue with it. It doesn't scale some datasets properly. I found somewhat similar questions here in SO, but nothing really that would solve my issue.
So this is what my chart looks like with some datasets:
For some reason, the max values (2.2) look ugly as hell. The reason is, that the dataset has a set of three duplicate values in this case (2.2, 2.2, 2.2). I would like there to be some room on top of this series, so that it would look a bit more reasonable.
How do you properly add "padding" on top the the series line? I would like a solution where I could rely on chart.js to find out the max value, and then maybe update that with some padding on the scale(like x + 10). Issue is, that I cant just hard code the min max values, because I can have over 200 different values that can be selected, and they can vary A LOT in scale.
Here is how I render the chart for now:
return new Chart(context, {
type: 'line',
data: {
labels: labels.data,
datasets: dataSets
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
ticks: {
beginAtZero: false
},
yAxes: [{
ticks: {
beginAtZero: false
},
id: 'A',
type: 'linear',
position: 'left',
}, {
ticks: {
beginAtZero: false
},
display: displayBAxis,
id: 'B',
type: 'linear',
position: 'right',
}]
}
}
});

This may not be the cleanest way but you can play with it as you see fit.
In short, you need to create a function that finds the max value out of all your dataSets arrays and in yAxes.ticks set max to that functions return value.
More details below
Referencing here first:
data:{
labels: labels.data,
datasets: dataSets //talking about this first
}
Create a function that will go through these arrays and get the max of all arrays. I did it using this but you can do it better I'm sure:
function getMax(){
var max = 0;
dataSets.forEach(function(x, i){
max = Math.max(max, Math.max.apply(null, x.data));
});
return max + 2;
}
Then in your return in yAxes you should be able to have:
ticks: {
beginAtZero: false,
max: getMax()
},

You can find the min and max of your dataset, then add/subtract a percentage of the difference (range).
For example, say you use 1% of the range.
[0.1, 0.2, 0.5] gives (1%)x(0.5-0.1)=0.004, so [min,max]=[0.096,0.504].
[1500, 1800, 3500, 3600] gives (1%)x(3600-1500)=21, so [min,max]=[1479,3621].

Setting Canvas Limits Over the Existing Dataset Values

I've got a little problem with html5 canvas. I've got a couple of line charts made but they have a problem with maximum grid values (sort of field limits inside the canvas itself). The chart is building from a dataset coming from the database and only through these values.
The example: sample chart
As you can see here, the above limit is 5.55, and the question is how to change that to a bigger value (for example, using a percentage of such maximum value or something so that other charts' offsets would match as well)?
The code:
$('#graf_' + i + '').html('<canvas id="lineChart' + i + '" width="' + $(".graf").width() + '" height="200"></canvas>');
var lineData = {
labels: data["headers"],
datasets: [{
label: data["rates"][i]["VltName"],
fillColor: "transparent",
strokeColor: data["rates"][i]["VltColor"],
pointColor: data["rates"][i]["VltColor"],
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: getRatesArr
}]
};
var lineOptions = {
scaleShowGridLines: true,
scaleGridLineColor: "rgba(0,0,0,.05)",
scaleGridLineWidth: 1,
bezierCurve: false,
pointDot: true,
pointDotRadius: 4,
pointDotStrokeWidth: 1,
pointHitDetectionRadius: 20,
datasetStroke: true,
datasetStrokeWidth: 2,
datasetFill: true
};
var ctx = document.getElementById("lineChart" + i).getContext("2d");
var myNewChart = new Chart(ctx).Line(lineData, lineOptions);
Hope my explanation is not too vague. Thanks in advance!

If you update to the latest Chart.js version (currently v2.6.0), you can use the max tick configuration option to set the max number to display on the axis:
options: {
scales: {
yAxes: [{
ticks: {
max: yourMaxNum
}
}]
}
}
If you want to set yourMaxNum to the largest number in all your dataset arrays, simply use the JavaScript Math.max() method to determine this number, and set the above chart config option to this number when you create all your line charts.
The Chart.js documentation lists additional tick configuration options that you might also find useful.

Cannot change chart.js color fill or y axes

I am trying to make a real time graph using chart.js, but I cannot seem to change the color fills.
<script type="text/javascript">
var canvas = document.getElementById('updating-chart'),
ctx = canvas.getContext('2d'),
startingData = {
labels: ["A", "B", "C", "D"],
datasets: [
{
label: "Product A",
fillColor: "rgba(206, 70, 90, 1)",
strokeColor: "rgba(220,220,220,0.8)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
data: [65, 59, 80, 81],
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
min: 0,
max: 10
}
}]
}
}
}
]
};
var myLiveChart = new Chart(ctx,{
type: 'bar',
data: startingData,
responsive: true,
maintainAspectRatio: true
});
setInterval(function(){
// Get a random index point
var indexToUpdate = Math.round(Math.random() * startingData.labels.length);
// Update one of the points in the second dataset
myLiveChart.data.datasets[0].data[indexToUpdate] = Math.random() * 100;
myLiveChart.update();
}, 500);
</script>
I've clearly changed the axes and set the y to a maximum, but it still overflows and keeps dynamically changing the axes length. How do I fix this?
Also the color still seems to be grey for the first bar, even though I changed the rgba values. Help?

refer the below link for changing the colors.try background-color.If you share the fiddle it will help.
http://www.chartjs.org/docs/#chart-configuration-colors

Add below code in your datasets array. Color will change.
backgroundColor:"rgba(206, 70, 90, 1)"
https://jsfiddle.net/Smita31Jain/4zpuxvke/
For overflow and dynamically changing axes length issue, take out options property object code from startingData object's dataset array and add it to myLiveChart chart instance. Refer below jsfiddle
https://jsfiddle.net/Smita31Jain/zzpkxg3k/
Hope this is what you are looking for.

Remove the vertical line in the chart js line chart

I am using Chart.js to generate maps and have customised it to a good extent. But I am not able to remove the vertical grid line no matter what. Has anyone come across a situation like this? Help much appreciated.
JavaScript
var ChartDataHome = {
labels: ["", "NOV", "DEC", "JAN", "FEB"],
datasets: [{
strokeColor: "rgba(255.255,255,1)",
pointColor: "rgba(159,209,154,1)",
pointStrokeColor: "rgba(255,255,255,1.00)",
data: [4.5, 8.8, 7.5, 9.5, 7.8, 9]
}]
};
var step = 2;
var max = 10;
var start = 0;
ChartOptionsHome = {
scaleLabel: "<%= value + ' K ' %>",
pointDot: false,
bezierCurve: false,
scaleOverride: true,
scaleSteps: 10,
scaleSteps: Math.ceil((max - start) / step),
scaleStepWidth: step,
scaleStartValue: start,
scaleShowGridLines: true,
scaleGridLineWidth: 0,
scaleGridLineColor: "rgba(0,0,0,0.1)",
datasetFill: false,
animation: true,
animationSteps: 60,
scaleFontColor: "#ffffff",
scaleFontSize: 14,
scaleLineColor: "rgba(255,255,255,1)",
datasetStrokeWidth: 6,
responsive: true,
}
if ($("#chartHome")[0]) {
DrawTheChart(ChartDataHome, ChartOptionsHome, "chartHome", "Line");
}

The following applies to Chart.js 2.*.
If you only have one x-axis, whether the vertical grid lines (that are related to this x-axis) are displayed or not, is specified by the boolean value of options.scales.xAxes[0].gridLines.display. To be more precise, the following chart options disable the display of vertical grid lines for the single x-axis case.
options : {
scales : {
xAxes : [ {
gridLines : {
display : false
}
} ]
}
}

There's a new global option that was released with the new version of Chart.js two days ago.
var options = {
scaleShowVerticalLines: false
}

The Above answers seem outdated since they did not work in ChartJs 3.4.1 (probably lower versions as well) for me.
You can now use the following:
options: {
scales: {
x: {
grid: {
display: false
}
},
}
}
It's self-explanatory, but to remove horizontal lines, you can replace the x with y.

options : {
scales: {
yAxes: [{
gridLines: {
lineWidth: 0,
color: "rgba(255,255,255,0)"
}
}]
}
};
Charts.js v2.0

try "scaleShowGridLines" : false,

I think you can seperate x and y axis.
axes: {
xaxis: {
ticks: ticks,
tickOptions: {showGridline:false}
},
yaxis: {
tickOptions: {showGridline:true}
}
}
Hope this can help you.

Simply write
options:{
grid:{
show: false
},
}
It will solve your problem