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:
Related
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.
For my charts, I am trying to have thin gridlines and thicker axis lines (both x and y).
I found an option to adjust zeroLineWidth but this is only applicable for 0 and my axis does not start at 0 (E.g. x-axis are years, so starting at 0 makes no sense).
I found some discussions about it but as far as I can tell this does not work yet: https://github.com/chartjs/Chart.js/pull/4117.
I also tried to supply an array for the gridLines lineWidth option. The first value changes the thickness of the axis but also of the first gridline. So this is not fully independent.
scales: {
yAxes: [{
gridLines: {
lineWidth: [5,1,1,1,1,1,1,1,1]
}
}]
}
Maybe there is no way to do this right now but if anyone has a solution that would be great. Even a hacky one would be welcome.
It looks like there's no way to do this since (as you noticed) the axis line width is directly derived from the gridline width via this line in the Chart.js source:
var axisWidth = gridLines.drawBorder ? valueAtIndexOrDefault(gridLines.lineWidth, 0, 0) : 0;
But, since you say a hacky solution is welcome...
The below snippet demonstrates combining two axes to achieve the desired affect; one for the border and one for the gridlines.
It's ugly, but functional.
let border_axis = {
gridLines: {
drawOnChartArea: false,
lineWidth: 10,
color: "rgba(255, 127, 0, 0.25)"
},
ticks: {
beginAtZero: true
}
},
gridline_axis = {
beforeBuildTicks: function(axis) {
if (axis.id == "y-axis-1") {
// this callback ensures both axes have the same min/max to keep ticks and gridlines aligned.
axis.max = axis.chart.scales["y-axis-0"].max;
axis.min = axis.chart.scales["y-axis-0"].min;
}
},
gridLines: {
drawTicks: false,
drawBorder: false
},
ticks: {
display: false
}
},
chart = new Chart(document.getElementById("chart"), {
type: "line",
data: {
labels: [2001, 2002, 2003, 2004, 2005],
datasets: [{
data: [1, 2, 3, 4, 5]
}]
},
options: {
scales: {
xAxes: [border_axis, gridline_axis],
yAxes: [border_axis, gridline_axis]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="chart"></canvas>
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>
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
}
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>,
}
}]
}
};