I have a bar chart where I have drawn 3 vertical lines, each with it's own label at the top. I would like those labels to be above the top of the y-axis (above the 30% line in the example) but below the legend. I can't figure out how to increase the space between the top legend and the chart such that I can have my vertical line labels (15, 24 & 33) be off of the chart itself but below the legend. Any ideas?
If you want do increase spacing in all charts you can put this code before creating :
Chart.Legend.prototype.afterFit = function() {
this.height = this.height + 50;
};
Of course, I don't try but i think you can change it (or copy the original Chart object before, to keep the original padding).
Bye,
If you want to apply padding below legend for some charts only in your app:
ChartJS >= 2.1.0
Chart.plugins.register({
id: 'paddingBelowLegends',
beforeInit: function(chart, options) {
chart.legend.afterFit = function() {
this.height = this.height + 50;
};
}
});
// ----------------------------------
// disable the plugin only for charts
// where you DO NOT WANT the padding
// ----------------------------------
// for raw ChartJS use:
var chart = new Chart(ctx, {
config: {
plugins: {
paddingBelowLegends: false
}
}
});
// for angular-chartjs:
$scope.myChart.options.plugins = { paddingBelowLegends: false }
// then in template:
// <canvas class="chart ..." chart-options="myChart.options" ... />
ChartJS >= 2.5.0
Specific plugins for each chart are supported, it should be possible to do:
var chart = new Chart(ctx, {
plugins: [{
beforeInit: function(chart, options) {
chart.legend.afterFit = function() {
this.height = this.height + 50;
};
}
}]
});
See ChartJS documentation + inspired by this other answer
Unfortunately, since there is no config option to handle this the only way you can achieve the desired result is to extend Chart.Legend and implement the afterFit() callback.
Here is a quick codepen showing how to do just that. To change the spacing, just change the value in line 9 (currently set to 50). Also, this of course only works with the legend at the top. Hopefully, the example is clear enough for you to modify in case you want to move your legend elsewhere.
If anyone is wondering why the afterFit solution is not working in Chart.js 3.3.0 it is because afterFit function was removed from the legend plugin.
If you want to make this work anyway by taking advantage over the fit function, you can try this hacky solution / workaround:
const plugin = {
beforeInit(chart) {
// Get reference to the original fit function
const originalFit = chart.legend.fit;
// Override the fit function
chart.legend.fit = function fit() {
// Call original function and bind scope in order to use `this` correctly inside it
originalFit.bind(chart.legend)();
// Change the height as suggested in another answers
this.height += 15;
}
};
}
I know that this is not an ideal solution, but until we have native support for this legend padding, I'm afraid this is as good we can do right now.
This helped me after 2 days of research.
Chart.Legend.prototype.afterFit = function() {
this.height = this.height + 50;
};
update this in module.ts file
I'm using react-chartjs-2 (but this is just a port and uses the same configurations object) and I was able to achieve that by changing the labels configuration nested on legend configuration:
chartOptions = {
legend: {
labels: {
padding: 50 -> this one.
}
},
You can check the property description here:
https://www.chartjs.org/docs/latest/configuration/legend.html
Hope it helps.
I have tried the above approaches on my react(react-chartjs-2) project but no luck. Here I have one different approach like creating custom legends outside the chart. so you can get more control over it
Hide default legend
Get legend object using any ref method.
Loop and make a custom legend using html and css.
Sample codesanbox
I am aware that OP is not about reactjs component, but as it is a common issue it will help someone.
Orginal reference
.
For ng2-charts#^3.1.0, following this answer works with an addition:
this.options.labels.padding = 40;
//this.height += 15;
or the title.padding config (this'll create an invisible title under the graph so it's a bit hacky):
plugins: {
legend: {
display: true,
position: 'bottom',
title: {
display: true,
padding: 10,
},
Stackblitz
After searching the chart.js file I found out that the height of the labels bar is defined there in
height = this._fitRows(titleHeight, fontSize, boxWidth, itemHeight)
OR
this.height = Math.min(height, options.maxHeight || this.maxHeight)
in the fit() function
fit() {
const {options, ctx} = this;
if (!options.display) {
this.width = this.height = 0;
return;
}
const labelOpts = options.labels;
const labelFont = toFont(labelOpts.font);
const fontSize = labelFont.size;
const titleHeight = this._computeTitleHeight();
const {boxWidth, itemHeight} = getBoxSize(labelOpts, fontSize);
let width, height;
ctx.font = labelFont.string;
if (this.isHorizontal()) {
width = this.maxWidth;
height = this._fitRows(titleHeight, fontSize, boxWidth, itemHeight);
} else {
height = this.maxHeight;
width = this._fitCols(titleHeight, fontSize, boxWidth, itemHeight);
}
this.width = Math.min(width, options.maxWidth || this.maxWidth);
this.height = Math.min(height, options.maxHeight || this.maxHeight) + 40;}
And I changed it to +40 as shown above. and it worked fine for me so I wanted to share.
If you want to apply padding below legend for some charts only in your app:
ChartJS >= 2.1.0
Note: make sure to add this in plugins and not inside options.plugins.
Chart.plugins.register({
id: 'paddingBelowLegends',
beforeInit: function(chart, options) {
chart.legend.afterFit = function() {
this.height = this.height + 50;
};
}
});
// ----------------------------------
// disable the plugin only for charts
// where you DO NOT WANT the padding
// ----------------------------------
// for raw ChartJS use:
var chart = new Chart(ctx, {
config: {
plugins: {
paddingBelowLegends: false
}
}
});
For React Users using react-chartjs-2:
import { Line } from "react-chartjs-2";
import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend } from "chart.js";
ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);
<Line
data={{
datasets: trendsData?.map((trend, idx) => ({
type: "line",
label: trend.domainName,
data: trend.domainTrends.map(d => d.value),
backgroundColor: getDomainColor(idx).backgroundColor,
borderColor: getDomainColor(idx).color,
pointRadius: 0,
tension: 0.3
})),
labels: trendsData?.[0]?.domainTrends.map(d => d.date)
}}
options={{
plugins: {
legend: {
display: true,
align: "start",
labels: {
font: { size: 14 }
}
}
}
}}
plugins={[
{
id: "increase-legend-spacing",
beforeInit(chart) {
// Get reference to the original fit function
const originalFit = (chart.legend as any).fit;
// Override the fit function
(chart.legend as any).fit = function fit() {
// Call original function and bind scope in order to use `this` correctly inside it
originalFit.bind(chart.legend)();
this.height += 20;
};
}
}
]}
/>
I know this is not what OP really wants but at least for newer version, and the one I use - 4.0.1 - there is no way to increase the margin between the legend box and the chart, that I have been able to find at least, so this is an obvious workaround. So in order to avoid this problem:
I had to change the position of the leyend box below the chart with this option configurations:
options = {
layout: {
padding: 30
},
parsing: {
key: 'nested.value'
},
plugins: {
datalabels: {
color: '#36A2EB'
},
tooltip: {
enabled: true
},
legend: {
position: 'bottom',
align: 'center',
labels: {
padding: 20,
}
}
}
};
Note: To add the values at the top of the bars I had to add the npm package chartjs-plugin-datalabels with the following features inside your datasets config:
datasets: [
{
label: "Ejercido",
data: source.map( s => s.ejercidoTotal),
datalabels: {
anchor: 'end',
clamp: true,//this makes one datalabel not visible if it crashed with other one
display: 'auto',
align: 'top',
color: '#333333',
formatter
}
},
...
]
With this as the end result:
If you are using react-chartjs-2 library to show chart in a React app. You can use the below solution:
const plugin = {
beforeInit: function (chart) {
// Get reference to the original fit function
const originalFit = chart.legend.fit
// Override the fit function
chart.legend.fit = function fit() {
// Bind scope in order to use `this` correctly inside it
originalFit.bind(chart.legend)()
this.height += 20 // Change the height
}
}
}
export const ReactChart2Example = (props) => {
const { data = [] } = props;
return (
<div>
<Chart plugins={[plugin]} type ="bar" data={data}/>
</div>
);
};
We have to pass plugins prop separately in React js Chart component and not inside options.
Reference: https://github.com/chartjs/Chart.js/issues/10388#issuecomment-1217363379
You can use layout property under options. This helped me:
layout: {
padding: {
left: 50,
right: 130,
top: 0,
bottom: 0
}
}
I used area range Highcharts but facing certain issues as:
For X-axis, the chart doesn't start with an initial point rather shows incorrect start tick value(i.e. 2020) instead of 2019.
Need to show label values for last data point only for each series, attached image below for reference
Could someone please help me with what do I do to resolve my issues.
Thanks in advance!
For the 1st issue, I tried changing the 'pointStart' attribute value for plotOptions->series but didn't work.
"plotOptions": {
"series": {
"pointStart": 1546300800000
}
}
Here is JSFiddle link of the chart containing code:
The first issue can be resolved by setting xAxsi.tickInterval = plotOptions.series.pointInterval:
xAxis: {
type: "datetime",
tickInterval: 31536000000
...
}
The second issue can be resolved by providing labels formatter callback function that will return only the last series point value. Also, other dataLabels properties have to be set properly (like align, overflow, etc). Check demo and code posted below.
Code:
dataLabels: {
enabled: true,
align: 'left',
verticalAlign: 'middle',
padding: 8,
allowOverlap: true,
overflow: 'allow',
crop: false,
formatter: function() {
var point = this.point,
series = this.series;
if (series.data.length === point.index + 1) {
return '$' + this.y.toFixed(1);
} else {
return '';
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/2xLevj6y/
API reference:
https://api.highcharts.com/highcharts/xAxis.tickInterval
https://api.highcharts.com/class-reference/Highcharts.DataLabelsOptionsObject#formatter
https://api.highcharts.com/class-reference/Highcharts.DataLabelsOptionsObject#align
https://api.highcharts.com/class-reference/Highcharts.DataLabelsOptionsObject#overflow
I am trying to add multiple lines in the tooltip for my horizontal stacked bar chart but the last couple lines are getting cut off by the end of the chart canvas. Is it possible to make the tooltip extend over the end of the chart canvas?
tooltips: {
mode: 'nearest',
intersect: true,
callbacks: {
footer: function() {
var withBreaks = "Hello World. \n My name is Jennifer. \n What is your name?"
return withBreaks;
},
}
},
Either you can add bottom padding to your canvas
options: {
layout: {
padding: {
bottom: 25 //set that fits the best
}
},
}
Another option is to set the yAlign of tooltip to center, so the tooltip won't occupy the bottom space of the canvas.
options: {
tooltips: {
yAlign: 'center'
}
}
Please have a look at this issue, especially https://github.com/chartjs/Chart.js/issues/622#issuecomment-72480781 comment.
A similar problem was faced here too.
I've create a line chart with chart.js. I changed the legend symbol form from rects to circles by using:
legend: {
display: true,
labels: {
usePointStyle: true,
},
}
I want to change the size of the circles. But according to the documentation this is only possible if I also change the font size:
Label style will match corresponding point style (size is based on fontSize, boxWidth is not used in this case).
- https://www.chartjs.org/docs/latest/configuration/legend.html#legend-label-configuration
Does anyone know if there is another option to change the size? Or do I have to use generateLabels().
Here is a codePen to take a look on that.
You can use the boxWidth option to influence the size of the point in the legend:
options: {
legend: {
labels: {
usePointStyle: true,
boxWidth: 6
}
}
}
read the documentation of chartjs about legend
I have a pie chart and I can add labels for it normal way.But I want to add labels with line as following.
I took this image from web as a example. here is my code ,
drawPieCharts = function(dev,title,data){
$('#'+dev).empty();
var plot = $.jqplot(dev, [data], {
title: {
text: title,
fontWeight: 'bold',
fontSize : '16',
show: true
},
grid: {
drawBorder: false,
drawGridlines: false,
background: '#ffffff',
shadow:false,
//diameter : 30
},
axesDefaults: {
},
highlighter: {
show: true,
formatString:'%s , P%',
tooltipLocation:'n',
useAxesFormatters:false
},
seriesDefaults:{
renderer:$.jqplot.PieRenderer,
rendererOptions: {
showDataLabels: true,
dataLabelThreshold: 0,
dataLabelPositionFactor: 1.05,
dataLabels : mapSeperater(data)[0],
padding: 2
}
},
});
}
And also I have another problem I want to bold the title of the chart and in this way it doesn't work. Is there a way to do that?
Thank you.
i'm looking for the same, not successful yet.
but for the title maybe you can try to style the div with the class "jqplot-title", that's where the title is rendered.
in jquery would be something like that:
$(".jqplot-title").wrap("<b></b>")
EDIT:
sorry i had no time to jsfiddle it, but you can try it and get the idea. looks a little awful but you can make it better.
what i did was putting labels of the slices outside the pie and draw some lines from the center to these labels.
..i came with something like this:
series: [{
renderer: $.jqplot.PieRenderer,
rendererOptions: {
diameter: 140,
showDataLabels: true,
dataLabelThreshold: 0, //minimum area to show a label, (i want all the labels)
dataLabelPositionFactor: 2.3, //in function of the radius, how far show the label
dataLabels: 'label',
dataLabelFormatString: '%s',
//(just more options, etc, etc)
plot = $.jqplot("myDivHere", [data], options).replot(); // <-- that's for me
// ******************************
// HERE COMES THE MAGIC:
//
var w = $("#myDivHere .jqplot-series-shadowCanvas").width();
var h = $("#myDivHere .jqplot-series-shadowCanvas").height();
x1 = (w/2);
y1 = (h/2);
var canvas = $("#myDivHere .jqplot-series-shadowCanvas")[0];
var context = canvas.getContext('2d');
$(".jqplot-pie-series.jqplot-data-label").each(
function(){
var l = $(this).position().left;
var t = $(this).position().top;
console.log("x1, y1 are: ["+x1+", "+y1+"]\n l, t are ["+l+", "+t+"]");
context.beginPath();
context.moveTo(x1, y1);
context.lineTo(l, t);
context.stroke();
});
I have no more time to work on this this week, so you could use it as awful it is and make it better. or wait for a better solution to show up.
Greetings!!
Ahh, and if you can make it better, please share it with me.