ChartJS: How to get labels, legend, title to show up?
in the option add this parameter multiTooltipTemplate: “<%= datasetLabel %> – <%= value %>”
chart.js
TimeSeries scale in ChartJS 3.0.2. brings error “This method is not implemented: either no adapter can be found or an incomplete integration was …”
You need to install and import an adapter, in your case it’s moment adapter for time series npm install moment chartjs-adapter-moment –save then import it in your component: import ‘chartjs-adapter-moment’; for more info about adapters, check this
Chartjs v2.0: stacked bar chart
With v2.1.x, you can achieve this using the stacked option … options: { scales:{ xAxes: [{ stacked: true }], yAxes: [{ stacked: true }] } } … Stack Snippet var config = { type: ‘bar’, data: { labels: [“January”, “February”, “March”, “April”, “May”, “June”, “July”], datasets: [{ type: ‘line’, label: ‘Dataset 2’, data: [-65, -10, … Read more
Is it possible in chartjs to hide certain dataset legends?
Short answer: Yes it is possible. Unfortunately it’s not quite as simple as the developers could make it. If you know what the text value of the item being displayed in the legend is, then you can filter that out. After reading through the Chart.js docs I found the section Legend Label Configuration that details … Read more
How to remove square label from tooltip and make its information in one line?
Add this in your options object tooltips: { displayColors: false } Update for version 3 or greater (from @hanumanDev below): Remove ‘s’ from tooltips tooltip: { displayColors: false }
How can I hide dataset labels in Chart.js v2?
Just set the label and tooltip options like so … options: { legend: { display: false }, tooltips: { callbacks: { label: function(tooltipItem) { return tooltipItem.yLabel; } } } } Fiddle – http://jsfiddle.net/g19220r6/
Chartjs change grid line color
It is possible to either remove the grid lines or have them display in a different color. In both options.scales.xAxes and options.scales.yAxes you can add gridLines: { display: false , color: “#FFFFFF” }, (obviously you do not need to assign a colour if you are not disaplying them) var chartColors = { red: ‘rgb(255, 99, … Read more
Chart.js – Increase spacing between legend and chart
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,
Chart.js V2: Add prefix or suffix to tooltip label
In the V2.0 the tooltipTemplate option is deprecated. Instead you can use callbacks to modify the displayed tooltips. There is a sample for the usage of callbacks here and you can find the possible callbacks in the documentation under Chart.defaults.global.tooltips In your case I would do the following: window.myLine = new Chart(chart, { type: ‘line’, … Read more
Error: “category” is not a registered scale
Like the error says you are using the category scale so you will need to import and register it like so: import {CategoryScale} from ‘chart.js’; Chart.register(CategoryScale); Or you can choose to not use treeshaking and import everything like so: import Chart from ‘chart.js/auto’; For all available things you might need to import and register please … Read more