Chartjs Linechart label in wrong position - javascript

I'm using chartjs2 and I have 2 charts on a page. The first have a bar and a line chart. There the position of the label on the X axis are good.
But with chart 2, where I have 2 line charts the label are at the wrong position. I want to add some padding either for the labels or for the lines.
Here the numbers should exactly under the points, so I would preffer to push the linecharts to the right side, as it's on the first picture.
Update: Fiddle example
var ctx = document.getElementById("compare");
new Chart(ctx, {
type: 'bar',
data: {
labels: [1, 2, 3, 4],
datasets: [
{
type: 'line',
label: 'First',
data: [0, 0, 0, 0, 0],
fill: true,
lineTension: 0.1,
backgroundColor: "rgba(254, 241, 231, 0.6)",
borderColor: "#ff6600",
pointBackgroundColor: "#f76420",
pointBorderColor: "#f5c09e",
pointBorderWidth: 2,
pointHoverRadius: 5,
pointHoverBackgroundColor: "#f76420",
pointHoverBorderColor: "#f5c09e",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10
},
{
type: 'line',
label: 'Second',
data: [0, 8, 12, 6, 0],
fill: true,
lineTension: 0.1,
backgroundColor: "rgba(224, 224, 224, 0.6)",
borderColor: "#e0e0e0",
pointBackgroundColor: "#e0e0e0",
pointBorderColor: "#f5c09e",
pointBorderWidth: 2,
pointHoverRadius: 5,
pointHoverBackgroundColor: "#f76420",
pointHoverBorderColor: "#f5c09e",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10
}
]
},
options: {
legend: {
display: false
},
tooltips: {
mode: 'label'
},
scales: {
yAxes: [{
ticks: {
max: 13,
min: 0,
stepSize: 4,
fontColor: '#e0e0e0'
}
}],
xAxes: [{
gridLines: {
display: false,
drawBorder: false
}
}]
}
}
});

Related

How to optimize chart data | ChartJS

My question is about chartJS.
I have Chart type line with 2 datasets the data is about members evrey 3 minutes in 24 hour.
The thing is that its a lot of data about 1500 rows of sql table.
The problem im getting with is that because there is alot of data the chart is looking awful.
My question is there is any way how can I optimize it so it will look better?
The chart is based on ChartJS
This is the code of the chart settings -
Chart.defaults.global.defaultFontFamily = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
Chart.defaults.global.defaultFontColor = '#292b2c';
// Area Chart Example
var ctx = document.getElementById("myAreaChart");
var myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: <?php echo json_encode($cnnlsTime) ?> ,
datasets: [
{
label: "CNNls Members",
lineTension: 0.1,
backgroundColor: "rgba(255,165,0,0.2)",
borderColor: "rgba(2,117,216,1)",
pointRadius: 1,
pointBackgroundColor: "rgba(2,117,216,1)",
pointBorderColor: "rgba(255,255,255,0.8)",
pointHoverRadius: 2,
pointHoverBackgroundColor: "rgba(2,117,216,1)",
pointHitRadius: 50,
pointBorderWidth: 2,
data: <?php echo json_encode($cnnlsMembers) ?> ,
},
{
label: "CNNSF Members",
lineTension: 0.1,
backgroundColor: "rgba(255,165,0,0.2)",
borderColor: "rgba(2,117,216,1)",
pointRadius: 1,
backgroundColor: "rgba(2,117,216,1)",
pointBorderColor: "rgba(255,255,255,0.8)",
pointHoverRadius: 2,
pointHoverBackgroundColor: "rgba(2,117,216,1)",
pointHitRadius: 50,
pointBorderWidth: 2,
data: <?php echo json_encode($cnnsfMembers) ?> ,
},
],
},
options: {
scales: {
xAxes: [{
time: {
unit: 'time'
},
gridLines: {
display: false
},
ticks: {
maxTicksLimit: 400
}
}],
yAxes: [{
ticks: {
min: 0,
max: 30,
maxTicksLimit: 5
},
gridLines: {
color: "rgba(0, 0, 0, .125)",
}
}],
},
legend: {
display: false
}
}
});
Any suggestions?

