Why does the line chart on this graph stretch beyond the assigned lengths. In this demo I have a line chart where the height automatically grows to 2355 although I am setting the canvas height to 250. How can I control the height of the line chart? Thank you.
JS:
var ctx2 = document.getElementById('lineChart').getContext('2d');
var lineChart = new Chart(ctx2, {
type: "line",
data: {
labels: [500, 600, 700, 750, 800, 850, 900, 950, 999, 050],
datasets: [
{
data: [86, 114, 106, 106, 107, 111, 133, 221, 783, 2478],
label: "Infrastructure",
borderColor: "#3e95cd",
fill: false
},
{
data: [282, 350, 411, 502, 635, 809, 947, 1402, 3700, 5267],
label: "CSI",
borderColor: "#8e5ea2",
fill: false
},
{
data: [168, 170, 178, 190, 203, 276, 408, 547, 675, 734],
label: "DevOps",
borderColor: "#3cba9f",
fill: false
},
{
data: [40, 20, 10, 16, 24, 38, 74, 167, 508, 784],
label: "Enterprise SIEM",
borderColor: "#e8c3b9",
fill: false
},
{
data: [6, 3, 2, 2, 7, 26, 82, 172, 312, 433],
label: "Bug Fix/Feature Request",
borderColor: "#c45850",
fill: false
}
]
},
options: {
title: {
display: true,
text: "Ticket Trends"
}
}
});
add !important attribute
#barChart{
height: 250px !important;
width: 250px !important;
}
https://www.w3schools.com/css/css_important.asp
Related
I have the below ChartJS code and I would like to hide the grid vertical lines only and not the horizontal ones and keep only one vertical line per two like in the capture below:
image]1
Thanks.
<canvas id="line-chart" width="800" height="450"></canvas>
new Chart(document.getElementById("line-chart"), {
type: 'line',
data: {
labels: [1500,1600,1700,1750,1800,1850,1900,1950,1999,2050],
datasets: [{
data: [86,114,106,106,107,111,133,221,783,2478],
label: "Africa",
borderColor: "#3e95cd",
fill: false
}, {
data: [282,350,411,502,635,809,947,1402,3700,5267],
label: "Asia",
borderColor: "#8e5ea2",
fill: false
}, {
data: [168,170,178,190,203,276,408,547,675,734],
label: "Europe",
borderColor: "#3cba9f",
fill: false
}, {
data: [40,20,10,16,24,38,74,167,508,784],
label: "Latin America",
borderColor: "#e8c3b9",
fill: false
}, {
data: [6,3,2,2,7,26,82,172,312,433],
label: "North America",
borderColor: "#c45850",
fill: false
}
]
},
options: {
title: {
display: true,
text: 'World population per region (in millions)'
}
}
});
Just add grid color as function in options for x axis scale and conditionally change the colors like its done below:
var chartInstance = new Chart(document.getElementById("chartJSContainer"), {
type: 'line',
data: {
labels: [1500, 1600, 1700, 1750, 1800, 1850, 1900, 1950, 1999, 2050],
datasets: [{
data: [86, 114, 106, 106, 107, 111, 133, 221, 783, 2478],
label: "Africa",
borderColor: "#3e95cd",
fill: false
}, {
data: [282, 350, 411, 502, 635, 809, 947, 1402, 3700, 5267],
label: "Asia",
borderColor: "#8e5ea2",
fill: false
}, {
data: [168, 170, 178, 190, 203, 276, 408, 547, 675, 734],
label: "Europe",
borderColor: "#3cba9f",
fill: false
}, {
data: [40, 20, 10, 16, 24, 38, 74, 167, 508, 784],
label: "Latin America",
borderColor: "#e8c3b9",
fill: false
}, {
data: [6, 3, 2, 2, 7, 26, 82, 172, 312, 433],
label: "North America",
borderColor: "#c45850",
fill: false
}]
},
options: {
title: {
display: true,
text: 'World population per region (in millions)'
},
scales: {
x: {
grid: {
display: true, //Make it false to remove all the vertical lines.
color: function(context) {
if (context.tick.value %2 == 0) {
return 'gray';
} else {
return 'white';
}
},
}
}
}
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.3.1/dist/chart.js"></script>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
I don’t really use chart.js so there may be a better way to do this. I think there may be a built in way to use a callback for this but I couldn’t figure it out. Here’s what does work.
Add this function at the top to create an array of alternating colors.
let colors = [];
function gridColors() {
for (let i=0; i<10; i++) {
colors.push("rgba(0,0,0,0)")
colors.push("rgba(0,0,0,0.1)")
}
}
gridColors()
And in your options add the following
options: {
title: {
display: true,
text: 'World population per region (in millions)'
},
scales: {
x: {
grid: {
beginAtZero: true,
color: colors,
}
}
}
}
});
By default Chart.js will display the tool tip at the top of the bar for the bar type of charts.
I am trying to change the default position of the tooltip from the top to the center of the bar.
Which is some thing similar to as shown in the below image.
Appreciate help on this, Thank you.
You need to define a new tooltip position mode as follows:
Chart.Tooltip.positioners.middle = elements => {
let model = elements[0]._model;
return {
x: model.x,
y: (model.base + model.y) / 2
};
};
Further you have to define tooltips within the chart options as follows:
tooltips: {
position: 'middle', // must match the positioner function name defined above
yAlign: null, // to get rid of the pointer
xAlign: 'center'
}
Please take a look at below runnable code snippet and see how it works:
Chart.Tooltip.positioners.middle = elements => {
let model = elements[0]._model;
return {
x: model.x,
y: (model.base + model.y) / 2
};
};
new Chart(document.getElementById("chart"), {
type: "bar",
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My Dataset",
data: [65, 59, 80, 81, 56, 55, 40],
backgroundColor: ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(201, 203, 207, 0.2)"],
borderColor: ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)", "rgb(153, 102, 255)", "rgb(201, 203, 207)"],
borderWidth: 1
}]
},
options: {
tooltips: {
position: 'middle',
yAlign: null,
xAlign: 'center'
},
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="chart" height="90"></canvas>
Display the resulting chart in full page mode if the tooltips don't show up in embedded mode.
please help, thank you.
i am now writing datapart of chartjs
var configcount = {type: "line",data: {
labels: ["Apr20", "May20", "Jun20", "Jul20", "Aug20", "Sep20", "Oct20"],
datasets: [{label: "Balance1",
data: [10, 20, 30, 40, 50, 60, 70],
fill: false,pointBorderWidth: ...
,},},],},},};
want to change multiple line that Balance1: 10, 20, 30, 40, 50, 60, 70 & Balance2: 15, 30, 15, 30, 15, 30, 15
You need to define two distinct datasets as follows.
data: {
labels: ["Apr20", "May20", "Jun20", "Jul20", "Aug20", "Sep20", "Oct20"],
datasets: [{
label: "Balance1",
data: [10, 20, 30, 40, 50, 60, 70],
...
}, {
label: "Balance2",
data: [15, 30, 15, 30, 15, 30, 15],
fill: false,
...
}]
}
Please take a loo at below code and see how it works.
new Chart(document.getElementById("chart"), {
type: 'line',
data: {
labels: ["Apr20", "May20", "Jun20", "Jul20", "Aug20", "Sep20", "Oct20"],
datasets: [{
label: "Balance1",
data: [10, 20, 30, 40, 50, 60, 70],
fill: false,
backgroundColor: "rgba(255, 99, 132, 0.2)",
borderColor: "rgb(255, 99, 132)",
pointBorderWidth: 10
}, {
label: "Balance2",
data: [15, 30, 15, 30, 15, 30, 15],
fill: false,
backgroundColor: "rgba(54, 162, 235, 0.2)",
borderColor: "rgb(54, 162, 235)",
pointBorderWidth: 4,
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="chart" height="80"></canvas>
I am building a line chart with different background colors between data points. When I break my dataset into the following the lineTension is lost and shows straight lines. How can I make the curves?
var data = {
labels: ["Jan", "Feb", "Mar", "Apr"],
datasets: [{
data: [73, 59, null, null],
backgroundColor: "rgba(233, 104, 92, 0.3)",
borderColor: "rgba(233, 104, 92, 0.3)",
pointRadius: 0,
lineTension: 0.4,
}, {
data: [null, 59, 70, null],
backgroundColor: "rgba(92, 193, 77, 0.3)",
borderColor: "rgba(92, 193, 77, 0.3)",
pointRadius: 0,
lineTension: 0.4
}, {
data: [null, null, 70, 55],
backgroundColor: "rgba(233, 104, 92, 0.3)",
borderColor: "rgba(233, 104, 92, 0.3)",
pointRadius: 0,
lineTension: 0.4
}
]
};
var ctx = document.getElementById("myChart").getContext("2d");
var options = {
showTooltips: false,
}
var chart = new Chart(ctx).Line(data, options);
Linetension is actually working, but you're only show 2 datapoints for each dataset. You need 3 to show a curve.
Also, it seems like you're using an old version of ChartJs, the latest version uses the following syntax:
var chart = new Chart(ctx, { type: "line", data: data,options: options });
I'm trying to figure out, how I can reload my ChartJS components whenever the screensize is changed as it's messing up the responsiveness at the moment. My goal is to either reload them after resize, or remove them while resizing and loading again after resize.
This is my code so far for the graph component, for some reason it's ignoring the timer, but maybe the ready() isn't just called when the component is loaded?
export default {
props: {
type: {
type: String,
required: true
}
},
data() {
return {
data: {
labels: ['2014', '2015', '2016', '2016'],
datasets: [
{
label: "Administration",
backgroundColor: "rgba(255, 219, 77, 0.5)",
borderColor: "rgba(255, 219, 77, 1)",
borderWidth: 0,
hoverBackgroundColor: "rgba(255, 219, 77, 0.8)",
hoverBorderColor: "rgba(255, 219, 77, 1)",
data: [65, 59, 80, 81],
},
{
label: "Teaching",
backgroundColor: "rgba(255, 166, 77, 0.5)",
borderColor: "rgba(255, 166, 77, 1)",
borderWidth: 0,
hoverBackgroundColor: "rgba(255, 166, 77, 0.8)",
hoverBorderColor: "rgba(255, 166, 77, 1)",
data: [65, 59, 80, 81],
},
{
label: "Exam & Supervision",
backgroundColor: "rgba(102, 153, 204, 0.5)",
borderColor: "rgba(102, 153, 204, 1)",
borderWidth: 0,
hoverBackgroundColor: "rgba(102, 153, 204, 0.8)",
hoverBorderColor: "rgba(102, 153, 204, 1)",
data: [65, 59, 80, 81],
}
]
},
timoutHandle: null
}
},
ready() {
window.addEventListener('resize', this.reload);
this.loadChart();
},
methods: {
loadChart() {
console.log('loading..');
new Chart(
this.$el.getContext('2d'),
{
type: this.type,
data: this.data,
options: {
legend: {
position: 'bottom'
}
}
}
);
},
reload() {
window.clearTimeout(this.timeoutHandle);
this.timeoutHandle = window.setTimeout(
this.loadChart(),
3);
}
}
}
Have you consider using vue-charts? It's google-chart wrapper for vue and it exports draw method and resizing on window size change is quite easy:
<template>
<vue-chart
:chart-type="chartType"
:columns="columns"
:chart-events="chartEvents"
:rows="rowData"
:options="options"
v-ref:thisherechart
></vue-chart>
</template>
ready: function() {
var self = this;
jQuery(window).resize(function () {
self.$refs.thisherechart.drawChart();
})
},
Same jQuery may help You with your problem.
I fixed this part of the problem, look here for reference: https://github.com/chartjs/Chart.js/issues/2777#issuecomment-226219784