I want to make Chart.js line graph to draw line from left to right smoothly. I want alson icon at the end of line.
So far I was able to make line, but transition is very harsh. It is really basic way, just adding new datapoints to graph. Could somebody please help me to fix it?
Thank you
here is codepen: https://codepen.io/anon/pen/OwYGrp?editors=0010
code:
const datam = [510, 13357, 19950, 26679, 32514, 37720, 44487, 50596, 56095, 50000, 40670]
var noneimg = new Image();
noneimg.src = 'https://upload.wikimedia.org/wikipedia/commons/8/8c/Transparent.png'
var sun = new Image();
sun.src = 'https://i.imgur.com/yDYW1I7.png';
function animation (u) {
function animatePart(u) {
myChart.data.datasets[0].data.push(datam[u]);
Chart.pluginService.register({
afterUpdate: function(chart) {
if (u>0 && u <datam.length) {
myChart.config.data.datasets[0]._meta[0].data[u-1]._model.pointStyle = noneimg;
}
myChart.config.data.datasets[0]._meta[0].data[u]._model.pointStyle = sun;
}
});
myChart.update();
}
for (let i = 0; i<=datam.length; i++) {
(function() {
setTimeout(function () { animatePart(i); }, 200+ ( i * 580 ));
})()}
}
var ctx = document.getElementById("line_chart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017" ],
datasets: [{
label: 'xxxx xx',
radius: 0.7,
fill: '#FFFFFF',
data: [],
backgroundColor: 'dodgerblue',
borderColor: 'dodgerblue',
borderWidth: 4,
},{
label: 'xxxx',
fill: '#FFFFFF',
radius: 0.7,
data: [],
backgroundColor: 'indianred',
borderColor: 'indianred',
borderWidth: 5
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
title: {
display: true,
text: 'xxx',
fontSize: 24,
fontFamily: "open sans",
fontColor: 'black',
fontStyle: 'bold',
},
legend: {
labels: {
fontColor: 'black',
fontSize: 16,
}},
tooltips: {
mode: 'index',
intersect: false,
backgroundColor: 'black',
titleFontColor: 'white',
titleFontSize: 16,
bodyFontSize: 13,
bodyFontColor: 'white',
bodySpacing: 3,
yPadding: 8,
borderColor: 'black',
},
hover: {
mode: 'nearest',
},
animation: {
duration: 1600,
numSteps: 10,
easing: "easeInQuad",
},
scales: {
xAxes: [{
ticks: {
fontColor: 'black',
fontSize: 16,
},
display: true,
scaleLabel: {
display: false,
labelString: 'xxx'
}
}],
yAxes: [{
ticks: {
min: 0,
max: 70000,
beginAtZero: false,
fontColor: 'black',
fontSize: 16,
},
display: true,
scaleLabel: {
display: false,
labelString: 'xx'
}
}]
},
}
})
animation()
Related
How to display different tooltips on chart columns? It is necessary to output data from:
data: [220, 315, 380, 470, 520] and data: [135, 190, 180, 160, 240]
Now duplicated.
Here is my code (using chart.js):
My fiddle
https://jsfiddle.net/ebgaouv8/
Thanks in advance for any help!
You have to change your tooltip mode from label to point and dont hard code the datasetIndex. To solve deprecation issue, remove the barpercentage from the scale option and specify it in every dataset or you can configure it globally before you make the chart like this: Chart.defaults.global.datasets.bar.barPercentage = 0.5;.
var barChart = {
labels: ["2016", "2017", "2018", "2019", "2020"],
datasets: [{
label: '',
backgroundColor: "rgba(34,42,171, 0.7)",
borderColor: 'rgba(34,42,171, 1)',
borderWidth: 1,
barPercentage: 0.5,
data: [220, 315, 380, 470, 520]
},
{
label: '',
backgroundColor: "#ceb947",
barPercentage: 0.5,
data: [135, 190, 180, 160, 240]
},
]
};
var ctx4 = document.getElementById("chartJSContainer").getContext("2d");
window.newBar = new Chart(ctx4, {
type: 'bar',
data: barChart,
options: {
title: {
display: false,
fontStyle: 'bold',
text: "Figure"
},
legend: {
display: false,
position: "bottom",
padding: 20,
labels: {}
},
tooltips: {
mode: 'point',
bodySpacing: 10,
cornerRadius: 0,
titleFontSize: 16,
bodyFontSize: 14,
titleMarginBottom: 15,
callbacks: {
label: function(tooltipItem, data) {
var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
value = value.toString();
value = value.split((/(?=(?:..)?$)/));
value = value.join(',');
return 'Total: ' + value + ' %';
}
}
},
scales: {
xAxes: [{
gridLines: false,
ticks: {
fontColor: 'rgb(37,39,103)',
fontSize: '14',
autoSkip: false,
maxRotation: 45,
minRotation: 45,
padding: 15
}
}],
yAxes: [{
ticks: {
fontColor: 'rgb(37,39,103)',
fontSize: '14',
beginAtZero: true,
stepSize: 100,
userCallback: function(value, index, values) {
value = value.toString();
value = value.split(/(?=(?:..)?$)/);
value = value.join(',');
return value + ' %';
}
}
}]
},
responsive: true,
}
});
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
</body>
I'm having some trouble trying to change the backgroundColor of a specific chart area between two yAxis ticks.This is what I have so far:
And this is what I wanted:
I've seen some similar posts about that and people recommend using Annotation to do this. I tried using it on my chart and it didn't work. This is my first time building a chart with chart.js so I'm still learning. Here's my code:
var profileChart = new Chart(ctx1, {
type: "line",
data: {
labels: ["", "D", "I", "S", "C", ""],
datasets:[{
data: [],
borderWidth: 1,
pointBackgroundColor: "black",
backgroundColor: "black",
borderColor: "black",
fill: false,
lineTension: 0,
yAxisID: 'first-y-axis'
},
{
yAxisID: 'third-y-axis'
}],
},
options: {
title: {
display: true,
text: 'Gráfico do Perfil DISC',
fontSize: 20,
},
scales: {
yAxes: [{
id: 'first-y-axis',
type: 'linear',
gridLines: {
drawOnChartArea: false
},
scaleLabel: {
display: true,
padding: '15px',
labelString: 'Intensity'
},
ticks: {
max: 28,
min: 1,
stepSize: 1
}
},
{
id: 'second-y-axis',
type: 'linear',
position: 'left',
gridLines: {
drawOnChartArea: true
},
ticks: {
display: false,
min: 1,
max: 8,
stepSize: 1
}
},
{
id: 'third-y-axis',
position: 'right',
type: 'linear',
gridLines: {
drawOnChartArea: false
},
scaleLabel: {
display: true,
padding: '10px',
labelString: 'Segment'
},
ticks: {
max: 7.5,
min: 0.5,
stepSize: 1
},
afterTickToLabelConversion: function(scaleInstance) {
scaleInstance.ticks[0] = null;
scaleInstance.ticks[scaleInstance.ticks.length - 1] = null;
scaleInstance.ticksAsNumbers[0] = null;
scaleInstance.ticksAsNumbers[scaleInstance.ticksAsNumbers.length - 1] = null;
},
}]
},
legend: {
display: false
},
tooltips: {
callbacks: {
label: function(tooltipItem) {
return tooltipItem.yLabel;
}
}
}
},
annotation: {
drawTime: "afterDraw",
annotations: [{
id: 'box1',
type: 'box',
yScaleID: 'second-y-axis',
yMin: 12.5,
yMax: 16.5,
backgroundColor: 'grey',
}]
}
});
You can draw the rectangle directly on the canvas using the Plugin Core API. The API offers a range of hooks that may be used for performing custom code.
In your amended code below, I use the beforeDraw hook to draw the rectangle through CanvasRenderingContext2D.fillRect().
var profileChart = new Chart('canvas', {
type: "line",
plugins: [{
beforeDraw: chart => {
var ctx = chart.chart.ctx;
var xAxis = chart.scales['x-axis-0'];
var yAxis = chart.scales['first-y-axis'];
ctx.save();
ctx.fillStyle = 'lightgray';
ctx.beginPath();
var yTop = yAxis.getPixelForValue(16.5);
var yBottom = yAxis.getPixelForValue(12.5);
ctx.fillRect(xAxis.left, yTop, xAxis.right - xAxis.left, yBottom - yTop);
ctx.stroke();
ctx.restore();
}
}],
data: {
labels: ["", "D", "I", "S", "C", ""],
datasets: [{
data: [,25.5, 8, 7.5, 11],
borderWidth: 1,
pointBackgroundColor: "black",
backgroundColor: "black",
borderColor: "black",
fill: false,
lineTension: 0,
yAxisID: 'first-y-axis'
},
{
yAxisID: 'third-y-axis'
}
],
},
options: {
title: {
display: true,
text: 'Gráfico do Perfil DISC',
fontSize: 20,
},
scales: {
yAxes: [{
id: 'first-y-axis',
type: 'linear',
gridLines: {
drawOnChartArea: false
},
scaleLabel: {
display: true,
padding: '15px',
labelString: 'Intensity'
},
ticks: {
max: 28,
min: 1,
stepSize: 1
}
},
{
id: 'second-y-axis',
type: 'linear',
position: 'left',
gridLines: {
drawOnChartArea: true
},
ticks: {
display: false,
min: 1,
max: 8,
stepSize: 1
}
},
{
id: 'third-y-axis',
position: 'right',
type: 'linear',
gridLines: {
drawOnChartArea: false
},
scaleLabel: {
display: true,
padding: '10px',
labelString: 'Segment'
},
ticks: {
max: 7.5,
min: 0.5,
stepSize: 1
},
afterTickToLabelConversion: function(scaleInstance) {
scaleInstance.ticks[0] = null;
scaleInstance.ticks[scaleInstance.ticks.length - 1] = null;
scaleInstance.ticksAsNumbers[0] = null;
scaleInstance.ticksAsNumbers[scaleInstance.ticksAsNumbers.length - 1] = null;
},
}
]
},
legend: {
display: false
},
tooltips: {
callbacks: {
label: function(tooltipItem) {
return tooltipItem.yLabel;
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.min.js"></script>
<canvas id="canvas" height="200">
My chart.js
var ctx_1 = document.getElementById('https_http').getContext('2d');
var myChart_1 = new Chart(ctx_1, {
type: 'horizontalBar',
data: {
labels: ['HTTPS Pages','HTTP Pages'],
datasets: [{
data: [ {{ $array_https_http[0] }}, {{ $array_https_http[1] }}],
backgroundColor: [
'rgb(81, 170, 120)',
'rgb(198, 222, 208)'
]
}]
},
options: {
showAllTooltips: true,
tooltips: {
enabled: true,
displayColors: false,
yPadding: 20,
xPadding: 30,
caretSize: 10,
backgroundColor: 'rgba(240, 240, 240, 1)',
bodyFontSize: 16,
bodyFontColor: 'rgb(50, 50, 50)',
borderColor: 'rgba(0,0,0,1)',
borderWidth: 1,
cornerRadius: 0,
yAlign: 'bottom',
xAlign: 'center',
position: 'custom',
custom: function(tooltip) {
if (!tooltip) return;
// disable displaying the color box;
tooltip.displayColors = false;
},
callbacks: {
// use label callback to return the desired label
label: function(tooltipItem, data) {
return tooltipItem.yLabel + " : " + tooltipItem.xLabel ;
},
// remove title
title: function(tooltipItem, data) {
return;
}
}
},
responsive: false,
legend: { display: false },
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
},
gridLines: {
display: false
},
}],
xAxes: [{
ticks: {
stepSize:100
}
}],
}
}
});
My tooltips code
Chart.Tooltip.positioners.custom = function(elements, position) {
if (!elements.length)
return false;
var em = elements[0]._model;
return {
x: em.x-((em.x-em.base)/2),
y: em.y+em.height/4
}
}
My output
My expected output
Is there anyone can help me how to put those value after the bar like the second picture. I just want to display the value to know even its zero. My custom tooltips was to show a different hover rather than default. All your help are appreciated and thank you in advance.
You can use the chartjs.datalabel plugin for achieving the need. I have created a fiddle for you -> http://jsfiddle.net/Labkrpf4/
Hope it helps!
var ctx_1 = document.getElementById('https_http').getContext('2d');
var myChart_1 = new Chart(ctx_1, {
type: 'horizontalBar',
data: {
labels: ['HTTPS Pages', 'HTTP Pages'],
datasets: [{
data: [0, 430],
backgroundColor: [
'rgb(81, 170, 120)',
'rgb(198, 222, 208)'
]
}]
},
options: {
showAllTooltips: true,
tooltips: {
enabled: true,
displayColors: false,
yPadding: 20,
xPadding: 30,
caretSize: 10,
backgroundColor: 'rgba(240, 240, 240, 1)',
bodyFontSize: 16,
bodyFontColor: 'rgb(50, 50, 50)',
borderColor: 'rgba(0,0,0,1)',
borderWidth: 1,
cornerRadius: 0,
yAlign: 'bottom',
xAlign: 'center',
position: 'custom',
custom: function(tooltip) {
if (!tooltip) return;
// disable displaying the color box;
tooltip.displayColors = false;
},
callbacks: {
// use label callback to return the desired label
label: function(tooltipItem, data) {
return tooltipItem.yLabel + " : " + tooltipItem.xLabel;
},
// remove title
title: function(tooltipItem, data) {
return;
}
}
},
responsive: false,
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
},
gridLines: {
display: false
},
}],
xAxes: [{
ticks: {
stepSize: 100
}
}],
},
plugins: {
datalabels: {
align: 'end',
anchor: 'end',
backgroundColor: function(context) {
return context.dataset.backgroundColor;
},
borderRadius: 4,
color: 'white',
formatter: Math.round
}
}
}
});
I am unable to find answer on how to extend both grid lines and graph line to the edge of the canvas and make it fill with background color, while keeping the padding and value ratio (pictures better show what I mean)
Currently, I have canvas as seen here:
and I want to achieve result as sampled here:
My current code:
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["PON", "WT", "ŚR", "CZW", "PT", "SB"],
datasets: [{
data: [56, 35, 35, 60, 20, 50],
borderColor: [
'rgba(255,255,255)'
],
borderWidth: 2,
backgroundColor: 'rgba(0,0,0,0.1)',
pointRadius: 5,
pointBorderColor: 'rgb(255,255,255)',
pointBackgroundColor: 'rgba(112,185,200,1.00)'
}]
},
options: {
layout: {
padding: {
top: 15,
bottom: 35,
left: 155
}
},
elements: {
line: {
tension: 0
}
},
legend: {
display: false
},
tooltip: {
enabled: false
},
scales: {
color: 'rgb(255,255,255)',
yAxes: [{
position: 'right',
labelFontColor: "red",
ticks: {
beginAtZero: false,
fontColor: '#eee',
fontFamily: "Poppins",
padding: 20
},
gridLines: {
color: 'rgba(255,255,255,0.25)',
drawBorder: false,
}
}],
xAxes: [{
position: 'top',
color: 'rgb(255,255,255)',
gridLines: {
display: false,
drawBorder: false,
},
ticks: {
fontColor: '#eee',
fontFamily: "Poppins",
padding: 20
}
}]
}
}
});
</script>
I am unable to find the solution to remove the line in graph area for Stacked horizontal bar chart! , below mocke up show the details where i need the x and y axis line need to be shown but currently the when i set the gridLabel:{display:none} every vertical lines are removed
scales: {
xAxes: [
{
ticks: {
beginAtZero: true,
fontFamily: "'Open Sans Bold', sans-serif",
fontSize: 11
},
scaleLabel: {
display: false
},
gridLines: {
display: false,
},
ticks: {
fontFamily: "'Open Sans Bold', sans-serif",
fontSize: 11
},
stacked: true
}
],
yAxes: [
{
gridLines: {
display: false,
color: "#fff",
zeroLineColor: "#fff",
zeroLineWidth: 0
},
ticks: {
fontFamily: "'Open Sans Bold', sans-serif",
fontSize: 11
},
stacked: true
}
]
},
codepen link: code link
Set the following properties for x-axis grid-lines :
drawOnChartArea: false,
color: "black",
zeroLineColor: "black"
also, change the color for y-axis grid-lines :
color: "black"
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩
var barOptions_stacked = {
tooltips: {
enabled: false
},
hover: {
animationDuration: 0
},
scales: {
xAxes: [
{
ticks: {
beginAtZero: true,
fontFamily: "'Open Sans Bold', sans-serif",
fontSize: 11
},
scaleLabel: {
display: false
},
gridLines: {
drawOnChartArea: false,
color: "black",
zeroLineColor: "black"
},
stacked: true
}
],
yAxes: [
{
gridLines: {
display: false,
color: "black",
zeroLineColor: "#fff",
zeroLineWidth: 0
},
ticks: {
fontFamily: "'Open Sans Bold', sans-serif",
fontSize: 11
},
stacked: true
}
]
},
legend: {
display: false
},
animation: {
onComplete: function() {
var chartInstance = this.chart;
var ctx = chartInstance.ctx;
ctx.textAlign = "left";
ctx.font = "9px Open Sans";
ctx.fillStyle = "#fff";
Chart.helpers.each(
this.data.datasets.forEach(function(dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
Chart.helpers.each(
meta.data.forEach(function(bar, index) {
data = dataset.data[index];
if (i == 0) {
ctx.fillText(data, 50, bar._model.y + 4);
} else {
ctx.fillText(data, bar._model.x - 25, bar._model.y + 4);
}
}),
this
);
}),
this
);
}
},
pointLabelFontFamily: "Quadon Extra Bold",
scaleFontFamily: "Quadon Extra Bold"
};
var ctx = document.getElementById("Chart1");
var myChart = new Chart(ctx, {
type: "horizontalBar",
data: {
labels: ["82", " 81 ", "2", " 42", "4"],
datasets: [
{
data: [727, 589, 537, 543, 20],
backgroundColor: "#5f8a58",
hoverBackgroundColor: "rgba(50,90,100,1)"
},
{
data: [238, 553, 746, 884, 122],
backgroundColor: "#3f7faa",
hoverBackgroundColor: "rgba(140,85,100,1)"
},
{
data: [100, 100, 100, 100, 100],
backgroundColor: "#000",
hoverBackgroundColor: "rgba(140,85,100,1)"
}
]
},
options: barOptions_stacked
});
.graph_container {
display: block;
width: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.js"></script>
<div class="graph_container">
<canvas id="Chart1"></canvas>
</div>