I have generated a linear graph using chart js, but I must show it in a different position than the one shown by default.
I have seen examples of how to rotate the labels generated by the graphic, but this only works for the texts and not for the whole graphic
Currently this is my code to generate the graph
var dataSets = [
dt1 = {
borderColor: "#434EDA",
data: [17.28, 22.58, 27.91, 31.95, 36.32, 41.73, 45.78, 48.55, 53.48, 47.82,],
fill: false,
label: "Dataset1",
pointHitRadius: 5,
pointRadius: 5
},
dt2 = {
borderColor: "#3DE383",
data: [11.83, 20.23, 26.9, 32.39, 36.95, 41.48, 46.41, 48.82, 52.58, 49.42,],
fill: false,
label: "Dataset2",
pointHitRadius: 5,
pointRadius: 5
},
dt3 = {
borderColor: "#ec0000",
data: [14.2, 20.94, 27.36, 32.12, 36.33, 41.4, 46.58, 48.8, 52.69, 48.9,],
fill: false,
label: "Dataset3",
pointHitRadius: 5,
pointRadius: 5
}
]
var grafValues = {
labels: ["0 mts", "1 mts", "2 mts", "3 mts", "4 mts", "5 mts", "6 mts", "7 mts", "8 mts",],
datasets: dataSets,
}
var grafOptions = {
// responsive: true,
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: "Depth"
},
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: "Temperature ° C"
},
}]
},
title: {
display: true,
text: "Graphic 1"
},
legend: {
display: true,
position: 'top',
labels: {
boxWidth: 40,
fontColor: 'black'
}
},
tooltips: {
enabled: true
}
}
var ctx = document.getElementById('chart-zone').getContext('2d');
var lineChart = new Chart(ctx, {
type: 'line',
data: grafValues,
options: grafOptions
})
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<canvas id="chart-zone" ></canvas>
</body>
I hope to get a graph rotated as shown in the following image
EDIT
Investigating a little more in the documentation of chart.js I found that there is an option that allows to set the position of the axis to the "right", "left", "top" or "bottom.
Apply these options in this part of the code
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: "Depth",
},
position: 'left' //X-axis position change
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: "Temperature ° C",
},
position: 'top' //Y-axis position change
}]
But the problem now is that the values has disaooear because the values in the X-axis do not exist. Realize the changes in the code and you will see what I mean.
Thanks for your help and suggestions in advance.
To rotate the entire chart element, as in your image, you can use the CSS rotate transform function:
#chart-zone {
transform: rotate(90deg);
}
Note that the chart might get clipped so you would need to set the bounding size (height/width) of your container appropriately.
Related
Just a warning: I am new to chart.js!
I have a couple of horizontal bar charts and it works fine except one issue that I cannot shake off. I have 5 labels in y-axis but the legend on top of the graph only shows one small rectangle in the color of the first (topmost) bar and even that does not display the label itself, followed by list of labels. I thought it would display each label next to small bar same color as in chart.
Unfortunately, this is an intranet app and I cannot provide a link but here is what I have (data is passed to this function from an ajax call):
function drawRespChart(chartLabels, chartData) {
var ctx = $("#rtChart");
console.log("Labels Array: " + chartLabels);
console.log("Data Array: " + chartData);
if (chartRespTime)
chartRespTime.destroy();
var chart = {
labels: chartLabels,
datasets: [
{
label: chartLabels,
backgroundColor: ["#c45850", "#e8c3b9", "#3cba9f", "#8e5ea2", "#3e95cd"],
data: chartData
}
]
};
chartRespTime = new Chart(ctx, {
type: 'horizontalBar',
data: chart,
datalabels: {
anchor: 'end',
align: 'start',
},
options: {
title: {
display: true,
text: 'IDC Database Response Time (mili-seconds)'
},
legend: {
display: true,
labels: {
fontColor: 'rgb(255, 99, 132)'
}
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Count'
},
ticks: {
major: {
fontStyle: 'bold',
fontColor: '#FF0000'
}
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Response Time (ms)'
}
}]
},
plugins: {
datalabels: {
color: 'white',
display: function (context) {
return context.dataset.data[context.dataIndex] > 15;
},
font: {
weight: 'bold'
},
formatter: Math.round
}
},
maintainAspectRatio: true,
responsive: true,
showInlineValues: true,
centeredInllineValues: true,
tooltipCaretSize: 0
}
});
}
This is what I see in console window:
Labels Array: 0-350,350-700,700-1000,1000-1500
Data Array: 5065,32,27,3
What I see as legend is one rectangle, same color as first bar, followed by list of labels.
It seems that charts.js labels only works when you split the datasets.
Leaving an example.
https://jsfiddle.net/code4mk/1j62ey38/
datasets: [ {
label: 'Result',
fill:false,
data: aDatasets1,
backgroundColor: '#E91E63',
},
{
label: 'Result2',
fill:false,
data: aDatasets2,
backgroundColor: '#E91E93',
}];
I would like to know how to separate the first and last points of the data so that they are not stuck to the limit lines of the graph. I have tried padding the x axis but nothing. My options code for chart.js is this
let dataobj = {
labels: graphDataObj['label'],
datasets: [{
label: graphDataObj['title'],
data: graphDataObj['data'],
pointBackgroundColor: graphDataObj['pointBgColor'],
borderColor: graphDataObj['pointBgColor'],
fill: false,
showLine: false,
pointRadius: 7
}]
}
let optionsobj = {
responsive: true,
scales: {
yAxes: [{
ticks: {
suggestedMin: graphDataObj['suggestedMin'],
suggestedMax: graphDataObj['suggestedMax'],
stepSize: null
}, scaleLabel: {
display: true,
labelString: graphDataObj['yLabel']
},
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: graphDataObj['xLabel'],
}
}]
}
}
Image for the graphic here
example graphic
Thanks!
I have a stacked chart with 3 datasets: Red, Green, Blue.
Here is the link to JSFiddle: https://jsfiddle.net/bwcfL58v/
Let's imagine that these are the layers, which overlay each others:
Red as bottom layer, then Green as middle layer and Blue as top layer.
Take a look at the third day: we don't see the red value, cause it behind the green value (red smaller than green here). So, the question is how to move Green to the bottom layer and Red higher. I need the biggest value to be always at the bottom and the smallest value - at the top, this will allow us to see all the datasets for each day.
All I need is to datasets always be visible and do not hide each others.
let ctx = document.getElementById("myChart");
let myChart = new Chart(ctx, {
type: "bar",
data: {
labels: ["Day 1", "Day 2", "Day 3"],
datasets: [
{
label: 'Blueberry',
data: [25, 30, 40],
backgroundColor: 'blue',
},
{
label: 'Greenberry',
data: [50, 60, 100],
backgroundColor: 'green',
},
{
label: 'Strawberry',
data: [100, 120, 50],
backgroundColor: 'red',
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
xAxes: [{
stacked: true,
gridLines: {
drawOnChartArea: false
},
}],
yAxes: [{
stacked: false,
display: false,
gridLines: {
drawOnChartArea: false
},
ticks: {
beginAtZero: true,
},
}]
},
legend: {
display: false
}
}
});
I am trying to change the background colour in the code below into gradient but not sure on how to approach this:
bandwidthChart = new Chart($("#bandwidthChart"), {
type: "bar",
data: {
labels: response.extra.labels,
datasets: [{
label: "{% trans "Bandwidth" %}",
backgroundColor: "rgb(11, 98, 164)",
data: response.extra.data
}]
},
options: {
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: response.extra.postUnits,
}
}]
},
legend: {
display: false
},
maintainAspectRatio: false,
}
});
This is what I have:
backgroundColor: "rgb(11, 98, 164)"
I would like to change this colour into a linear gradient from top to bottom. Any help appreciated. Many thanks.
you can try it as:
background: linear-gradient(to bottom, red , yellow);
This would tell the system to change from red to yellow as it moves to the bottom.
There is a snippet using Chart.js 2.7.1:
var bar_ctx = document.getElementById('bandwidthChart').getContext('2d');
var purple_orange_gradient = bar_ctx.createLinearGradient(0, 0, 0, 600);
purple_orange_gradient.addColorStop(0, 'orange');
purple_orange_gradient.addColorStop(1, 'purple');
bandwidthChart = new Chart(, {
type: "bar",
data: {
labels: response.extra.labels,
datasets: [{
label: "{% trans "Bandwidth" %}",
backgroundColor: purple_orange_gradient,
data: response.extra.data
}]
},
options: {
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: response.extra.postUnits,
}
}]
},
legend: {
display: false
},
maintainAspectRatio: false,
}
Demo : https://codepen.io/jonathandion/pen/aEpVba
[UPDATE] The question seems to be solved (see comments). I will update the answer as soon as i am sure about it
I am trying to achieve a weather chart using chartjs library.
The chart will always have the weather date of the first day of the month and in addition to that one value in between (makes 24 values).
I want all "first day of the month" labels to be shown (with the corresponding gridline), the other data point in between should not be shown (or at least with no gridline).
The Problem now, somehow the last (12th) label is not gonna be shown and I have no idea why. The result looks like that:
My javascript code is that
var ctx = document.getElementById('canvas').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [
"01","","02","","03","","04", "","05","","06","","07","","08","","09","","10","","11", "","12",""
],
datasets: [{
label: 'Temperature [°C]',
data: [
1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6
],
borderColor: "rgb(0, 182, 206)",
pointRadius: 1,
backgroundColor: "rgba(0, 182, 206,0.4)"
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend:{
display:false // Suppress interactive legend
},
scales: {
xAxes: [{
scaleLabel: {
display: false,
labelString: 'Month'
} ,
afterTickToLabelConversion: function(data){
var xLabels = data.ticks;
xLabels.forEach(function (labels, i) {
if (xLabels[i].length == 0){
xLabels[i] = '';
}
});
},
ticks: {
//maxRotation: 0,
//minRotation: 0,
autoSkip: true,
maxTicksLimit: 12
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Temperature [°C]'
},
ticks: {
beginAtZero: true
}
}]
}
}
});
Do you have some ideas?