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('')
}
Related
I have a requirement where I need to change series array completely in the chart,
I have 2 legends in my chart, I wish to load a chart with one disabled legend, that's working fine,
now when the user clicks on the disabled legend corresponding data should be added automatically to the chart,
I tried same with chart.series.addSeries(), but that is giving different issues, as the new data which is to be added is not only after the first legend but it's in between those legends
chart
For eg: chart loads, with just grey legends, orange is hidden or is not added at all, on clicking on the orange colour legend I want to add this data to that chart, Please check the chart in the image
is there any way to replace series array completely.
Something like
chart.update({
series:newSeriesArray
});
I am using the bar chart from highchart.
Thanks in advance.
I have 2 legends in my chart
Do you have a separate legend for each series or do you mean legend item for each series?
Highcharts provide a possibility to set data to particular series - series.setData() method. So when a chart is initialized you can create empty series (series with name, color etc but without data array) with property visible: false, then your series will be hidden and legend item disabled:
{
name: 'Year 2016',
data: [],
visible: false
}
When user clicks legend item plotOptions.series.events.legendItemClick function will be invoked (if defined). In this function, you can set data to this particular series using series.setData() as mentioned above:
plotOptions: {
bar: {
events: {
legendItemClick: function() {
if (!this.data.length) {
this.setData([665, 234, 2344, 123, 23])
}
}
}
}
}
Demo:
https://jsfiddle.net/wchmiel/uLfcknsb/
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/
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 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 want to implement some text in middle of the Doughnut chart at Charts.js
The first step is 5to draw some text on the chart canvas.
When i move my cursor to red bar chartjs draw some tooltip(Red:300) on the canvas and deletes my text as a result.
How can i avoid all the canvas redraws by the chartjs after the initial chart is drawn?
You can turn off tooltips (and the associated redraw) by using the showTooltips option
var myPieChart = new Chart(ctx).Doughnut(data, {
showTooltips: false
});
For chart.js v2, the new way to do it is to pass an empty events array to the options.
your options:
let chartOptions = {
responsive: true,
events: [],
...
};
http://www.chartjs.org/docs/#chart-configuration-common-chart-configuration