Chart JS - Grid colors and gradient fill not showing

I have the following chart:
var canvas = document.getElementById('chart');
var data = {
labels: ["Q1","Q2","Q3","Q4","Q5"],
datasets: [
{
label: "Your answers",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "rgba(75,192,192,1)",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 5,
decimals : false,
pointHitRadius: 10,
data: [3,5,6,3,7],
stack: 4
},
{
label: "Average answers",
fill: false,
lineTension: 0.1,
borderColor: "rgba(79,104,241,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "rgba(79,104,241,1)",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(79,104,241,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 5,
decimals : false,
pointHitRadius: 10,
data: [2,7,5,10,3],
stack: 5
},
{
label: "Your average",
pointStyle: 'line',
fill: false,
borderColor: "#ffffff",
borderCapStyle: 'round',
borderDash: [0.5,5],
borderDashOffset: 1,
lineTension: 0.1,
data: [5,5,5,5,5],
},
{
label: "Audit average",
pointStyle: 'line',
fill: false,
borderColor: "#ffffff",
borderCapStyle: 'round',
borderDash: [5,8],
borderDashOffset: 0.6,
lineTension: 0.1,
data: [7,7,7,7,7],
},
]
};
var option = {
plugins: {
filler: {
propagate: true
}
},
legend : {
display:false
},
showLines: true,
scales: {
yAxes: [{
gridLines: {
color: 'rgb(255, 255, 255)',
display: true,
},
scaleLabel: {
display: true,
labelString: 'Scores'
},
stacked: false,
ticks: {
beginAtZero: 0,
suggestedMin: 1,
suggestedMax: 10,
stepSize: 2,
userCallback: function(label, index, labels) {
// when the floored value is the same as the value we have a whole number
if (Math.floor(label) === label) {
return label;
}
},
}
}],
xAxes: [{
gridLines: {
color: 'rgb(255, 255, 255)',
display: true,
},
scaleLabel: {
display: true,
labelString: 'Questions'
},
}]
},
annotation: {
annotations: [
{
drawTime: "beforeDatasetsDraw",
type: "box",
id: "n",
xScaleID: "x-axis-0",
yScaleID: "y-axis-0",
xMin: "Q1",
xMax: "Q5",
yMin: 0,
yMax: 3.7,
backgroundColor: "rgba(26,26,26,0.6)",
borderColor: "rgba(26,26,26,0.6)",
borderWidth: 1,
},
{
drawTime: "beforeDatasetsDraw",
type: "box",
xScaleID: "x-axis-0",
yScaleID: "y-axis-0",
xMin: "Q1",
xMax: "Q5",
yMin: 3.7,
yMax: 7,
backgroundColor: 'rgba(88,88,88,0.6)',
borderColor: 'rgba(88,88,88,0.6)',
borderWidth: 1,
},
{
drawTime: "beforeDatasetsDraw",
type: "box",
xScaleID: "x-axis-0",
yScaleID: "y-axis-0",
xMin: "Q1",
xMax: "Q5",
yMin: 7,
yMax: 10,
backgroundColor: 'rgba(31,42,97,0.6)',
borderColor: 'rgba(88,88,88,0.6)',
borderWidth: 0,
}
]
}
};
var myLineChart = Chart.Line(canvas,{
data:data,
options: {
responsive: true,
maintainAspectRatio: false,
tooltips: {
mode: 'index'
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
.wrap { background-color:#000; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.5/chartjs-plugin-annotation.js"></script>
<div class="wrap">
<canvas id="chart" width="400" height="250"></canvas>
</div>
I'm trying to achieve two things:
Change border and gridline colour to white.
Change the gradient fill.
For 1. I have the following code added to the x and y:
gridLines: {
color: 'rgb(255, 255, 255)',
display: true,
}
For 2, I have background colour defined under annotation: {
Why is neither of it working?
Here's a visual of what I'm trying to achieve:
Edit:
I have changed to the following:
var myLineChart = Chart.Line(document.getElementById('chart'), {
data: data,
options: options
});
With the above, the grids and background colors appear as I wanted (thanks to uminders answer). However, the label / key now is not there.
With the following:
var myLineChart = Chart.Line(document.getElementById('chart'), {
data: data,
options: {
responsive: true,
maintainAspectRatio: false
tooltips: {
mode: 'index'
}
}
});
With the above, the key now appears, but the gridlines and background colours do not.
Is there a middle ground I can reach here? I want both, the key and colors.

To show gridlines as expected, define a positive z-index of gridline layer as follows (see Grid Line Configuration).
gridLines: {
color: 'rgb(255, 255, 255)',
z: 2
},
To show gradient fill, use the previously defined options object (renamed from option) when you create the chart.
var myLineChart = Chart.Line(document.getElementById('chart'), {
data: data,
options: options
});
var data = {
labels: ["Q1", "Q2", "Q3", "Q4", "Q5"],
datasets: [{
label: "Your answers",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "rgba(75,192,192,1)",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 5,
decimals: false,
pointHitRadius: 10,
data: [3, 5, 6, 3, 7],
stack: 4
},
{
label: "Average answers",
fill: false,
lineTension: 0.1,
borderColor: "rgba(79,104,241,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "rgba(79,104,241,1)",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(79,104,241,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 5,
decimals: false,
pointHitRadius: 10,
data: [2, 7, 5, 10, 3],
stack: 5
},
{
label: "Your average",
pointStyle: 'line',
fill: false,
borderColor: "#ffffff",
borderCapStyle: 'round',
borderDash: [0.5, 5],
borderDashOffset: 1,
lineTension: 0.1,
data: [5, 5, 5, 5, 5],
},
{
label: "Audit average",
pointStyle: 'line',
fill: false,
borderColor: "#ffffff",
borderCapStyle: 'round',
borderDash: [5, 8],
borderDashOffset: 0.6,
lineTension: 0.1,
data: [7, 7, 7, 7, 7],
},
]
};
var options = {
plugins: {
filler: {
propagate: true
}
},
responsive: true,
maintainAspectRatio: false,
tooltips: {
mode: 'index'
},
showLines: true,
scales: {
yAxes: [{
gridLines: {
color: 'rgb(255, 255, 255)',
z: 2
},
scaleLabel: {
display: true,
labelString: 'Scores'
},
stacked: false,
ticks: {
beginAtZero: 0,
suggestedMin: 1,
suggestedMax: 10,
stepSize: 2,
userCallback: function(label, index, labels) {
// when the floored value is the same as the value we have a whole number
if (Math.floor(label) === label) {
return label;
}
},
}
}],
xAxes: [{
gridLines: {
color: 'rgb(255, 255, 255)',
z: 2
},
scaleLabel: {
display: true,
labelString: 'Questions'
},
}]
},
annotation: {
annotations: [
{
drawTime: "beforeDatasetsDraw",
type: "box",
id: "n",
xScaleID: "x-axis-0",
yScaleID: "y-axis-0",
xMin: "Q1",
xMax: "Q5",
yMin: 0,
yMax: 3.7,
backgroundColor: "rgba(26,26,26,0.6)",
borderColor: "rgba(26,26,26,0.6)",
borderWidth: 1,
},
{
drawTime: "beforeDatasetsDraw",
type: "box",
xScaleID: "x-axis-0",
yScaleID: "y-axis-0",
xMin: "Q1",
xMax: "Q5",
yMin: 3.7,
yMax: 7,
backgroundColor: 'rgba(88,88,88,0.6)',
borderColor: 'rgba(88,88,88,0.6)',
borderWidth: 1,
},
{
drawTime: "beforeDatasetsDraw",
type: "box",
xScaleID: "x-axis-0",
yScaleID: "y-axis-0",
xMin: "Q1",
xMax: "Q5",
yMin: 7,
yMax: 10,
backgroundColor: 'rgba(31,42,97,0.6)',
borderColor: 'rgba(88,88,88,0.6)',
borderWidth: 0
}
]
}
};
var myLineChart = Chart.Line(document.getElementById('chart'), {
data: data,
options: options
});
canvas { background-color:#000; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.js"></script>
<canvas id="chart" width="400" height="250"></canvas>

Why don't you use var option variable in the declarations? for example:
var myLineChart = Chart.Line(canvas,{
data:data,
options: option
});

ChartJS Scatter plot with JSON list variable not working

I want to plot scatter plots from a JSON variable (list of lists; in the format needed for Chart JS scatter plots) that I passed from Flask.
render_template('chart.html',data2 = data2)
The below code when I manually create datasets using jinja variable {{data2}} is working:
var chartData = {
datasets : [{
label: 'Cluster 1',
fill: false,
showLine: false,
lineTension: 0.1,
backgroundColor: "green",
borderColor: "black", // The main line color
borderCapStyle: 'square',
borderDash: [], // try [5, 15] for instance
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "green",
pointBackgroundColor: "green",
pointBorderWidth: 1,
pointHoverRadius: 8,
pointHoverBackgroundColor: "yellow",
pointHoverBorderColor: "brown",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10,
// notice the gap in the data and the spanGaps: true
data :{{data2[0]}},
spanGaps: true,
},
{
label: 'Cluster 2',
fill: false,
showLine: false,
lineTension: 0.1,
backgroundColor: "blue",
borderColor: "black", // The main line color
borderCapStyle: 'square',
borderDash: [], // try [5, 15] for instance
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "blue",
pointBackgroundColor: "blue",
pointBorderWidth: 1,
pointHoverRadius: 8,
pointHoverBackgroundColor: "yellow",
pointHoverBorderColor: "brown",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10,
// notice the gap in the data and the spanGaps: true
data :{{data2[1]}},
spanGaps: true,
},
{
label: 'Cluster 3',
fill: false,
showLine: false,
lineTension: 0.1,
backgroundColor: "red",
borderColor: "black", // The main line color
borderCapStyle: 'square',
borderDash: [], // try [5, 15] for instance
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "red",
pointBackgroundColor: "red",
pointBorderWidth: 1,
pointHoverRadius: 8,
pointHoverBackgroundColor: "yellow",
pointHoverBorderColor: "brown",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10,
// notice the gap in the data and the spanGaps: true
data :{{data2[2]}},
spanGaps: true,
},.....so on
// get chart canvas
var holder = document.getElementById("myChart2");
var ctx = document.getElementById("myChart2").getContext("2d");
// create the chart using the chart canvas
var myChart = new Chart(ctx, {
type: 'scatter',
data: chartData,
options: {
scales: {
xAxes: [{
display: true,
ticks: {
beginAtZero: true,
autoSkip: true,
autoSkipPadding: 30,
stepSize: 500,
maxTicksLimit: 10
},
scaleLabel: {
display: true,
labelString: 'Days',
fontStyle: 'bold'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Oil Rate',
fontStyle: 'bold'
}
}]
}
}
});
But when I use tojson and use the same variable in a for loop its not working (Rendering a blank chart):
var ds = []
var d2 = {{data2|tojson}}
for (var j=0; j < {{o}}; j++){
ds.push ({
label: 'Cluster' +j,
fill: false,
showLine: false,
lineTension: 0.1,
backgroundColor: colorlist[j],
borderColor: colorlist[j], // The main line color
borderCapStyle: 'square',
borderDash: [], // try [5, 15] for instance
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "green",
pointBackgroundColor: "green",
pointBorderWidth: 1,
pointHoverRadius: 8,
pointHoverBackgroundColor: "yellow",
pointHoverBorderColor: "brown",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10,
// notice the gap in the data and the spanGaps: true
data :d2[j],
spanGaps: true,
});
}
var chartData2 = {
datasets : ds
}
var holder = document.getElementById("myChart2");
var ctx = document.getElementById("myChart2").getContext("2d");
// create the chart using the chart canvas
var myChart2 = new Chart(ctx, {
type: 'scatter',
data: chartData2,
options: {
scales: {
xAxes: [{
display: true,
ticks: {
beginAtZero: true,
autoSkip: true,
autoSkipPadding: 30,
stepSize: 500,
maxTicksLimit: 10
},
scaleLabel: {
display: true,
labelString: 'Days',
fontStyle: 'bold'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Oil Rate',
fontStyle: 'bold'
}
}]
}
}
});
For more clarity, this is how my data2 was created for scatter chart js:
x2 = {}
y2 = {}
data = {}
for i in n:
x2[i] = list(df_no_anamolies['Days'[df_no_anamolies["clusters_oilvsDays"]==i])
y2[i] = list(df_no_anamolies['Oil_rate(stb/d)'[df_no_anamolies["clusters_oilvsDays"]==i])
T = []
for j,k in zip(x2[i],y2[i]):
T.append({'x': j, 'y': k})
data[i] = str(T).replace('\'', '')
dt2 = list(data.items())
data2 = []
for i in range(len(dt2)):
data2.append(dt2[i][1])
This how my data2 looks like:
['[{x: 429, y: 21862.782000000003}, {x: 430, y: 21769.1868}]',
'[{x: 431, y: 21752.5183}, {x: 432, y: 21406.0022}]',
'[{x: 433, y: 20823.7369},'[{x: 434, y: 21101.5033}]',
'[{x: 435, y: 22031.354}, {x: 434, y: 21101.5033}]'....]
Can someone help me with how to do this with a loop.

Your "Y" objects are Decimal objects and the JsonEnconder doesn't accept Decimal objects. I usually just create a subclass of the json.JSONEncoder.
class DecimalEncoder(json.JSONEncoder):
def _iterencode(self, o, markers=None):
if isinstance(o, decimal.Decimal):
return (str(o) for o in [o])
return super(DecimalEncoder, self)._iterencode(o, markers)
then you can use it as
json.dumps({'Y': decimal.Decimal('21769.1868')}, cls=DecimalEncoder)

I think you'll need to parse those json strings before passing them to chart.js
var chartData2 = {
datasets : [{label: 'Cluster 1',
fill: false,
showLine: false,
lineTension: 0.1,
backgroundColor: "green",
borderColor: "black",
borderCapStyle: 'square',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "green",
pointBackgroundColor: "green",
pointBorderWidth: 1,
pointHoverRadius: 8,
pointHoverBackgroundColor: "yellow",
pointHoverBorderColor: "brown",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10,
data : JSON.parse( {{ data[1] }} ),
spanGaps: true,
}]
}

How to fix the distance between horizontal points (x-axis) in chartJS

Problem: Hi all! i am using chart.js to draw the charts. chart is a dynamic sometimes shows 10 points and sometimes can be more than thousand i have applied a panel successfully so that my points can be shown at some distance to read them easily.
Right now i want to know if there is any option to set the distance between points in x-axis grid. right now it automatically adjust the points.
What i tried:
i tried to do the stepsize and scalewidth by searching other stackoverflow answers but did not succeed. Any kind of help would be much appreciated.
P.S: i m using chart.js2
This is my chartjs dataset
var data = {
labels: data.graph_date,
datasets: [
{
label: 'Assay Values',
fill: false,
lineTension: 0,
backgroundColor: "rgba(255, 0, 0,1)",
borderColor: "rgba(255, 0, 0,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderWidth: 1,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(255, 0, 0,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(255, 0, 0,1)",
pointHoverBorderColor: "rgba(255, 0, 0,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: data.assay_value,
spanGaps: false
},var options = {
responsive: false,
title: {
display: true,
position: "top",
text: label,
fontSize: 18,
fontColor: "#111"
},
legend: {
display: true,
position: "bottom",
labels: {
fontColor: "#333",
fontSize: 16
}
},
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
label: function(tooltipItems, data) {
var multistringText = ['Assay Value: '+tooltipItems.yLabel];
multistringText.push('Assigned Value: '+assigned_value[tooltipItems.index]);
multistringText.push('Sample ID: '+sample_id[tooltipItems.index]);
return multistringText;
}
}
},
scales:{
yAxes:[{
ticks:{
min:graph_min
}
}],
xAxes: [{
gridLines: {
display:false
}
}]
}
};
if(new_chart[ctx.canvas.id] != null)
new_chart[ctx.canvas.id].destroy();
new_chart[ctx.canvas.id] =new Chart(ctx, {
type: 'line',
data: data,
options: options
});
In x-axis there is data like this
[19-Aug-2015,21-Aug-2015,21-Aug-2015,21-Aug-2015,21-Aug-2015,22-Aug-2015,27-Aug-2015,29-Aug-2015,1-Sep-2015,2-Sep-2015,3-Sep-2015,]
in y-axis data is like this
[0.1,0.05,0.89,0.89,0.79,0.58,0.68,0.25,0.98]

The way to control distance between points it to set the X and Y axis with a min, max, and step size so that they never change regardless of the number of points that are in the chart.
Here is an example that sets the scales so that they will never change. Regardless of how many points appear on the chart everything will stay the same.
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Points',
data: [
{x: 0, y: 2},
{x: 1, y: 3},
{x: 2, y: 2},
{x: 1.02, y: 0.4},
{x: 0, y: -1}
],
backgroundColor: 'rgba(123, 83, 252, 0.8)',
borderColor: 'rgba(33, 232, 234, 1)',
borderWidth: 1,
fill: false,
showLine: false,
}],
},
options: {
title: {
display: true,
text: 'Chart.js - Fixed X and Y Axis',
},
scales: {
xAxes: [{
type: 'linear',
position: 'bottom',
ticks: {
min: -1,
max: 8,
stepSize: 1,
fixedStepSize: 1,
}
}],
yAxes: [{
ticks: {
min: -2,
max: 4,
stepSize: 1,
fixedStepSize: 1,
}
}]
}
}
});
Here is a codepen example that demonstrates what this looks like

Hide scale bar on label click in Charts.js

I have a simple Charts.js Line Chart with two datasets (lines).
When I click on one of the legend labels, the visibility of the lines in the chart is toggled, but the vertical scale bar still appears. My question is how to make the vertical scale bar to shown and hidden alongside to the line?
var data = {
labels: [1, 2, 3, 4],
datasets: [
{
label: "(Mbps) UP",
fill: false,
yAxisID: "y-axis-upstream",
backgroundColor: "#98B954",
borderColor: "#98B954",
pointBorderColor: "#98B954",
pointBackgroundColor: "#fff",
pointHoverBackgroundColor: "#98B954",
pointHoverBorderColor: "#98B954",
data: [1, 2, 3, 4]
},
{
label: "(Mbps) DOWN",
fill: false,
yAxisID: "y-axis-downstream",
backgroundColor: "#BE4B48",
borderColor: "#BE4B48",
pointBorderColor: "#BE4B48",
pointBackgroundColor: "#fff",
pointHoverBackgroundColor: "#BE4B48",
pointHoverBorderColor: "#BE4B48",
data: [10, 22, 33, 43]
}
]
};
var options = {
title: {
display: true,
text: "Chart Title"
},
legend: {
display: true,
position: "top"
},
scales: {
yAxes: [
{
id: "y-axis-upstream",
type: "linear",
display: true,
position: "left",
stepSize: 0.1,
fixedStepSize: 0.1,
gridLines: {
color: "rgba(152, 185, 84, 0.4)"
},
ticks: {
display: true,
fontColor: "#98B954"
}
},
{
id: "y-axis-downstream",
type: "linear",
display: true,
position: "right",
stepSize: 0.1,
fixedStepSize: 0.1,
gridLines: {
color: "rgba(190, 75, 72, 0.2)"
},
ticks: {
display: true,
fontColor: "#BE4B48"
}
}
]
}
};
var ctx = document.getElementById("chartID");
var chart = new Chart(ctx, {
type: type,
data: data,
options: options
});

Categories

Resources