I have tried to add different colors to the Y-axis but without success.
Is it possible to achive something like attached image shows?
In the chartjs-plugin-annotation plugin you can set the background but not scale colors.
Describing image
var config = {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'Dataset',
data: [1,2,3,4,5,6,7],
fill: false,
}]
},
options: {
responsive: true,
scales: {
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Colored scale'
},
gridLines: { color: ['rgba(255, 0, 0, 1)', 'rgba(0, 255, 0, 1)', 'rgba(0, 0, 255, 1)'] }
}]
}
}
};
window.onload = function () {
var ctx = document.getElementById('canvas').getContext('2d');
window.myLine = new Chart(ctx, config);
};
<!DOCTYPE html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.min.js"></script>
</head>
<body>
<div style="width:75%;"><canvas id="canvas"></canvas></div>
</body>
In case you want the colored rectangles spread over the entire chart, you can draw individual boxes of different background color using chartjs-plugin-annotation.js.
new Chart(document.getElementById('canvas'), {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'Dataset',
data: [1, 2, 3, 4, 5, 6, 7],
fill: false,
backgroundColor: 'rgb(0, 0, 0)',
borderColor: 'rgb(0, 0, 0)'
}]
},
options: {
responsive: true,
scales: {
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Colored scale'
}
}]
},
annotation: {
annotations: [{
drawTime: "beforeDatasetsDraw",
type: "box",
xScaleID: "x-axis-0",
yScaleID: "y-axis-0",
yMin: 4.5,
yMax: 8,
backgroundColor: "rgba(255, 0, 0, 1)",
borderWidth: 0
},
{
drawTime: "beforeDatasetsDraw",
type: "box",
xScaleID: "x-axis-0",
yScaleID: "y-axis-0",
yMin: 3.5,
yMax: 4.5,
backgroundColor: "rgba(255, 165, 0, 1)",
borderWidth: 0
},
{
drawTime: "beforeDatasetsDraw",
type: "box",
xScaleID: "x-axis-0",
yScaleID: "y-axis-0",
xMin: 0,
xMax: 100,
yMin: 0,
yMax: 3.5,
backgroundColor: "rgba(50, 250, 50, 1)",
borderWidth: 0
}
]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.js"></script>
<canvas id="canvas" height="90">
You can draw individual boxes 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 below code snippet, I use the beforeDraw hook to draw the rectangles of different background color each.
new Chart(document.getElementById('canvas'), {
type: 'line',
plugins: [{
beforeDraw: chart => {
var ctx = chart.chart.ctx;
var xAxis = chart.scales['x-axis-0'];
var yAxis = chart.scales['y-axis-0'];
ctx.save();
ctx.fillStyle = 'green';
ctx.beginPath();
var yGreen = yAxis.getPixelForValue(3.5);
ctx.fillRect(xAxis.left - 6, yGreen, 6, yAxis.bottom - yGreen);
ctx.stroke();
ctx.fillStyle = 'orange';
ctx.beginPath();
var yOrange = yAxis.getPixelForValue(4.5);
ctx.fillRect(xAxis.left - 6, yOrange, 6, yGreen - yOrange);
ctx.stroke();
ctx.fillStyle = 'red';
ctx.beginPath();
var yRed = yAxis.getPixelForValue(7);
ctx.fillRect(xAxis.left - 6, yRed, 6, yOrange- yRed);
ctx.stroke();
ctx.restore();
}
}],
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'Dataset',
data: [1, 2, 3, 4, 5, 6, 7],
fill: false
}]
},
options: {
responsive: true,
scales: {
yAxes: [{
gridLines: {
tickMarkLength: 15
},
ticks: {
padding: 6
},
scaleLabel: {
display: true,
labelString: 'Colored scale'
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="canvas" height="90">
Related
i'm trying to add multiple real-time plots on the same page (Django framework) with Chart.js using websockets. When i try to add separate socket on the 2nd plot, the 1st freezes. Here is my code, thanks a lot. I'm sure there is a better way to write code, but I'm relatively new to js.
<script>
let socket =new WebSocket('ws://localhost:8000/ws/polData/');
socket.onopen =function(e){
alert('Connection established');
};
socket.onmessage = function(e){
console.log(e.data);
var recData=JSON.parse(e.data);
dataObjNew=dataObj['data']['datasets'][0]['data'];
dataObjNew.shift();
dataObjNew.push(recData.value);
dataObj['data']['datasets'][0]['data']=dataObjNew;
window.myLine.update();
};
socket.onclose = function(e){
alert('Connection CLosed');
};
</script>
<script>
var dataObj={
type: 'line',
data: {
labels: [1,2,3,4,5,6],
datasets: [{
label: 'Real time data',
borderColor: "#1d7af3",
pointBorderColor: "#FFF",
pointBackgroundColor: "#1d7af3",
pointBorderWidth: 2,
pointHoverRadius: 4,
pointHoverBorderWidth: 1,
pointRadius: 4,
backgroundColor: 'transparent',
fill: true,
borderWidth: 2,
data: [12, 19, 3, 5, 2, 3],
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
position: 'bottom',
labels : {
padding: 10,
fontColor: '#1d7af3',
}
},
tooltips: {
bodySpacing: 4,
mode:"nearest",
intersect: 0,
position:"nearest",
xPadding:10,
yPadding:10,
caretPadding:10
},
layout:{
padding:{left:15,right:15,top:15,bottom:15}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
}
var ctx = document.getElementById('lineChart').getContext('2d');
window.myLine = new Chart(ctx,dataObj );
</script>
<script>
let socket =new WebSocket('ws://localhost:8000/ws/polData2/');
socket.onopen =function(e){
alert('Connection established');
};
socket.onmessage = function(e){
console.log(e.data);
var recData=JSON.parse(e.data);
dataObjNew2=dataObj2['data']['datasets'][0]['data'];
dataObjNew2.shift();
dataObjNew2.push(recData.value);
dataObj2['data']['datasets'][0]['data']=dataObjNew2;
window.myLine.update();
};
socket.onclose = function(e){
alert('Connection CLosed');
};
</script>
<script>
var dataObj2={
type: 'bar',
data: {
labels: [1,2,3,4,5,6],
datasets: [{
label: "Sales",
backgroundColor: 'rgb(23, 125, 255)',
borderColor: 'rgb(23, 125, 255)',
data: [12, 19, 3, 5, 2, 3],
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
},
}
}
var ctx2 = document.getElementById('barChart').getContext('2d');
window.myLine = new Chart(ctx2,dataObj2 );
</script>
polData is just random values from a script
I am trying to create a stacked horizontal bar chart with an average line on each bar using the ChartJS library. I tried several times and searched on the Internet but I did not find out any satisfying answers. I appreciate your helping. Thanks.
Example:
.
In this example, the red line on each bar implies the average value of its group.
To create the stacked horizontal bar chart, please see
https://jsfiddle.net/lamtn862004/9wm1krqf/10/.
var data = {
labels: ["January", "February", "March"],
datasets: [
{
label: "Dogs",
backgroundColor: "rgba(237, 192, 169)",
data: [20, 10, 25],
stack: 1,
xAxisID: 'x-axis-0',
yAxisID: 'y-axis-0'
},
{
label: "Cats",
backgroundColor: "rgba(253, 234, 175)",
data: [70, 85, 65],
stack: 1,
xAxisID: 'x-axis-0',
yAxisID: 'y-axis-0'
},
{
label: "Birds",
backgroundColor: "rgba(179, 211, 200)",
data: [10, 5, 10],
stack: 1,
xAxisID: 'x-axis-0',
yAxisID: 'y-axis-0'
},
]
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, {
type: 'groupableHBar',
data: data,
options: {
scales: {
yAxes: [{
stacked: true,
type: 'category',
id: 'y-axis-0'
}],
xAxes: [{
stacked: true,
type: 'linear',
ticks: {
beginAtZero:true
},
gridLines: {
display: false,
drawTicks: true,
},
id: 'x-axis-0'
},
{
stacked: true,
position: 'top',
type: 'linear',
ticks: {
beginAtZero:true
},
id: 'x-axis-1',
gridLines: {
display: true,
drawTicks: true,
},
display: false
}]
}
}
});
Now, I want to add the average line to each bar (as shown in the image).
Also, do you know the other solutions with open-source libraries for doing this?
The lines can be drawn using floating bars tied to the separate axis y2. To do so, you need to add another dataset as follows (I don't exactly understand what values you want to display, hence I randomly chose 40, 65 and 55):
{
label: "Lines",
backgroundColor: "rgb(255, 0, 0)",
data: [40, 65, 55].map(v => [v - 0.3, v + 0.3]),
yAxisID: 'y2',
order: -1
}
Further you must define a new scales option as shown below:
y2: {
display: false
}
Please take a look at your amended runnable code and see how it works.
var data = {
labels: ["January", "February", "March"],
datasets: [{
label: "Dogs",
backgroundColor: "rgba(237, 192, 169)",
data: [20, 10, 25]
},
{
label: "Cats",
backgroundColor: "rgba(253, 234, 175)",
data: [70, 85, 65]
},
{
label: "Birds",
backgroundColor: "rgba(179, 211, 200)",
data: [10, 5, 10]
},
{
label: "Lines",
backgroundColor: "rgb(255, 0, 0)",
data: [40, 65, 55].map(v => [v - 0.3, v + 0.3]),
yAxisID: 'y2',
order: -1
}
]
};
new Chart('myChart', {
type: 'bar',
data: data,
options: {
indexAxis: 'y',
plugins: {
legend: {
display: false
}
},
scales: {
y: {
stacked: true,
grid: {
display: false
}
},
y2: {
display: false
},
x: {
stacked: true,
beginAtZero: true,
grid: {
display: false
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>
I use Chart.js to create the horizontal bar of my chart. At this point I have is what is the first image.
But I need to create a "BackgroundBar" with percentage, but I do not know how I can do it. Can someone help me?
This is my output right Now.
This is the chart I want..
My code snippet is like below..
var bar_ctx = document.getElementById('bar-chart').getContext('2d');
var purple_orange_gradient = bar_ctx.createLinearGradient(0, 0, 250, 0);
purple_orange_gradient.addColorStop(0.0, 'rgb(237, 28, 36)');
purple_orange_gradient.addColorStop(0.25, 'rgb(228, 81, 173)');
purple_orange_gradient.addColorStop(0.5, 'rgb(194, 112, 215)');
purple_orange_gradient.addColorStop(0.75, 'rgb(158, 143, 239)');
purple_orange_gradient.addColorStop(1.0, 'rgb(106, 159, 247)');
var bar_chart = new Chart(bar_ctx, {
type: 'horizontalBar',
data: {
labels: ["Red", "Blue"],
datasets: [{
label: '# of Votes',
data: [12, 19],
backgroundColor: purple_orange_gradient,
hoverBackgroundColor: purple_orange_gradient,
borderWidth: 0
}]
},
options: {
scales: {
yAxes: [{
categorySpacing: 0,
barThickness: 20
}],
xAxes: [{
ticks: {
beginAtZero: true
//max:100
}
}]
}
}
});
<canvas id="bar-chart" width="300" height="125"></canvas>
This can be achieved using a ChartJS plugin called - chartjs-plugin-annotation.
DEMO
var bar_ctx = document.getElementById('bar-chart').getContext('2d');
var purple_orange_gradient = bar_ctx.createLinearGradient(0, 0, 250, 0);
purple_orange_gradient.addColorStop(0.0, 'rgb(237, 28, 36)');
purple_orange_gradient.addColorStop(0.25, 'rgb(228, 81, 173)');
purple_orange_gradient.addColorStop(0.5, 'rgb(194, 112, 215)');
purple_orange_gradient.addColorStop(0.75, 'rgb(158, 143, 239)');
purple_orange_gradient.addColorStop(1.0, 'rgb(106, 159, 247)');
var bar_chart = new Chart(bar_ctx, {
type: 'horizontalBar',
data: {
labels: ["Red", "Blue"],
datasets: [{
label: '# of Votes',
data: [12, 19],
backgroundColor: purple_orange_gradient,
hoverBackgroundColor: purple_orange_gradient,
borderWidth: 0
}]
},
options: {
scales: {
yAxes: [{
categorySpacing: 0,
barThickness: 20
}],
xAxes: [{
ticks: {
beginAtZero: true
}
}]
},
annotation: {
annotations: [{
type: 'box',
drawTime: 'beforeDatasetsDraw',
id: 'bg-bar-1',
xScaleID: 'x-axis-0',
xMin: 0,
xMax: 10,
backgroundColor: '#7f7f7f',
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://cdn.rawgit.com/chartjs/chartjs-plugin-annotation/master/chartjs-plugin-annotation.min.js"></script>
<canvas id="bar-chart" width="300" height="125"></canvas>
To learn more about this plugin and it's use cases, refer here.
I have a line chart of which the data points are rounded, but I want it to be triangle. Is there any way to do this?
Here is my chart code:
var lineChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
datasets: [{
label: 'Sales Point',
data: salesData,
borderColor: bdrColor,
fill: false
}]
},
Thanks in advance.
Set pointStyle property to triangle for your dataset, like so :
...
datasets: [{
label: 'Sales Point',
data: salesData,
borderColor: bdrColor,
fill: false,
pointStyle: 'triangle'
}]
...
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
datasets: [{
label: 'Sales Point',
data: [3, 1, 4, 2, 5],
backgroundColor: 'rgba(0, 119, 290, 0.2)',
borderColor: 'rgba(0, 119, 290, 0.6)',
fill: false,
pointRadius: 10,
pointStyle: 'triangle'
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
stepSize: 1
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>
I wonder how to remove the excess lines on the line chart. I tried to set drawborder to false but of course it just remove the all lines to the axis. I just wanted get rid of the unwanted vertical lines that points to the y axis labels like the image below with red mark.
Template:
<d-chartrecord
:chart-data="datacollection"
v-bind:options="options"
:height="200"
></d-chartrecord>
Script:
export default {
data () {
return {
datacollection: {},
options: {
responsive: true,
legend: {
display: false,
},
scales: {
xAxes: [{
gridLines: {
display: true,
color: '#D7D7D7'
},
ticks: {
fontSize: 8,
beginAtZero: true
},
gridLines: {
display: true,
}
}],
yAxes: [{
display: true,
ticks: {
fontSize: 8,
beginAtZero: true,
stepSize: 50,
maxTicksLimit: 3
}
}],
}
},
}
},
mounted () {
this.putData()
},
methods: {
putData () {
this.datacollection = {
labels: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
datasets: [{
lineTension: 0,
radius: 4,
borderWidth: 1,
borderColor: '#F2A727',
pointBackgroundColor:[ '#fff', '#fff', '#fff', '#fff', '#fff', '#F2A727'],
backgroundColor: 'transparent',
data: [this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt()]
}]
}
},
getRandomInt () {
return Math.floor(Math.random() * (95)) + 5
}
}
}
In chart.js, gridLines provides an option tickMarkLength to disable the length beyond the axes, Eg:
yAxes: [{
gridLines: {
tickMarkLength: 0,
},
}]
xAxes: [{
gridLines: {
tickMarkLength: 0,
},
}]
Unfortunately, there isn't any native functionality for this in ChartJS at the moment. You would rather need to create a chart plugin to achieve that.
ᴘʟᴜɢɪɴ (ᴅʀᴀᴡ x-ᴀxɪꜱ ɢʀɪᴅ-ʟɪɴᴇꜱ)
Chart.plugins.register({
beforeDraw: function(chart) {
var ctx = chart.chart.ctx,
x_axis = chart.scales['x-axis-0'],
topY = chart.scales['y-axis-0'].top,
bottomY = chart.scales['y-axis-0'].bottom;
x_axis.options.gridLines.display = false;
x_axis.ticks.forEach(function(label, index) {
if (index === 0) return;
var x = x_axis.getPixelForValue(label);
ctx.save();
ctx.beginPath();
ctx.strokeStyle = x_axis.options.gridLines.color;
ctx.moveTo(x, topY);
ctx.lineTo(x, bottomY);
ctx.stroke();
ctx.restore();
});
}
});
* place this at the top of your script
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩
Chart.plugins.register({
beforeDraw: function(chart) {
var ctx = chart.chart.ctx,
x_axis = chart.scales['x-axis-0'],
topY = chart.scales['y-axis-0'].top,
bottomY = chart.scales['y-axis-0'].bottom;
x_axis.options.gridLines.display = false; // hide original grid-lines
// loop through x-axis ticks
x_axis.ticks.forEach(function(label, index) {
if (index === 0) return;
var x = x_axis.getPixelForValue(label);
ctx.save();
ctx.beginPath();
ctx.strokeStyle = x_axis.options.gridLines.color;
ctx.moveTo(x, topY);
ctx.lineTo(x, bottomY);
ctx.stroke();
ctx.restore();
});
}
});
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
datasets: [{
label: 'LINE',
data: [3, 1, 4, 2, 5],
backgroundColor: 'rgba(0, 119, 290, 0.2)',
borderColor: 'rgba(0, 119, 290, 0.6)',
fill: false,
tension: 0
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
stepSize: 1
},
gridLines: {
display: false
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>
in Chart.js (I'm using version 2.9), gridLines also provides an option to disable the tick mark : drawTicks.
scales: {
xAxes: [{
gridLines:{
drawTicks: false
}
}]
}