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
Related
I've a ChartJS pie chart, where I draw the labels myself.
This works fine - until the legend comes into play.
const options = {
layout: {
...
},
plugins: {
chartLineLabelPlugin: {
...
},
legend: {
display: true
},
}
};
Using the legend, the user can click on labels and thus hide this single data item.
The pie chart is redrawn but the afterDraw function of other plugins is never called.
How can I force to redraw the chart in a way, that the afterDraw is called clicking on legend items?
How can I identify the hidden data items?
I need legend colors in square form but its square boxes also appearing on graph which I don't need.
It is also appearing on the graph which I don't need.
You can add the below plugin to use legend symbol drawing method from pie series and set legend.symbolRadius to 0.
(function(H) {
H.seriesTypes.line.prototype.drawLegendSymbol = H.seriesTypes.pie.prototype.drawLegendSymbol;
}(Highcharts));
Highcharts.chart('container', {
legend: {
symbolRadius: 0
},
series: [...]
});
Live demo: http://jsfiddle.net/BlackLabel/0Lf2qupm/
API Reference: https://api.highcharts.com/highcharts/legend.symbolRadius
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
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/
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('')
}
I'm working on a stacked bar data chart in order to display some informations using Chart.js 2.0.2 and Angular-Chart 1.0.0.
I would like to detect when the user scroll to the end of the chart container, then add some data to the chart by keeping the ratio (height/width) of the chart.
The thing is, chart.js provides an iframe and I don't know how to add data and keep the space between bar for example. If I resize the canvas, this doesn't work. I have a basic chart with options.responsive = true, and I add data to this chart.
However, even if only the chart wrapper width changes programmatically, the height of the chart changes too. This is a strange behavior of responsiveness.
Is it another way to change only the width of the chart to keep the same space between bar chart ?
do this:
options: {
responsive: true,
maintainAspectRatio: false
};
Then you can pragmatically update the height/width as you see fit with:
chart.canvas.parentNode.style.width = '128px';
//NOTE: I'm running 2.6