We Keep Coding

chart.js cuts data points to half

I have a chart showing website calls the last 7 days. There it is:
Here is the initialization:
varwebsitecalls_chart = new Chart(websitecalls_chartel, {
type: 'line',
data: {
labels: ["Sa", "So", "Mo", "Di", "Mi", "Do", "Fr"],
datasets: [{
label: 'Websitecalls',
data: [0, 0, 0, 0, 0, 0, 0],
borderWidth: 2,
borderColor: '#00000',
backgroundColor: '#ffff',
pointStyle: 'circle',
pointRadius: 7,
cubicInterpolationMode: 'monotone',
tension: 0.4,
}]
},
options: {
responsive: true,
plugins: {
legend: {
display: false
},
},
scales: {
x: {
grid: {
display: false,
}
},
y: {
min: 0,
ticks: {
precision: 0,
font: {
family: 'Montserrat',
},
},
grid: {
borderDash: [5, 5],
}
},
}
},
});
Problem:
The Problem is that the chart cuts of the circles when the data is 0 because I set min to 0. I have to set min to 0 because negative websitecalls can not exist. If I do not set it -1 will be displayed. Is there a way to fix this designtechnical issue?
Thanks in advance,
Filip.

No idea why, but defining y.beginAtZero: true instead of y.min: 0 will solve the problem.
Please take a look at your amended and runnable code and see how it works.
new Chart('websitecalls_chartel', {
type: 'line',
data: {
labels: ["Sa", "So", "Mo", "Di", "Mi", "Do", "Fr"],
datasets: [{
label: 'Websitecalls',
data: [0, 0, 0, 0, 0, 0, 0],
borderWidth: 2,
borderColor: '#00000',
backgroundColor: '#ffff',
pointStyle: 'circle',
pointRadius: 7,
cubicInterpolationMode: 'monotone',
tension: 0.4,
}]
},
options: {
responsive: true,
plugins: {
legend: {
display: false
},
},
scales: {
x: {
grid: {
display: false,
}
},
y: {
beginAtZero: true,
ticks: {
precision: 0,
font: {
family: 'Montserrat',
},
},
grid: {
borderDash: [5, 5],
}
},
}
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script>
<canvas id="websitecalls_chartel" height="80"></canvas>
Chart.js documentation states...
beginAtZero: if true, scale will include 0 if it is not already included.
min: user defined minimum number for the scale, overrides minimum value from data.

echarts add padding between line chart and y-axis label

I use echarts plugin to build line chart at a some web pages. It works good but I can't find out inside documentation how to add padding between line chart and y-axis label and move y-axis label to the center between y-axis split lines?
Current line echarts plugin instance view:
Expected line echarts plugin instance view:
The screenshot above mean that I mentally shifted the graph away from the internal label so that they would not intersect and moved the labels along the y-axis of the game below exactly in the center between the split lines
What settings in the plugin do I need to change to achieve the same result as in the screenshot with the expected result?

You can achieve this in the different ways, but most of the them are costly to support and harden to implement. It one of safety and ease way but you will need to keep an eye that xAxis have a little bit more points than series data to show gap.
var myChart = echarts.init(document.getElementById('main'));
var option = {
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
right: '10%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: [1, 2, 3, 4, 5, 6, 7, 8, 9]
},
yAxis: {
type: 'value',
position: 'right',
axisLabel: {
inside: true,
margin: 50,
fontSize: 18
}
},
series: [{
type: 'line',
areaStyle: {
color: 'rgba(104, 216, 214, 0.4)'
},
lineStyle: {
width: 2,
color: 'rgba(104, 216, 214, 1)'
},
data: [120, 132, 101, 134, 90, 230, 210]
}, ]
};
myChart.setOption(option);
<script src="https://cdn.jsdelivr.net/npm/echarts#4.8.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

var myChart = echarts.init(document.getElementById('main'));
var seriesData = Array.from({length: 100}, () => Math.floor(Math.random() * 5000));
var option = {
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
right: '10%',
bottom: '15%',
},
xAxis: [{
id: 'xAxis1',
type: 'category',
boundaryGap: false,
data: Array.from({length: seriesData.length}, () => Math.floor(Math.random() * 100)),
axisLine: {
lineStyle: {
shadowOffsetX: 60,
},
},
}],
yAxis: [{
type: 'value',
axisLine: { onZero: false },
position: 'right',
show: true,
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,0)',
},
},
splitLine: {
lineStyle: {
shadowOffsetX: 60,
shadowColor: '#ccc'
}
},
axisLabel: {
interval: 0,
inside: true,
margin: -45,
fontSize: 16,
padding: [-50, 0, 0, 0],
color: 'black',
showMinLabel: false,
showMaxLabel: false,
},
},{
type: 'value',
position: 'right',
show: true,
offset: 59,
}
],
dataZoom: [{
type: 'inside'
}, {
type: 'slider',
show: true,
bottom: 0
}],
series: [{
id: 'series1',
type: 'line',
yAxisIndex: [0,1],
lineStyle: {
width: 1,
},
label: {},
data: seriesData,
}],
};
myChart.setOption(option);
<script src="https://cdn.jsdelivr.net/npm/echarts#4.8.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

