Is it possible to put the Label of the Bar under it in a HorizontalBar layout?
Most of the examples I see online usually state putting the bar's label inside the bar, I haven't really seen one that places the label either on top or under the bar.
yAxes: [{
ticks: {
mirror: true,
}
Here's what I've done so far
https://jsfiddle.net/knyut1db/
My bad, I overlooked the labelOffset in the documentation.
ticks: {
mirror: true,
labelOffset: 50
}
Related
I have a working code like in this link: https://codesandbox.io/s/keen-darkness-x31u7?fontsize=14&hidenavigation=1&theme=dark&file=/src/index.js
I want ask, is there a possibility we could change the position of yaxes label to the top? (see the expected picture below).
I had actually tried the below code but it displays in the middle of gridline instead of top.
scales: {
yAxes: [
{
ticks: {
mirror: true,
},
},
],
}
Current Output:
Expected Output:
The mirror is actually fine to move the yaxes labels to inside. Your only problem is to move the labels upward so that it won't intersect with the x-gridlines. And for that, you can use labelOffset property to achieve it, and then you can also put some padding to move the label a little a bit from the y-line.
labelOffset - Distance in pixels to offset the label from the centre point of the tick (in the x direction for the x axis, and the y direction for the y axis).
So in all, your code would look like this below:
yAxes: [
{
ticks: {
mirror: true,
padding: -10,
labelOffset: -10
}
}
]
see more props and their definition here
Dont think that this is possible, the closes you can get to this as far as I know is this.
Link: https://codesandbox.io/s/react-chartjs-2-forked-rgiyf?file=/src/index.js
code:
scales: {
yAxes: [
{
ticks: {
padding: -30
}
}
]
}
There is a workaround for this, if you put a null value as the first entry in your dataset and an empty string in the labels array you will get this:
I'm trying to create a chart using chart.js like this one (for example):
https://thebreadoflifeblog.files.wordpress.com/2013/01/uk-age-pyramid.png
I tried multiple possibilities and so far, the best one I found is using a simple trick of merging two horizontalBar charts:
But there are actually some problems.
As I said, this is actually two different charts. I would like to have only one object.
I removed the yAxis. I could leave one to display the yAxis labels, but in that case, one of the two graphics will be smaller than the other one. I would like the labels to be displayed between both charts.
The chart on the left is using negative value to achieve the right to left bars. Is there a way to 'revert' an axis ? I saw there is a 'Scale' method, but it seems complicated for just reverting the axis...
I would like to know if there is something I can do to create such chart easier and, most important, as one unique chart.
I ran up against the same problems as you, and managed to fix it using React ChartJS' HorizontalBarChart: but only one ;-)
Try stacking the yAxis and adding two datasets, using the options property
const populationPyramidOptions = {
scales: {
yAxes: [{
stacked: true
}],
xAxes: [{
stacked: false
}]
}
<HorizontalBar data={chartData} options={populationPyramidOptions} />
You can get a pretty good result:
if you use directly chartjs check about the solution here:
https://github.com/nknganda/pyramid_chart_example
The syntax for the options is not compatible with chartjs > 3.x
Below the updated code:
options = {
plugins: {
tooltip: {
intersect: true,
callbacks: {
label: function(context) {
var label = context.dataset.label || '';
var value = context.formattedValue;
var positiveOnly = value < 0 ? -value : value;
if (label) {
label += ': ';
}
if (context.parsed.y !== null) {
label += positiveOnly
}
return label;
},
},
},
legend: {
position: "bottom",
},
},
responsive: true,
scales: {
x: {
stacked: false,
ticks: {
beginAtZero: true,
callback: (v) => {
return v < 0 ? -v : v;
},
},
},
y: {
stacked: true,
ticks: {
beginAtZero: true,
},
position: "left",
},
},
indexAxis: 'y'
}
Note that tooltips is now tooltip and inside plugins, alongside with legend.
xAxies and yAxies are x and y and no more a list.
You may find more in the official chartjs doc.
Dataset don't change as you only need to make your values negative.
I want to have x, y-axis like the following image.
It is really sample, but the x,y across on (0,0). and I want the negative part always shows whatever there is a point or now.
Thanks
You can get a result close to your example image, but not exactly the same. You would probably need to create a custom axis to align the tick labels to the zero line.
let axisConfig = {
drawBorder: false,
gridLines: {
lineWidth: 0,
zeroLineWidth: 1
},
ticks: {
max: 6,
min: -6
}
};
new Chart(document.getElementById("chart"), {
type: "scatter",
options: {
scales: {
xAxes: [axisConfig],
yAxes: [axisConfig]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="chart"></canvas>
I'm trying to position a custom Chart.js tooltip on the middle of two bars. I made a research on the chart.js docs and different posts but didn't found any different approach than position it using the following snippet (I'm using jquery and doing a toggle class to hide/show the tooltip, please focus on the values I'm using to position the tooltip):
function setupTooltipPosition(config) {
const { tooltipElement, tooltipModel } = config;
const leftOffset = this._chart.canvas.offsetLeft;
const topOffset = this._chart.canvas.offsetTop;
tooltipElement.removeClass(tooltipSelectors.hide);
tooltipElement.css('left', `${tooltipModel.caretX - leftOffset}px`);
tooltipElement.css('top', `${tooltipModel.carteY - topOffset}px`);
}
Using this approach on this particular case I got this result:
[
I also tried using the x and y values of the tooltipModel , however , it doesn't add more sense of how to put the tooltip in the middle. If you tried to add a custom offset to put it on the middle , it works for just this case, but when you add more data it doesn't work. I can have at most 2 datasets, however, the user can add at most 10 data values that means 10 groups of bars.
The question is: There is a way to put the tooltip in the middle of the group of bars (or a single bar in case the user has just 1 dataset) using the values that Chart.js provide for tooltips? Or in other case, do you know any custom approach to have this tooltip centered?
Thanks!!
You don't specify if 'middle' means on the x- and/or y-axis. But since you wrote:
...on the middle of two bars...
I assume you mean on the x-axis. In this case you need to set the options.tooltips.mode property to index. Below is a working example.
let myChart = new Chart(document.getElementById('myChart'), {
type: 'bar',
data: {
labels: ['x', 'y', 'z'],
datasets: [{
label: '1993',
data: [50, 30, 65],
backgroundColor: '#503291'
}, {
label: '1994',
data: [60, 15, 65],
backgroundColor: '#1bbecd'
}]
},
options: {
tooltips: {
mode: 'index'
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
barPercentage: 1
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myChart"></canvas>
For future questions please provide a MCVE as that makes it much quicker and easier to help you.
Is there a way to align vertically the dot with the x-axis value? I'm using chart.js v2.5.0. I know that behaviour only happens when there's just one dataset pair [x,y].
If you provide a Fiddle or something like that we might be able to give something more concrete, but you can achieve this by setting the min property on the axes.
Something like that
let options = {
scales: {
yAxes: [{
ticks: {
min: <insert value here>,
}
}]
}
};