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?
I assume you are using chart.js. If yes, you can use custom HTML legends and apply style rules to them. Start your chart with the normal legends hidden and apply the generateLegend() method to a custom div.
var customChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
legend: {
//Because you are going to show your own legend
display: false
}
}
});
//insert legend to any div of your liking and manipulate via CSS
document.getElementById("custom-legend").innerHTML = customChart.generateLegend()
Documentation: http://www.chartjs.org/docs/latest/configuration/legend.html#html-legends
Fiddle example: https://jsfiddle.net/gmyy3rf5/
Related
So in version 1 of chart.js we could use legendTemplates to format and style where and how the labels of a chart showed up. However since switching to v2 I cannot seem to find an equivilant. See my example below of a pie chart with the labels way to condensed.
Ideally I would be able use some form option to move, spread out or otherwise style these labels.
Here is an example of the old legend template I used
legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend text-center\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label.capitalizeFirstLetter()%><%}%></li><%}%></ul>"
You can configure the legend using the config options section, as explained here:
http://www.chartjs.org/docs/latest/configuration/legend.html
Example:
var chartInstance = new Chart(ctx, {
type: 'pie',
data: data,
options: {
legend: {
position: 'left',
labels: {
boxWidth: 15,
padding: 20
}
}
}
})
This code will move the legend to the left side of the chart, will make the colored boxes smaller, and will increase the amount of whitespace between the legend items.
Working JSFiddle: https://jsfiddle.net/o81qqrLn/1/
You can view a full list of configurable legend and label options is the documentation linked above.
I'm using the Angular-ChartJs wrapper to create a doughnut chart. I'm able to align the legend at the right top using this options:
legend: {
display: true,
position: 'right',
fullWidth:true
}
On the left image you can see how it is and on the right picture you can see how it should be. (the right image is not totally correct aligned but you get what I mean)
Is there a way to create a custom legend with the data of the chart and align that legend 'right center' to the chart?
The answer is 'options['legendCallback']'
I pass the chart options to the canvas using the element attribute 'chart-options="$ctrl.options"'
disable legend in chart options '$ctrl.options['legend']['enabled'] = false'
create your own legend using '$ctrl.options['legendCallback']'
Example:
$ctrl.options['legendCallback'] = function(chart) {
const text = []
text.push('<div class="rr-doughnut-chart-legend">')
// use dynamic legend id to handle multiple charts at once on one page
text.push('<ul class="' + chart.id + '-legend">')
// INSERT YOUR CUSTOM LEGEND HERE (perhaps generated automatically with chart object)
text.push('</ul>')
text.push('</div>')
return text.join('')
}
Following this demo here (http://www.highcharts.com/docs/chart-and-series-types/combining-chart-types) I am trying to have a Pie chart and a bar chart on the same page.
The catch is I would like the Pie chart to be large on the left and then the bar chart on the right. I see the code to move the pie chart around, but I cannot figure out how to do the same with the bar chart, as it seems to want to span the entire container width. I understand that I could have two independent charts and place them in their own floating DIVs, but since the combining of charts is possible, I thought this would be a viable option.
You can set chart.marginLeft to half of the chart width. And set pie.center x coordinate to a negative value.
chart: {
marginLeft: 400
},
series: [{
center: ['-75%', '50%'],
example: http://jsfiddle.net/L55w9n53/
I found many answers how to hide every nth label and yet still be able to show it in the tooltip. But there's a catch. If the label is very long, then the chart would be drawn somehow squished to the top of the canvas. It's logical. But is there any way to hide the labels, still show them in the tooltips and yet ignore them while calculating the y-values? So that the line can be drawn from top to bottom of the canvas?
Thank you for any advice!!
You can extend the line chart to do this. Adapted from Hide labels on x-axis ChartJS (which was for bar charts) with some unneeded code removed.
What we do is pretty simple, we first set the labels array to blanks, allow the initialization to happen and finally loop through the points for the (first) dataset and set the labels to the original labels.
Chart.types.Line.extend({
name: "LineAlt",
initialize: function(data){
var originalLabels = data.labels;
data.labels = data.labels.map(function() { return '' });
Chart.types.Line.prototype.initialize.apply(this, arguments);
this.datasets[0].points.forEach(function(bar, i) {
bar.label = originalLabels[i];
});
}
});
It's enough that you set the labels for the first dataset even if you have multiple datasets - when building a multiTooltip, the label is picked from the first dataset.
Fiddle - http://jsfiddle.net/xjchy2dn/
I am having an issue with a pie chart I created in highcharts.
Depending on the placement of the data labels the actual chart will grow or shrink.
We need the pie chart to stay the same size so is there a way to keep the pie size constant and force the labels to fit around it or do I just have to place the labels inside each slice?
You will have to set a fixed size for the pie chart. Can be a percentage or a pixel value. For example:
plotOptions: {
pie: {
size: 100
}
},
See this fiddle from the API http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/pie-size/