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.

i am making a dynamic chart bar in js

this is how my chart.js is looks like.... This is static chart bar And i Have to make this chat dynamic
(function($) {
// "use strict";
var dlabChartlist = function()
{
var screenWidth = $(window).width();
let draw = Chart.controllers.line.__super__.draw;
var chartBar = function()
{
var options =
{
series: [
{
name: 'Project',
data: [50, 58, 70, 40, 10, 70, 20],
// radius: 12,
},
// {
// name: 'Cycling',
// data: [80, 40, 55, 20, 45, 30, 80]
// },
],
chart: {
type: 'bar',
height: 400,
toolbar: {
show: false,
},
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '57%',
endingShape: "rounded",
borderRadius: 12,
},
},
states: {
hover: {
filter: 'none',
}
},
colors:['#FFA26D'],
dataLabels: {
enabled: false,
},
markers: {
shape: "circle",
},
legend: {
show: false,
fontSize: '12px',
labels: {
colors: '#000000',
},
markers: {
width: 18,
height: 18,
strokeWidth: 10,
strokeColor: '#fff',
fillColors: undefined,
radius: 12,
}
},
stroke: {
show: true,
width: 4,
curve: 'smooth',
lineCap: 'round',
colors: ['transparent']
},
grid: {
borderColor: '#eee',
},
xaxis: {
position: 'bottom',
categories: ['Project1', 'Project2', 'Project3', 'Project4', 'Project5', 'Project6', 'Project7'],
labels: {
style: {
colors: '#787878',
fontSize: '13px',
fontFamily: 'poppins',
fontWeight: 100,
cssClass: 'apexcharts-xaxis-label',
},
},
crosshairs: {
show: false,
}
},
yaxis: {
labels: {
offsetX:-16,
style: {
colors: '#787878',
fontSize: '13px',
fontFamily: 'poppins',
fontWeight: 100,
cssClass: 'apexcharts-xaxis-label',
},
},
},
fill: {
type: 'gradient',
gradient: {
shade: 'white',
type: "vertical",
shadeIntensity: 0.2,
gradientToColors: undefined, // optional, if not defined - uses the shades of same color in series
inverseColors: true,
opacityFrom: 1,
opacityTo: 1,
stops: [0, 50, 50],
colorStops: []
}
},
tooltip: {
y: {
formatter: function (val) {
return val + " Days"
}
}
},
};
var chartBar1 = new ApexCharts(document.querySelector("#chartBar"), options);
chartBar1.render();
}
And this is where im showing index.html where i m showing this chart
<div class="tab-pane fade active show" id="monthly">
<div id="chartBar" class="chartBar"></div>
</div>
I don't have enough knowledge about js and i want this chart bar dynamic.....
and i m using mysql
how can i convert it into dynamic chart

chartjs 3.6.0 add X label

I used following code in Chart 2.2.1 and it worked well and we can see label Time.
Now we want to upgrade to 3.6.0 due to security reasons, but snippet stopped working. I attach 2 fiddles
Working 2.2.1: https://jsfiddle.net/maksim_beliaev/2ru3g5ot/8/
Not working 3.6.0: https://jsfiddle.net/maksim_beliaev/q2poncyd/5/
How can I set label for X and Y axis with new chartjs? In online docs for Axis and Labels looks like that syntax should be correct
function create_line_chart(ctx, x_axis, version_1, y_axis_1, version_2, y_axis_2) {
new Chart(ctx, {
type: 'line',
data: {
labels: x_axis,
type: 'line',
defaultFontFamily: 'Montserrat',
datasets: [{
label: version_1,
data: y_axis_1,
backgroundColor: 'transparent',
borderColor: 'rgba(220,53,69,0.75)',
borderWidth: 3,
pointStyle: 'circle',
pointRadius: 5,
pointBorderColor: 'transparent',
pointBackgroundColor: 'rgba(220,53,69,0.75)',
}, {
label: version_2,
data: y_axis_2,
backgroundColor: 'transparent',
borderColor: 'rgba(40,167,69,0.75)',
borderWidth: 3,
pointStyle: 'circle',
pointRadius: 5,
pointBorderColor: 'transparent',
pointBackgroundColor: 'rgba(40,167,69,0.75)',
}]
},
options: {
responsive: true,
tooltips: {
mode: 'index',
titleFontSize: 12,
titleFontColor: '#000',
bodyFontColor: '#000',
backgroundColor: '#fff',
titleFontFamily: 'Montserrat',
bodyFontFamily: 'Montserrat',
cornerRadius: 3,
intersect: false,
},
legend: {
display: false,
labels: {
usePointStyle: true,
fontFamily: 'Montserrat',
},
},
scales: {
xAxes: [{
display: true,
gridLines: {
display: false,
drawBorder: false
},
scaleLabel: {
display: true,
labelString: 'Time'
}
}],
yAxes: [{
display: true,
gridLines: {
display: false,
drawBorder: false
},
scaleLabel: {
display: true,
labelString: 'Value'
}
}]
},
title: {
display: false,
text: 'Normal Legend'
}
}
});
}
var ctx = document.getElementById( "canvas" );
ctx.height = 150;
create_line_chart(ctx, [2010, 2011, 2012, 2013, 2014, 2015, 2016],
194,
[0, 30, 10, 120, 50, 63, 10],
221,
[0, 50, 40, 80, 40, 79, 120],
);

Chart.js v3 has lots of API changes from Chart.js v2, you should pass your title configuration like this:
const titleConfig = {
scales: {
x: {
display: true,
title: {
display: true,
text: "Time",
padding: { top: 20, left: 0, right: 0, bottom: 0 },
},
},
y: {
display: true,
title: {
display: true,
text: "Value",
padding: { top: 30, left: 0, right: 0, bottom: 0 },
},
},
},
};
More information on how to use title configuration can be found on the documentation.
Here's a working fiddle: https://jsfiddle.net/vkghzxLc/15/

Basicly your whole options object is wrong, there are some major breaking changes in chart.js v3. For all changes please read the migration guide.
For the scale label to show you need to configure it in options.scales.x.title.text, also the tooltip and legend need to be configured in the plugins namespace, tooltip has been made singular

how can i use chart.js to create a chart that has one time series line and one linear line on it at the same time?

I want to draw a reference line in the time series chart. I tried to use two x axis and two y axis so I have like two graphs in one. the one would show time scale line and the other one would show linear line (reference line).
image example of what I want it to look like :
I tried in fiddle but its like the two X axis are connected and not scaling separately:
var data = {
labels: [],
datasets: [{
fill: 'none',
label: 'signal1',
backgroundColor: 'rgba(75,192,192,0.4)',
pointRadius: 5,
pointHoverRadius: 7,
borderColor: 'rgba(75,192,192,1)',
borderWidth: 1,
lineTension: 0,
xAxisID: 'xAxis1',
yAxisID: 'yAxis1',
data: [{
x: '2016-07-17',
y: 44
},
{
x: '2016-07-19',
y: 50
},
{
x: '2016-07-22',
y: 84
},
],
}, {
fill: 'none',
label: 'signal2',
lineTension: 0,
xAxisID: 'xAxis2',
yAxisID: 'yAxis2',
data: [{
x: 0,
y: 55
},
{
x: 1,
y: 55
},
]
}],
};
var option = {
scales: {
yAxes: [{
id: 'yAxis1',
offset: true,
gridLines: {
color: 'rgba(151, 151, 151, 0.2)',
display: true,
zeroLineColor: '#979797',
zeroLineWidth: 1,
tickMarkLength: 15,
drawBorder: true,
},
ticks: {
beginAtZero: false,
padding: 5,
fontSize: 12,
fontColor: '#222222',
},
}, {
id: 'yAxis2',
gridLines: {
color: 'rgba(151, 151, 151, 0.2)',
display: false,
drawBorder: false,
},
ticks: {
beginAtZero: false,
},
}],
xAxes: [{
id: 'xAxis1',
offset: true,
bounds: 'data',
type: 'time',
distribution: 'linear',
time: {
unit: 'day',
displayFormats: {
day: 'D.M.YYYY',
},
},
gridLines: {
display: true,
color: 'rgba(151, 151, 151, 0.2)',
zeroLineColor: '#979797',
zeroLineWidth: 1,
tickMarkLength: 5,
drawBorder: true,
},
ticks: {
source: 'auto',
autoSkip: true,
autoSkipPadding: 30,
maxRotation: 0,
padding: 2,
fontSize: 12,
fontColor: '#222222',
},
}, {
id: 'xAxis2',
type:"linear",
gridLines: {
display: false,
drawBorder: false,
},
}]
}
};
https://jsfiddle.net/2gyk9v5e/15/

This can be done with the Plugin Core API. The API offers different hooks that may be used for executing custom code. In your case, you can use the afterDraw hook to draw the desired lines directly on the canvas using CanvasRenderingContext2D.
plugins: [{
afterDraw: chart => {
var ctx = chart.chart.ctx;
var xAxis = chart.scales['x-axis-0'];
var yAxis = chart.scales['y-axis-0'];
ctx.save();
chart.data.datasets[0].refLines.forEach(r => {
var y = yAxis.getPixelForValue(r.y);
ctx.strokeStyle = r.color;
ctx.beginPath();
ctx.moveTo(xAxis.left, y);
ctx.lineTo(xAxis.right, y);
ctx.stroke();
});
ctx.restore();
}
}],
Above code assumes that the reference lines are defined inside your dataset through the following definition.
refLines: [
{ y: 45, color: '#0be059' },
{ y: 49, color: '#fc3503' }
]
Please take a look at your amended code and see how it works.
new Chart('canvas', {
type: 'line',
plugins: [{
afterDraw: chart => {
var ctx = chart.chart.ctx;
var xAxis = chart.scales['x-axis-0'];
var yAxis = chart.scales['y-axis-0'];
ctx.save();
chart.data.datasets[0].refLines.forEach(r => {
var y = yAxis.getPixelForValue(r.y);
ctx.strokeStyle = r.color;
ctx.beginPath();
ctx.moveTo(xAxis.left, y);
ctx.lineTo(xAxis.right, y);
ctx.stroke();
});
ctx.restore();
}
}],
data: {
datasets: [{
fill: false,
label: 'signal1',
backgroundColor: 'rgba(75,192,192,0.4)',
pointRadius: 5,
pointHoverRadius: 7,
borderColor: 'rgba(75,192,192,1)',
borderWidth: 1,
lineTension: 0,
data: [
{ x: '2016-07-14', y: 44 },
{ x: '2016-07-15', y: 52 },
{ x: '2016-07-16', y: 45 },
{ x: '2016-07-17', y: 47 },
{ x: '2016-07-18', y: 35 },
{ x: '2016-07-19', y: 46 },
{ x: '2016-07-20', y: 50 },
{ x: '2016-07-21', y: 44 }
],
refLines: [
{ y: 45, color: '#0be059' },
{ y: 49, color: '#fc3503' }
]
}]
},
options: {
scales: {
yAxes: [{
gridLines: {
color: 'rgba(151, 151, 151, 0.2)',
display: false,
drawBorder: false
}
}],
xAxes: [{
offset: true,
bounds: 'data',
type: 'time',
time: {
unit: 'day',
displayFormats: {
day: 'D.M.YYYY',
}
},
gridLines: {
color: 'rgba(151, 151, 151, 0.2)',
zeroLineColor: '#979797',
zeroLineWidth: 1,
tickMarkLength: 5,
drawBorder: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.min.js"></script>
<canvas id="canvas" height="80"></canvas>

Chart js Datalabels styling

So I'm using the datalabels plugin for Chartjs on a bar chart. Each label has data for monthly and 7 days prior. I want the datalabels to be colored red for monthly black for 7 days prior. the color feature in options groups 2 bars together and displays 2 red 2 black 2 red 2 black in chunks as appose to individually.
Heres a link to the outputted chart. https://imgur.com/fqPesYz
import Chart from "chart.js";
import ChartDataLabels from "chartjs-plugin-datalabels";
require("../../Row4/Row4Charts/RoundedBars.js");
export default class Cancellations7daysChart extends Component {
Cancellations7daysChart = React.createRef();
componentDidMount() {
const Cancellations7daysChart = this.Cancellations7daysChart.current.getContext(
"2d"
);
new Chart(Cancellations7daysChart, {
type: "bar",
data: {
labels: ["DSL", "FTTC", "FTTP", "GFast"],
datasets: [
{
label: "Monthly",
data: [7, 19, 2, 0],
backgroundColor: [
"rgba(255, 9, 49)",
"rgba(255, 9, 49)",
"rgba(255, 9, 49)",
"rgba(255, 9, 49)"
],
borderColor: [
"rgba(0, 193, 189)",
"rgba(255, 9, 49)",
"rgba(0, 193, 189)",
"rgba(0, 193, 189)"
],
borderWidth: 1,
pointRadius: 4,
},
{
label: "7 days prior",
data: [2, 11, 5, 3],
backgroundColor: [
"rgba(208, 210, 211)",
"rgba(208, 210, 211)",
"rgba(208, 210, 211)",
"rgba(208, 210, 211)"
],
borderColor: [
"rgba(208, 210, 211)",
"rgba(208, 210, 211)",
"rgba(208, 210, 211)",
"rgba(208, 210, 211)"
],
borderWidth: 1,
pointRadius: 6,
}
]
},
options: {
maintainAspectRatio: true,
cornerRadius: 6,
cutoutPercentage: 65,
angleLines: {
display: true
},
tooltips: {
enabled: true
},
label: {
usePointStyle: true
},
legend: {
position: "bottom",
labels: {
filter: function (legendItem, Cancellations7daysChart) {
return !legendItem.text.includes("Monthly");
}
}
},
scales: {
ticks: {
maxTickLimit: 1,
max: 15,
display: false
},
//yaxes change
yAxes: [
{
gridLines: {
drawBorder: false,
display: false
},
ticks: {
beginAtZero: true,
display: false
}
}
],
//xaxes change
xAxes: [
{
ticks: {
//Change font here
},
gridLines: {
drawBorder: false,
display: false,
scaleShowLabels: false
}
}
]
},
plugins: {
datalabels: {
color: ["red", "black", "red", "black", "red", "black", "red", "black"],
align: "end",
anchor: "end"
}
}
}
});
}
render() {
return (
<div>
<canvas
id="Cancellations7daysChart"
ref={this.Cancellations7daysChart}
width={360}
height={360}
/>
</div>
);
}
}

You need to make a function to change the colors depending their label:
plugins: {
datalabels: {
anchor: 'end',
align: 'end',
color: function(context) {
var index = context.dataIndex;
var value = context.dataset.data[index];
var valueRed = context.dataset.label;
if(valueRed === 'Monthly') {
return value = 'red';
} else {
return value = '#000';
}
}
}
}
Here is a working example: Plunker example
More info about formatting in the plugin's page: Scriptable Options