I am trying to put rectangle to make a upper-lower range/level in chart.js, like in image
Although I am able to make it by drawing two line in this example
var ctx = document.querySelector("#myChart").getContext('2d');
Chart.pluginService.register({
afterDraw: function(chart) {
if (typeof chart.config.options.lineAt != 'undefined') {
var lineAt = chart.config.options.lineAt;
var ctxPlugin = chart.chart.ctx;
var xAxe = chart.scales[chart.config.options.scales.xAxes[0].id];
ctxPlugin.strokeStyle = "green";
ctxPlugin.beginPath();
lineAt = 102;
ctxPlugin.moveTo(xAxe.left, lineAt);
ctxPlugin.lineTo(xAxe.right, lineAt);
ctxPlugin.moveTo(xAxe.left, lineAt-33);
ctxPlugin.lineTo(xAxe.right, lineAt-33);
ctxPlugin.stroke();
}
}
});
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Nov","Dec"],
datasets: [{
label: 'Findings',
data: [0,45],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
},
options: {
lineAt: 15,
scales: {
yAxes: [{
display: true,
ticks: {
beginAtZero: true,
steps: 20,
stepValue: 20,
max: 60,
min: 0
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>
Please share your suggestion here : http://jsfiddle.net/nikleshraut/ad2fsefe/
There is already a Chart.js plugin exists called chartjs-plugin-annotation, by which you can achieve that much easily.
Using that plugin, you'll need to create a box annotation (rectangle), as such :
options: { //your chart options
annotation: {
annotations: [{
type: 'box',
drawTime: 'beforeDatasetsDraw',
yScaleID: 'y-axis-0',
yMin: 40,
yMax: 50,
backgroundColor: 'rgba(0, 255, 0, 0.1)'
}]
}
}
note: this is the minimum options required to draw that rectangle,
and you can find more options here.
Here is a working fiddle.
Related
I'm having an issue in setting bars width using chart.js.
This is my code:
<script>
var endpoint = '/api/';
$.ajax({
method: "GET",
url: endpoint,
success: function (data) {
drawBarGraph(data, 'myChartBar');
console.log("drawing");
},
error: function (error_data) {
console.log(error_data);
}
})
function drawBarGraph(data, id) {
var labels = data.labels;
var chartLabel = data.chartLabel;
var chartdata = data.chartdata;
var ctx = document.getElementById(id).getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [{
barThickness: 0.9,
label: chartLabel,
data: chartdata,
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 0.2)',
borderWidth: 1
}]
},
options: {
scales: {
xAxes: [{
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
}
</script>
I cannot increase the bar thickness.
I'm using Argon Dashboard with Django.
Is this an issue with theme's css?
What am I missing here?
Change this value
xAxes: [{
// Change this
barPercentage: 0.2
}]
Is it possible to separate styles in ticks for xAxes or draw by some other function
near.Callback - just operate with values.
For example:
You can make use of the Plugin Core API. It offers different hooks that may be used for executing custom code. In below code snippet, I use the afterDraw hook to draw text of different styles underneath each bars.
Note that no computation of text size is needed when composing your own labels labels. You can simply add a space to the first text section and use ctx.textAlign 'right', then use ctx.textAlign 'left' for drawing the second text section.
When drawing your own tick labels, you need to instruct Chart.js not to display the default labels. This can be done through the following definition inside the chart options.
scales: {
xAxes: [{
ticks: {
display: false
}
}],
You also need to define some padding for the bottom of the chart, otherwise you won't see your custom tick labels.
layout: {
padding: {
bottom: 20
}
},
new Chart(document.getElementById('myChart'), {
type: 'bar',
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.labels.forEach((l, i) => {
var value = chart.data.datasets[0].data[i];
var x = xAxis.getPixelForValue(l);
ctx.textAlign = 'right';
ctx.font = '12px Arial';
ctx.fillText(l + ' ', x, yAxis.bottom + 18);
ctx.textAlign = 'left';
ctx.font = 'bold 14px Arial';
ctx.fillStyle = 'blue';
ctx.fillText(value, x, yAxis.bottom + 17);
});
ctx.restore();
}
}],
data: {
labels: ['Error', 'Warn', 'Info'],
datasets: [{
label: 'My First Dataset',
data: [30, 59, 80],
fill: false,
backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)', 'rgba(255, 205, 86, 0.2)'],
borderColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)'],
borderWidth: 1
}]
},
options: {
layout: {
padding: {
bottom: 20
}
},
scales: {
xAxes: [{
ticks: {
display: false
}
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
canvas {
max-width: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart" width="10" height="5"></canvas>
I am using chart.js to create a linegraph from data in a locally hosted mysql DB.
I am able to pull this data and display it as intended, however despite following documentation and advice given else where I am unable to hide the xAxis Labels. The code I am using is below - any help would be much appriacated.
var chardata = {
labels: time,
datasets: [
{
label: "System health",
fill: false,
backgroundColor: "rgba(123, 192, 67, 0.75)",
borderColor: "rgba(123, 192, 67, 1)",
pointHoverBackgroundColor: "rgba(123, 192, 67, 1)",
pointHoverBorderColor: "rgba(123, 192, 67, 1)",
data: health_score
}
]
};
var ctx = $("#mycanvas");
var options = {
type: 'line',
data: chardata,
options: {
scales: {
xAxes: [{
ticks: {
display: false
}
}]
}
}
};
var LineGraph = new Chart(ctx, options);
Cheers
..
var options = {
type: 'line',
data: chardata,
options: {
scales: {
xAxes: [{
display: false,
ticks: {
display: false
}
}]
}
}
};
..
First, my JSFidle: https://jsfiddle.net/ethernetz/u8yc4tvb/
At the top of the chart, there is a pink box. I want that box to go away. Others have done this by adding
legend: {
labels: {
boxWidth: 0,
}
},
to their code to make the box go away. As you can see, this didn't affect my box at all. What am I doing wrong?
you should move the legend configuration inside the option object Fiddle
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['Completion'],
datasets: [{
data: [60, 20],
backgroundColor: [
'rgba(255, 99, 132, 0.8)',
'rgba(54, 162, 235, 0)',
],
borderWidth: 0
}]
},
options: {
responsive: false,
cutoutPercentage: 90,
events: [],
legend: {
labels: {
boxWidth: 0
}
}
}
});
I'm with a error on my HorizontalBar Chart. Basically when i mouse hover on some bar, it should show me the Label name and Value of this bar. But in my chart it shows Label and Label, without value.
Here is a pic: https://i.stack.imgur.com/NGNPM.jpg
it should show me : "Top 10 Clientes and 2400 below"
This is totally static code, here is:
var gerarGraficoDeBarrasHorizontal = function (name, labels, components){
var myChart = new Chart(name, {
type: 'horizontalBar',
data: {
labels: labels,
datasets: components
},
options: optionsSemLegenda
});
}
// OBJECT TO CLARIFY THE CHART CREATION
var barrasHorizontal = [{
data: [2500, 5000],
backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)'],
borderColor: ['rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)'],
borderWidth: 1
}];
// CREATE CHART
gerarGraficoDeBarrasHorizontal('topDezClientesxFaturamentoTotal', ["Top 10
Clientes", "Faturamento Total"], barrasHorizontal);
Thanks a lot!!
#Edit #1
var optionsSemLegenda = new Object();
optionsSemLegenda = {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
ticks: {
beginAtZero: true
}
}]
},
legend: {
display: false
},
tooltips: {
callbacks: {
label: function (tooltipItem) {
return tooltipItem.yLabel;
}
}
}
}