Hello I have stuck with add space between stacked bar, I mean I need to add space or margin or padding between bar color
this what I'm done with
and what I want is like this
as you can see there's is space between green, red and yellow bar
are possible to add it?
I've trying to add options.layout.padding but still not working
const borderRadius = 8;
const borderRadiusAllCorners = { topLeft: borderRadius, topRight: borderRadius, bottomLeft: borderRadius, bottomRight: borderRadius };
const labels = ['0%', '25%', '50%', '75%', '100%'];
const data = {
labels: labels,
datasets: [
{
label: 'LCP',
data: [
90,80,70
],
borderColor: 'green',
backgroundColor: 'green',
borderWidth: 0,
borderRadius: borderRadiusAllCorners,
borderSkipped: 'false',
},
{
label: 'FID',
data: [
8,15,15
],
borderColor: 'yellow',
backgroundColor: 'yellow',
borderWidth: 0,
borderRadius: borderRadiusAllCorners,
borderSkipped: 'false',
},
{
label: 'CLS',
data: [
2,5,15
],
borderColor: 'red',
backgroundColor: 'red',
borderWidth: 0,
borderRadius: borderRadiusAllCorners,
borderSkipped: 'false',
},
]
};
const ctx = $('#cwv-chart');
const myChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
indexAxis: 'y',
elements: {
bar: {
borderRadius: 6,
borderWidth: 2,
}
},
scales: {
x: {
display: false,
stacked: true,
offset: true,
},
y: {
display: false,
stacked: true
}
},
responsive: true,
plugins: {
legend: {
display: false,
},
title: {
display: false,
}
}
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="cwv-chart" height="150"></canvas>
The options.layout.padding is just adding space around the chart area and not between data elements.
I'm doing something like that with a simple plugin, changing the base of the bar element, at runtime.
EDIT: the plugin has been updated in order to avoid bugs when chart hovering.
See snippet:
const ctx = document.getElementById("myChart");
const plugin = {
id: 'fillGaps',
beforeDatasetDraw(chart, args) {
if (args.index > 0 && chart.isDatasetVisible(args.index)) {
args.meta.data.forEach(function(item, i) {
const {width} = item.getProps(['width'], true);
item.base = item.x - width + 3;
});
}
}
};
const myChart = new Chart(ctx, {
type: 'bar',
plugins: [plugin],
data: {
labels: ['January', 'Fabruary', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'user 1 online',
data: [50, 35, 45, 47, 10, 3, 27],
backgroundColor: 'rgba(40, 139, 170, 1)',
borderWidth: 0,
borderSkipped: false,
},
{
label: 'user 2 online',
data: [50, 35, 45, 47, 10, 3, 27],
backgroundColor: 'orange',
borderWidth: 0,
borderSkipped: false,
}]
},
options: {
indexAxis: 'y',
//animation: false,
elements: {
bar: {
borderRadius: {
topLeft: 12,
topRight: 12,
bottomLeft: 12,
bottomRight: 12
},
}
},
scales: {
y: {
stacked: true,
},
x: {
stacked: true,
}
}
}
});
.myChartDiv {
max-width: 600px;
max-height: 400px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.9.1/dist/chart.min.js"></script>
<html>
<body>
<div class="myChartDiv">
<canvas id="myChart" width="600" height="400"/>
</div>
</body>
</html>
Related
I am trying to create a bar chart with the columns aligned to the left using the PrimeNg p-chart. I started with the stacked graph on http://primefaces.org/primeng/chart/bar.
This is my current graph:
Desired look:
I have tried using categoryPercentage: 0.99, and barPercentage: 1.0 from How to align ChartJS bars to the left?. These didn't create my desired look as they expanded the column to the full width. I want to have smaller width columns and shift them over to the left. Are there any properties that can be used to achieve this effect? Are there any alternatives to ChartJS properties?
this.stackedData =
[{
type: 'bar',
categoryPercentage: 0.25,
borderRadius: 3,
label: '200',
backgroundColor: '#003D79',
data: [
50,
55,
78,
48,
90,
76,
42
]
}, {
type: 'bar',
categoryPercentage: 0.25,
borderRadius: 3,
label: '400',
backgroundColor: '#AC0000',
data: [
21,
4,
24,
75,
37,
65,
34
]
}, {
type: 'bar',
categoryPercentage: 0.25,
borderRadius: 3,
label: '401',
backgroundColor: '#E80000',
data: [
41,
0,
24,
74,
23,
21,
32
]
}, {
type: 'bar',
categoryPercentage: 0.25,
borderRadius: 3,
label: '402',
backgroundColor: '#5C0000',
data: [
41,
52,
0,
74,
23,
21,
32
]
}, {
type: 'bar',
categoryPercentage: 0.25,
borderRadius: 3,
label: 'Other',
backgroundColor: '#D5D5D5 ',
data: [
]
}];
this.stackedOptions = {
plugins: {
tooltips: {
mode: 'index',
intersect: false
},
legend: {
position: 'bottom',
align: 'end',
labels: {
usePointStyle: 'circle',
}
},
},
scales: {
x: {
stacked: true,
grid: {
display: false
},
ticks: {
maxRotation: -45,
minRotation: -45,
padding: 30,
}
},
y: {
stacked: true,
grid: {
drawBorder: false,
lineWidth: 0.5,
}
}
}
};
Y have this issue:
User 1 repeats twice in two colors, gray and white.
Gray should not be seen
This problem starts when I put styles to the x axis, it repeats the labels.
is there any solution for this case?
The requirement is simply to change the color of the axis labels and ticks.
The gray bar is at the bottom, that is, it does not stack with the red and blue ones
var data = {
labels: ["User1", "User2"],
datasets: [
{
stack:1,
label: "TotalTime",
backgroundColor: "red",
borderWidth: 1,
data: [50, 50],
yAxisID:1
},
{
stack:1,
label: "TotalTime",
backgroundColor: "blue",
borderWidth: 1,
data: [40, 40],
yAxisID:1
},
{
label: "Leave",
backgroundColor: "rgba(191,191,191, 0.5)",
borderWidth: 1,
data: [100, 100],
yAxisID:1
},
],
};
var options = {
indexAxis: "y",
scales: {
y: {
ticks: {
color: "white",
font: {
size: 12,
},
},
stacked: true,
},
x: {
ticks: {
color: "white",
font: {
size: 12,
},
},
}
}
}
var ctx = document.getElementById("myChart").getContext("2d");
var myBarChart = new Chart(ctx, {
type: 'bar',
data: data,
options: options
});
canvas{
background-color:black
}
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.6.2/dist/chart.min.js"></script>
<canvas id="myChart" width="500" height="300"></canvas>
It is because of your yAxisID, you dont define it but chart.js still makes a new axis for it since it isnt made by you with that id, so if you remove that or make it y which you have defined it doesnt make it again anymore
var data = {
labels: ["User1", "User2"],
datasets: [{
label: "TotalTime",
backgroundColor: "red",
borderWidth: 1,
data: [50, 50],
},
{
label: "TotalTime",
backgroundColor: "blue",
borderWidth: 1,
data: [40, 40],
},
{
label: "Leave",
backgroundColor: "rgba(191,191,191, 0.5)",
borderWidth: 1,
data: [100, 100],
},
],
};
var options = {
indexAxis: "y",
scales: {
y: {
ticks: {
color: "white",
font: {
size: 12,
},
},
stacked: true,
},
x: {
stacked: true,
ticks: {
color: "white",
font: {
size: 12,
},
},
}
}
}
var ctx = document.getElementById("myChart").getContext("2d");
var myBarChart = new Chart(ctx, {
type: 'bar',
data: data,
options: options
});
canvas {
background-color: black
}
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.6.2/dist/chart.min.js"></script>
<canvas id="myChart" width="500" height="300"></canvas>
the version of Chart JS is 3.7.0
I am looking for a way to make my chart's points look from this:
to something like this:
I found out that there is an option in this library where you can set the points to a certain shape. e.x: pointStyle: 'rectRot' will make the points appearance look like this:
Is there an option or a way to achieve what Im looking for? (Check the second picture).
Thanks in advance!
My chart's javascript:
const data = {
datasets: [
{
backgroundColor: 'black',
borderColor: '#2d84b4',
borderWidth: 2,
data: [
{ x: 'Dec 27', y: 0.204 },
{ x: '01:00', y: 0.234 },
{ x: '02:00', y: 0.274 },
{ x: '03:00', y: 0.234 },
{ x: '04:00', y: 0.304 },
{ x: 'Dec 28', y: 0.506 },
],
fill: false,
pointBorderColor: 'rgba(0, 0, 0, 0)',
pointBackgroundColor: 'rgba(0, 0, 0, 0)',
pointHoverBackgroundColor: '#2d84b4',
pointHoverBorderColor: '#2d84b4',
},
],
};
const config = {
type: 'line',
data: data,
options: {
animation: {
duration: 0,
},
responsive: true,
maintainAspectRatio: false,
plugins: {
//Do not display legend.
legend: {
display: false,
},
},
scales: {
xAxes: {
stacked: true,
ticks: {
stepSize: 2,
},
grid: {
display: true,
drawBorder: false,
drawOnChartArea: false,
drawTicks: true,
tickLength: 4,
type: 'time',
},
},
yAxes: {
grid: {
drawBorder: false,
drawTicks: false,
},
},
},
elements: {
point: {
radius: 5,
},
},
},
};
// Initialize the Chart.
const myChart = new Chart(document.getElementById('myChart'), config);
window.addEventListener('beforeprint', () => {
myChart.resize(600, 600);
});
window.addEventListener('afterprint', () => {
myChart.resize();
});
//Disable all animations!
myChart.options.animation = false;
myChart.options.animations.colors = false;
myChart.options.animations.x = false;
myChart.options.transitions.active.animation.duration = 0;
The points seemed to work just fine with your transparent background, only on hover you setted a normal background again so the pointHoverBackgroundColor should also be transparent.
To make the point bigger on hover you can use the hoverRadius and to make the line have the same width you can use the pointHoverBorderWidth:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'black',
borderColor: '#2d84b4',
borderWidth: 2,
pointBackgroundColor: 'rgba(0, 0, 0, 0)',
pointHoverBackgroundColor: 'rgba(0, 0, 0, 0)',
pointHoverBorderColor: '#2d84b4',
hoverRadius: 10,
pointHoverBorderWidth: 2
}]
},
options: {}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
</body>
this is my html code:
<div class="chart col-md-12">
<canvas id="bar-chart-grouped2" style="min-height: 250px; height: 250px; max-height: 400px; max-width: 100%;margin-top:1%;"></canvas>
</div>
and chartjs code
new Chart(document.getElementById("bar-chart-grouped"), {
type: 'bar',
data: {
labels: <%=Newtonsoft.Json.JsonConvert.SerializeObject(Date_Solar_Index)%>,
datasets: [
{
label: "Total_Recived",
backgroundColor: "#17a2b8",
fillColor: "rgba(151,187,205,0.5)",
borderColor: '#e2e2e2',
borderWidth: '2',
data:<%=Newtonsoft.Json.JsonConvert.SerializeObject(POID_MMS_Index)%>,
}, {
label: "valideted",
backgroundColor: "#28a745",
fillColor: "rgba(151,187,205,0.5)",
borderColor: '#e2e2e2',
borderWidth: '2',
data: <%=Newtonsoft.Json.JsonConvert.SerializeObject(COW_POID_MMS_Index)%>,
}, {
label: "Total_rejected",
backgroundColor: "#ff0000",
fillColor: "rgba(151,187,205,0.5)",
borderColor: '#e2e2e2',
borderWidth: '2',
data: <%=Newtonsoft.Json.JsonConvert.SerializeObject(MNP_POID_MMS_Index)%>,
}, {
label: "Total_Back log",
backgroundColor: "#ffc107",
fillColor: "rgba(151,187,205,0.5)",
borderColor: '#e2e2e2',
borderWidth: '2',
data: <%=Newtonsoft.Json.JsonConvert.SerializeObject(Supervisions_Index)%>,
}, {
label: "Total_Back log",
backgroundColor: "#B60A3B",
fillColor: "rgba(151,187,205,0.5)",
borderColor: '#e2e2e2',
borderWidth: '2',
data: <%=Newtonsoft.Json.JsonConvert.SerializeObject(INDEXED_Index)%>,
}, {
label: "Total_Back log",
backgroundColor: "#72098E",
fillColor: "rgba(151,187,205,0.5)",
borderColor: '#e2e2e2',
borderWidth: '2',
data: <%=Newtonsoft.Json.JsonConvert.SerializeObject(Reject_Index)%>,
}
]
},
options: {
maintainAspectRatio: false,
responsive: true,
title: {
display: true,
text: ''
},
legend: { display: true, position: "bottom", onClick: null },
hover: {
animationDuration: 0
},
animation: {
onComplete: function () {
var chartInstance = this.chart;
var ctx = chartInstance.ctx;
ctx.response = true;
ctx.textAlign = "center";
ctx.font = "bold Arial";
//ctx.fillStyle = "black";
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) {
ctx.save();
// Translate 0,0 to the point you want the text
ctx.translate(bar._model.x, bar._model.y - 20);
// Rotate context by -90 degrees
ctx.rotate(-0.5 * Math.PI);
// Draw text
ctx.fillText(dataset.data[index], 0, 0);
ctx.restore();
}), this)
}), this);
}
},
scales: {
xAxes: [{
gridLines: {
display: false
}
}],
yAxes: [{
gridLines: {
color: "rgba(0, 0, 0, 0)",
},
id: 'B',
type: 'linear',
display: false,
position: 'left',
}, {
gridLines: {
color: "rgba(0, 0, 0, 0)",
},
id: 'A',
type: 'linear',
position: 'right',
display: false,
ticks: {
max: 101,
min: 0
}
}]
}
}
});
enter image description here
you have overriden the default onClick method for the legend legend: { display: true, position: "bottom", onClick: null } remove the onClick: null and try again. It should work then
EDIT: Dear, in your afterDraw you never check if the dataset is hidden you always draw te text. And since the data is still in the data object it will just draw it
How can I change the size of each different dot in my scatter chart ?
var scatterChart = new Chart(ctx, {
type: 'scatter',
data: {
datasets: [{
label: 'Scatter Dataset',
data: [{
x: -10,
y: 0
}, {
x: 0,
y: 15
}, {
x: 10,
y: 5,
}],
pointRadius: 15,
fill: false,
pointHoverRadius: 20
}]
},
options: {
scales: {
xAxes: [{
type: 'linear',
position: 'bottom',
}]
}
}
});
After this I want to change each dot size in matter of my ajax response data.
I tried to do this without the star ofc:
data: [{
x: -10,
y: 0
}, {
x: 0,
y: 15
}, {
x: 10,
y: 5,
pointRadius: 15,
*
}],
but with no success.
You should use a bubble chart that accepts the bubble radius in pixels (property r) for each data point.
Please take a look at this sample chart.
you can put each point in a separate series.
this will allow you to assign a separate radius.
datasets: [{
label: 'Scatter Dataset',
data: [{
x: -10,
y: 0
}],
pointRadius: 10,
fill: false,
pointHoverRadius: 20
}, {
label: 'hidden',
data: [{
x: 0,
y: 15,
}],
pointRadius: 20,
fill: false,
pointHoverRadius: 20
}, {
label: 'hidden',
data: [{
x: 10,
y: 5,
}],
pointRadius: 30,
fill: false,
pointHoverRadius: 20
}]
and to prevent multiple legend entries from being displayed,
we can filter out all but one series label.
legend: {
labels: {
filter: function(item, chart) {
return (item.text !== 'hidden');
}
}
},
see following working snippet...
$(document).ready(function() {
var scatterChart = new Chart(document.getElementById('chart').getContext('2d'), {
type: 'scatter',
data: {
datasets: [{
label: 'Scatter Dataset',
data: [{
x: -10,
y: 0
}],
pointRadius: 10,
fill: false,
pointHoverRadius: 20
}, {
label: 'hidden',
data: [{
x: 0,
y: 15,
}],
pointRadius: 20,
fill: false,
pointHoverRadius: 20
}, {
label: 'hidden',
data: [{
x: 10,
y: 5,
}],
pointRadius: 30,
fill: false,
pointHoverRadius: 20
}]
},
options: {
legend: {
labels: {
filter: function(item, chart) {
return (item.text !== 'hidden');
}
}
},
scales: {
xAxes: [{
type: 'linear',
position: 'bottom',
}]
}
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<canvas id="chart"></canvas>
I figured out you can specify an array of values for pointRadius & pointStyle properties :
datasets: [
{
label: "Plan",
data: [10, 15, 5],
pointRadius: [10, 5, 15],
pointStyle: ["rect", "rect", "circle"],
},
],
This way you can specify a size of each dot individually