chartjs: How to create single outer border for stacked barchart - chart.js

I have a stacked barchart for which I can pass a border color to each stack. Passing the same borderColor to each stack would also result in a border in the middle(yAxis=1.0) of the barchart.
I want to create a single outer border is this possible?

You can specify the borderwidth as an object and then set the with of the border to 0 where the stacks meet
Example:
var options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1,
borderColor: 'red',
borderWidth: {
top: 0,
left: 1,
right: 1
}
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1,
borderColor: 'blue',
borderWidth: {
bottom: 0,
top: 1,
left: 1,
right: 1
}
}
]
},
options: {
scales: {
y: {
stacked: true
},
x: {
stacked: true
}
}
}
}
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.2.0/chart.js"></script>
</body>

Related

Is there anyway to hide the gridlines between ticks and chartArea in ChartJS?

Is there anyway to remove this overflowing section of the gridlines?
This is exactly what I'm looking for:
I've seen a few post from years ago with this question and none of them have really yielded any results. Those were so long ago that I pray that a fix has happened since then.
Cheers!
You can set tickLength to 0 in the grid options. To make the ticks still appear a bit away from the scale you can use the padding option:
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'orange'
}
]
},
options: {
scales: {
y: {
ticks: {
padding: 4,
crossAlign: 'far'
},
grid: {
tickLength: 0
}
},
x: {
grid: {
tickLength: 0
}
}
}
}
}
const 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.1/chart.js"></script>
</body>

Show center tick value radar chart- Chart.js

I have a radar chart and I'd like to display the value for the tick at the center of the chart over the center. My r scale is set up as follows, and my data is an integer ranging from 1-5.
scales: {
r: {
min: 1,
max: 5,
ticks: {
stepSize: 1,
z: 10,
},
},
},
Over the center of the radar chart, I'd like the tick value displayed, like it's displayed for all other values. Setting my min to 0 (one step size lower than my actual min) displays my ticks, but I'd like the center of my graph to be labeled instead of having a minimum size between the center and the first tick.
You will need to use a custom plugin to draw it on the canvas yourself like so:
const options = {
type: 'radar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'orange'
}
]
},
options: {
plugins: {
centerTick: {
//color: 'grey' // Set custom color for y
}
}
},
plugins: [{
id: 'centerTick',
afterDraw: (chart, args, opts) => {
const {
ctx
} = chart;
ctx.fillStyle = opts.color || Chart.defaults.color;
ctx.fillText(chart.scales.r.min, chart.scales.r.xCenter - (ctx.measureText(chart.scales.r.min).width / 2), chart.scales.r.yCenter)
}
}]
}
const 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>

Legend on chart.js

I'm trying to make a legend with a perfect box, but I don't know how, the "NĂ­vel Op. Max" is not like the others,I think the reason this happens is because it's a dotted line and the others are solid lines.
Does anyone know if there is any property in chart.js that causes the square's edge to not be dotted?
My code:
legend: {
display: true,
labels: {
fontSize: 10,
boxWidth: 10
}
The way I want:
You can provide a custom generateLabels function and dont provide the setting for making the border dashed like so:
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'orange',
borderDash: [2, 2]
}
]
},
options: {
plugins: {
legend: {
labels: {
generateLabels: (chart) => {
const datasets = chart.data.datasets;
const {
labels: {
usePointStyle,
pointStyle,
textAlign,
color
}
} = chart.legend.options;
return chart._getSortedDatasetMetas().map((meta) => {
const style = meta.controller.getStyle(usePointStyle ? 0 : undefined);
const borderWidth = Chart.helpers.toPadding(style.borderWidth);
return {
text: datasets[meta.index].label,
fillStyle: style.backgroundColor,
fontColor: color,
hidden: !meta.visible,
lineCap: style.borderCapStyle,
lineDashOffset: style.borderDashOffset,
lineJoin: style.borderJoinStyle,
lineWidth: (borderWidth.width + borderWidth.height) / 4,
strokeStyle: style.borderColor,
pointStyle: pointStyle || style.pointStyle,
rotation: style.rotation,
textAlign: textAlign || style.textAlign,
borderRadius: 0,
datasetIndex: meta.index
};
})
}
}
}
}
}
}
const 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.6.2/chart.js"></script>
</body>

Chartjs Polar Area Chart - Data labels shown don't rotate with startAngle

I am setting the startAngle on my polar chart so the first category starts on the -180 degrees.
But I can't figure out why the data point labels don't correspondingly adjust and rotate. As a result, they show up incorrectly against the wrong data. As you can see in the image, Question 6 still appears where Question 1 should be. The tooltips on each section do appear correctly.
Note: When I use the datalabels plugin, it does show the label correctly. But I am not using it because it does not wrap the labels and also it cuts off the labels if they become too big. In addition I had responsiveness problems with it.
So please suggest a solution without that plugin if possible.
Thank you very much for helping me out.
const mydata = {
labels: [
'Question1',
'Question2',
'Question3',
'Question4',
'Question5',
'Question6'
],
datasets: [{
label: 'Data labels don't move',
data: [5, 8, 6, 6, 7, 8],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(75, 192, 192)',
'rgb(255, 205, 86)',
'rgb(201, 203, 207)',
'rgb(255, 99, 132)',
'rgb(201, 203, 207)'
]
}]
};
var myChart = new Chart('mychartId'),
{
type: "polarArea",
data: mydata,
options:
{
responsive: true,
cutoutPercentage: 20,
startAngle: -1 * Math.PI,
legend: {
display: false
},
layout: {
padding: 20
},
scale: {
ticks: {
max: 10,
beginAtZero: true,
min: 1,
stepSize: 1,
display: false
},
angleLines: {
display: false
},
pointLabels: {
display: true
}
}
}
}
sample image showing the problem
Update to V3, there they do turn with the chart if you adjust the startAngle
var options = {
type: 'polarArea',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [2, 9, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
scales: {
r: {
startAngle: 180,
ticks: {
display: false
},
pointLabels: {
display: true
}
}
}
}
}
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.6.0/chart.js"></script>
</body>
V3 has some breaking changes over V2, for all of them you can read the migration guide

Foreground chart by mouse

type: 'scatter'
Now first one is on the top. Is it possible to show different charts on the top?
picture
In your dataset array you can put a type to put a different type in there. The order of the datasets in the array decide the draw order of them.
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 13, 3, 5, 2, 3],
borderWidth: 1
},
{
type: 'bar',
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1,
backgroundColor: 'red'
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
reverse: false
}
}]
}
}
}
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/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
</body>