chart.js zeroLineColor does not work as expected

I don't know if it is a regression or if I don't do it right.
I want my chart to get a black border. I found on another stackoverflow question that you need to add empty axes for that.
But I define the zeroLineColor for each of them, and this does nothing. The color is still the default.
Moreover, if I specify the gridLines color, it is that color that is used for the zeroLineColor.
Here is simple example: https://jsfiddle.net/2sLmoc1u/ No black border. Just gray or black with too much alpha
var chart = new Chart(ctx, {
type: 'line',
data: {
//labels: [ 1, 2, 3, 4, 5, 6],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
}]
},
options: {
responsive: false,
legend: {
display: false
},
scales: {
xAxes: [{
gridLines: {
zeroLineColor: '#000',
color: '#999', // the bottom axes is grey instead of black
},
}, {
position: 'top',
ticks: {
display: false
},
gridLines: {
zeroLineColor: '#000' // this seems to do nothing
}
}],
yAxes: [{
ticks: {
display: false
},
gridLines: {
display: false,
drawTicks: false,
zeroLineColor: '#000'
}
}, {
position: 'right',
ticks: {
display: false
},
gridLines: {
display: false,
drawTicks: false,
zeroLineColor: '#000'
}
}],
}
}
});

This is how achieved the color of zero line.
Chart.defaults.scale.gridLines.color = "#FFFFFF"; //white

Since the line is horizontal it would seem (believe me, I agree with you) that you need to put the zerLineColor on the xAxes but you need to put it on the yAxes
yAxes: [
{
gridLines: {
zeroLineColor: '#000',
}
}
]

datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: "rgba(0, 0, 0, 1)",
}]
Check with the above given data sets. It can convert the color of line to black.

Chartjs only displaying first and last x-axis labels

I have a dataset which has around 60 x-axis labels. My line chart is not displaying all the labels in my x-axis.
var ctx = this.refs.basicXYChart;
var config = {
type: 'line',
data: {
xLabels: Object.keys(result),
yLabels: Object.values(result),
datasets: [{
label: this.state.report.definition.name,
data: Object.values(result),
backgroundColor: 'rgba(154, 208, 245, 0.5)',
borderWidth: 1,
pointStyle: 'circle',
pointBackgroundColor: 'rgb(77, 172, 237)',
pointRadius: 5,
pointHoverRadius: 10,
borderWidth: 1,
borderColor: '#000000'
}]
},
options: {
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: this.props.X_label
}
}],
yAxes: [{
position: 'left',
display: true,
scaleLabel: {
display: true,
labelString: this.props.Y_label
}
}]
}
}
};
if(y_type == 'category'){
config.options.scales.yAxes[0]['type'] = 'category';
}
var myChart = new Chart(ctx, config);
I also want to start the y-axis from 0

This is addressed in https://github.com/chartjs/Chart.js/issues/2801.
scales: {
xAxes: [{
ticks: {
autoSkip: false
}
}]
}
Which can be found in the documentation here: http://www.chartjs.org/docs/latest/axes/cartesian/#tick-configuration

Chart.js configuring x axis so that the spaces are not always equal

createLineChart() {
this.lineChartEl = new Chart(this.lineCanvas.nativeElement, {
type: 'line',
data: {
labels: [10, 11, 17, 18, 19, 23],
datasets: [
{
fill: true,
backgroundColor: '#C4CEE5',
label: 'recorded values',
borderColor: '#C4CEE5',
pointBorderColor: '#ffff',
pointBackgroundColor: '#ffff',
hoverBackgroundColor: '#C4CEE5',
pointRadius: 7,
borderCapStyle: 'square',
borderJoinStyle: 'round',
borderWidth: 1.5,
lineTension: 0,
data: [23, 34, 45, 12, 45, 65],
borderDash: [],
borderDashOffset: 0.0,
spanGaps: false,
}]
},
options : {
legend: {
display: false,
position: 'top',
fullWidth: true,
},
scaleOverride: true,
scaleSteps: 10,
scaleStepWidth: 20,
scaleStartValue: 0,
scales: {
yAxes: [{
ticks: {
suggestMax: max,
maxTicksLimit: 4,
beginAtZero: true,
padding: 30
},
}],
xAxes: [{
ticks: {
min: 0,
maxTicksLimit: 5,
autoSkip: false,
beginAtZero: true,
},
time: {
unit: 'day',
unitStepSize: 1,
displayFormats: {
day: 'MMM D'
},
},
gridLines : {
display : false,
drawBorder: false,
color: 'transparent',
},
}]
},
},
});
};
I have created a chart.js line chart where the values on the x axis are dates. I think by default, chart.js plots data with an equal amount of distance between the points regardless of the value of the data.
I would like it so there is a large space in the chart if the dates are further apart.
I have tried using chart-scatter the plugin for chart.js but have not had much luck as I am using ionic/angular but if you have any experience with it that would be great!
What I would like the chart to look like with more space depending on the x-axis value: