Develop Reference

How to display percentages in pie chart (ChartJS)

I am in the development of some graphs with the help of the Chart.js library and among them I am making use of a pie chart or better known with Pie Chart and I am looking for some way to add their respective percentages on the graph as well as the image that I add as an example at the end of the snippet.
Currently the graph is shown but I cannot show their respective percentages.
const pieData = [
{
value: 72,
color: "#4EADEB",
// highlight: "#FF5A5E",
label: "Avance"
},
{
value: 28,
color: "#3F86CB",
//highlight: "#5AD3D1",
label: "Pendiente"
}
];
const pieOptions = {
//Boolean - Whether we should show a stroke on each segment
segmentShowStroke: true,
//String - The colour of each segment stroke
segmentStrokeColor: "#fff",
//Number - The width of each segment stroke
segmentStrokeWidth: 2,
//Number - The percentage of the chart that we cut out of the middle
percentageInnerCutout: 0, // This is 0 for Pie charts
//Number - Amount of animation steps
animationSteps: 100,
//String - Animation easing effect
animationEasing: "easeOutBounce",
//Boolean - Whether we animate the rotation of the Doughnut
animateRotate: true,
//Boolean - Whether we animate scaling the Doughnut from the centre
animateScale: false,
//String - A legend template
legendTemplate:
'<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<segments.length; i++){%><li><span style="background-color:<%=segments[i].fillColor%>"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>'
};
const pieCtx = document.getElementById("myPieGraph").getContext("2d");
const myPieChart = new Chart(pieCtx).Pie(pieData, pieOptions);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.js"></script>
<canvas id="myPieGraph" height="120" width="240"></canvas>
Example Image:
Note:
Before the question closes for possible duplication, in this question it seeks to add the percentages but the version they use here is 0.4.0, the version that I am using of ChartJS is 1.1.1.
The use of its properties are different.

how to rotate line in fabricjs by clicking any point to select/drag?

I have a line with one end at a fixed point that can be rotated or stretched by the user.
jsfiddle here
It seems that in fabricJS the only way to select a line/object for rotation is the little selection box in the middle. Also, a line is narrow so it is hard to select. Typically one must drag a rectangular selection box across the line to select it, then grab the unlabeled rotation box.
I want to simplify this to: click anywhere on the line and drag to rotate.
ideas?
thx.
code snippet:
var canvas = new fabric.Canvas("c", {stateful: true});
var line1 = new fabric.Line([ 100, 200, 330, 200 ], {
fill: 'red',
stroke: 'red',
strokeWidth: 3,
selectable: true,
evented: false,
minScaleLimit: 0.25,
lockRotation: false,
centeredRotation: false,
centeredScaling: false,
originX: "left", // origin of rotation/transformation.
originY: "bottom", // origin of rotation/transformation.
lockMovementX: true,
lockMovementY: true,
lockScalingFlip: true,
lockScalingX: false,
lockScalingY: false,
lockSkewingX: false,
lockSkewingY: false,
lockUniScaling: true
});

Here's one way to do what you need.
The idea is that on each scale event, we're going to rotate the line using fabric's internal fabric.canvas._rotateObject(), supplying it with current pointer's position. Then, immediately adjust the length of line to match the scale and reset the line's scale to 1.
This would be it, but while your example is relatively easy to do (the line is horizontal), it gets much trickier if you want to initialize a diagonal line. Imagine a line with [0, 0, 100, 100] as coordinates. This would render a rectangular 100x100 bounding box. You'd be able to rotate the line but the huge bounding box is obviously not something you want.
Because of that, we need to initialize the line as if it was rotated back to a horizontal position, then set an angle that it's supposed to have. To do that, we extend the built-in fabric.Line class and modify the constructor to make the calculations. And, since we already have new class, we're going to add the scale handler and default options into it as well. The constructor signature stays the same - new fabric.RotatingLine([x1, y1, x2, y2], options), where x1, y1 - fixed point, x2, y2 - draggable tip.
Lastly, we're changing some of the properties. E.g. evented: false was the reason you couldn't select the line on click.
Below is the snippet with more comments, just in case.
const canvas = new fabric.Canvas("c", {stateful: true})
fabric.RotatingLine = fabric.util.createClass(fabric.Line, {
minLength: 50, // we need to set this thing in px now
initialize: function (points, options) {
const a = new fabric.Point(points[0], points[1])
const b = new fabric.Point(points[2], points[3])
// find this line's vector
const vectorB = b.subtract(a)
// find angle between line's vector and x axis
let angleRad = Math.atan2(vectorB.y, vectorB.x)
if (angleRad < 0) {
angleRad = 2 * Math.PI + angleRad
}
const angleDeg = fabric.util.radiansToDegrees(angleRad)
// find initial horizontal position by rotating the tip back
const c = fabric.util.rotatePoint(b.clone(), a, -angleRad)
options = options || {}
// finally, initialize using transform points to make a horizontal line
this.callSuper('initialize', [a.x, a.y, c.x, c.y], {
noScaleCache: false, // false to force cache update while scaling (doesn't redraw parts of line otherwise)
selectable: true,
evented: true, // true because you want to select line on click
//minScaleLimit: 0.25, // has no effect now because we're resetting scale on each scale event
lockRotation: false,
hasRotatingPoint: false, // to disable rotation control
centeredRotation: false,
centeredScaling: false,
originX: "left", // origin of rotation/transformation.
originY: "bottom", // origin of rotation/transformation.
lockMovementX: true,
lockMovementY: true,
lockScalingFlip: true,
lockScalingX: false,
lockScalingY: false,
lockSkewingX: false,
lockSkewingY: false,
lockUniScaling: true,
...options,
angle: angleDeg // note that we use the calculated angle no matter what
})
this.setControlsVisibility({
tr: false,
tl: false,
bl: false,
mt: false, // middle top disable
mb: false, // midle bottom
ml: false, // middle left
mr: false, // I think you get it
})
this.on('scaling', function (e) {
// rotate to the pointer's x,y
this.canvas._rotateObject(e.pointer.x, e.pointer.y)
// while _rotateObject() tries to keep left/top at initial value,
// it sometimes fails because of rounding errors (?)
// so we need to do it manually again
this.set({left: this.x1, top: this.y1})
// calculate new length before resetting scale
const xOffset = (this.x2 - this.x1) * this.scaleX
const newLength = Math.max(this.minLength, xOffset)
// reset scaleX/scaleY and set new x coord for the tip point
this.set({
scaleX: 1,
scaleY: 1,
x2: this.x1 + newLength
})
})
}
})
const line1 = new fabric.RotatingLine([ 200, 200, 330, 200 ], {
fill: 'red',
stroke: 'red',
strokeWidth: 3,
});
const line2 = new fabric.RotatingLine([ 200, 200, 100, 100 ], {
fill: 'blue',
stroke: 'blue',
strokeWidth: 3,
});
canvas.add(line1, line2)
// Disables group selection.
canvas.on('selection:created', (e) => {
if(e.target.type === 'activeSelection') {
canvas.discardActiveObject();
} else {
//do nothing
}
})
// Keeps objects inside canvas. undos move/rotate/scale out of canvas.
canvas.on('object:modified', function (options) {
let obj = options.target;
let boundingRect = obj.getBoundingRect(true);
if (boundingRect.left < 0
|| boundingRect.top < 0
|| boundingRect.left + boundingRect.width > canvas.getWidth()
|| boundingRect.top + boundingRect.height > canvas.getHeight()) {
obj.top = obj._stateProperties.top;
obj.left = obj._stateProperties.left;
obj.angle = obj._stateProperties.angle;
obj.scaleX = obj._stateProperties.scaleX;
obj.scaleY = obj._stateProperties.scaleY;
obj.setCoords();
obj.saveState();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.min.js"></script>
<canvas id='c' width="500" height="400"></canvas>

Edit tooltips in ChartJS

I have some troubles with customization of chartjs tooltips.
var animationComplete = function () {
var self = this;
Chart.helpers.each(self.datasets[0].points, function (point, index) {
Chart.helpers.each(self.datasets, function (dataset) {
new Chart.MultiTooltip({
x: point.x,
y: dataset.points[index].y,
xPadding: self.options.tooltipXPadding,
yPadding: self.options.tooltipYPadding,
xOffset: self.options.tooltipXOffset,
//yOffset: self.options.tooltipYOffset,
fillColor: self.options.tooltipFillColor,
textColor: self.options.tooltipFontColor,
fontFamily: self.options.tooltipFontFamily,
fontStyle: self.options.tooltipFontStyle,
fontSize: self.options.tooltipFontSize,
titleTextColor: self.options.tooltipTitleFontColor,
titleFontFamily: self.options.tooltipTitleFontFamily,
titleFontStyle: self.options.tooltipTitleFontStyle,
titleFontSize: self.options.tooltipTitleFontSize,
cornerRadius: self.options.tooltipCornerRadius,
labels: [dataset.points[index].value],
legendColors: [{
fill: dataset.strokeColor,
stroke: dataset.strokeColor
}],
legendColorBackground: self.options.multiTooltipKeyBackground,
//title: point.label,
//title: false,
title: '',
chart: self.chart,
ctx: self.chart.ctx,
custom: self.options.customTooltips
}).draw()
});
self.chart.ctx.font = Chart.helpers.fontString(self.fontSize, self.fontStyle, self.fontFamily)
self.chart.ctx.textAlign = 'center';
self.chart.ctx.textBaseline = "middle";
self.chart.ctx.fillStyle = "#666";
self.chart.ctx.fillText(point.label, point.x, self.scale.startPoint);
});
};
var ctx = document.getElementById("weeksChart").getContext("2d");
window.weeksChart = new Chart(ctx).Line(dataWeeks, {
responsive: true,
pointDot: true,
datasetStrokeWidth: 0.5,
bezierCurve : false,
scaleSteps: 2,
scaleLabel: "<%=value + '°'%>",
//tooltipTemplate: "<%= value %>",
tooltipTemplate: "<%= value + '°'%>",
tooltipFillColor: "transparent",
tooltipFontColor: "#000",
tooltipFontSize: 14,
tooltipXOffset: -10,
//tooltipYOffset: -100,
//tooltipYOffset: 100,
tooltipYPadding: 0,
showTooltips: true,
scaleShowLabels: false,
scaleFontColor: "transparent",
onAnimationComplete: function () {
animationComplete.apply(this)
},
tooltipEvents: []
});
Is it possible:
to remove colored squares?;
to change fontColor of numbers, so on blue line numbers will have blue font, and on red line numbers will be red?;
to move numbers higher on Y-axis? (i'd tried to add/change lines 30,78,79 in my Fiddle, but nothing works);
to remove Titles from tooltips? (everything what is works for me right now is to set title: '', on line 49. Line 48 doesn't work);
to add ° symbol right after number? (I tried to make like this -> tooltipTemplate: "<%= value + '°'%>", but it doesn't work...)
Here is my Fiddle

1.to remove colored squares?;
2.to change fontColor of numbers, so on blue line numbers will have blue font, and on red line numbers will be red?;
4.to remove Titles from tooltips? (everything what is works for me right now is to set title: '', on line 49. Line 48 doesn't work);
5.to add ° symbol right after number? (I tried to make like this -> tooltipTemplate: "<%= value + '°'%>", but it doesn't work...)
All of these can be done by just switching from the MultiTooltip constructor to a (single series) Tooltip constructor (the single series tooltip doesn't have a colored square or a title) and adjusting the options textColor and text like so
new Chart.Tooltip({
x: point.x,
y: dataset.points[index].y,
xPadding: self.options.tooltipXPadding,
yPadding: self.options.tooltipYPadding,
fillColor: self.options.tooltipFillColor,
textColor: dataset.strokeColor,
fontFamily: self.options.tooltipFontFamily,
fontStyle: self.options.tooltipFontStyle,
fontSize: self.options.tooltipFontSize,
caretHeight: self.options.tooltipCaretSize,
cornerRadius: self.options.tooltipCornerRadius,
cornerRadius: self.options.tooltipCornerRadius,
text: dataset.points[index].value + '°',
chart: self.chart,
custom: self.options.customTooltips
}).draw()
3.to move numbers higher on Y-axis? (i'd tried to add/change lines 30,78,79 in my Fiddle, but nothing works);
I assume you mean the x axis labels that are on the top (I couldn't see lines 78 and 79 on your fiddle, and 30 seemed unrelated).
If it's a slight change you could do it easily by adjusting the y parameter in the line that writes out the label.
self.chart.ctx.fillText(point.label, point.x, self.scale.startPoint - 2);
However, if you want to move it up a lot further, you need to make some space on the top of the chart or the top of your labels will be clipped off. You can do this by extending the chart and overriding scale.startPoint in the draw function.
So
Chart.types.Line.extend({
name: "LineAlt",
draw: function (data) {
this.scale.startPoint = 25;
Chart.types.Line.prototype.draw.apply(this, arguments);
}
});
and then using LineAlt instead of Line
window.weeksChart = new Chart(ctx).LineAlt(dataWeeks, {
will allow you to do
self.chart.ctx.fillText(point.label, point.x, self.scale.startPoint - 12);
without clipping off the label
Fiddle - http://jsfiddle.net/kphmkL0e/

Chart JS custom tooltip option?

I am trying to build chart using Chart.Js. This chart.js has default option for tooltip, I want to make customized tooltip option. Is there a way to make it possible?
Here is my code
var chart = null;
barChart: function (data1, data2, data3, label) {
var data = {
labels: label,
datasets: [
{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: data1
},
{
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,0.8)",
highlightFill: "rgba(151,187,205,0.75)",
highlightStroke: "rgba(151,187,205,1)",
data: data2
},
{
fillColor: "rgba(0,255,0,0.3)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(0,255,0,0.3)",
data: data3
},
]
}
var cht = document.getElementById('exampleCanvas');
var ctx = cht.getContext('2d');
if (chart)
chart.destroy();
chart = new Chart(ctx).Bar(data);
}

Try this:
You can make changes globally using this code:
Chart.defaults.global = {
// Boolean - Determines whether to draw tooltips on the canvas or not
showTooltips: true,
// Array - Array of string names to attach tooltip events
tooltipEvents: ["mousemove", "touchstart", "touchmove"],
// String - Tooltip background colour
tooltipFillColor: "rgba(0,0,0,0.8)",
// String - Tooltip label font declaration for the scale label
tooltipFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
// Number - Tooltip label font size in pixels
tooltipFontSize: 14,
// String - Tooltip font weight style
tooltipFontStyle: "normal",
// String - Tooltip label font colour
tooltipFontColor: "#fff",
// String - Tooltip title font declaration for the scale label
tooltipTitleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
// Number - Tooltip title font size in pixels
tooltipTitleFontSize: 14,
// String - Tooltip title font weight style
tooltipTitleFontStyle: "bold",
// String - Tooltip title font colour
tooltipTitleFontColor: "#fff",
// Number - pixel width of padding around tooltip text
tooltipYPadding: 6,
// Number - pixel width of padding around tooltip text
tooltipXPadding: 6,
// Number - Size of the caret on the tooltip
tooltipCaretSize: 8,
// Number - Pixel radius of the tooltip border
tooltipCornerRadius: 6,
// Number - Pixel offset from point x to tooltip edge
tooltipXOffset: 10,
// String - Template string for single tooltips
tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>",
// String - Template string for single tooltips
multiTooltipTemplate: "<%= value %>",
// Function - Will fire on animation progression.
onAnimationProgress: function(){},
// Function - Will fire on animation completion.
onAnimationComplete: function(){}
}
Use this Link for reference

The new version of chart.js, version 2, is found here:
https://github.com/nnnick/Chart.js/releases
Version 2 adds tooltip callbacks:
Every tooltip callback (beforeTitle, title, afterTitle, etc..) accepts a string or an array. If an array is used, it will produce multiple lines. Tooltips now come with a lot more options for visual customization as well.
However, there is a fork of chart.js called chartNew.js, found here:
https://github.com/FVANCOP/ChartNew.js/
It adds several great enhancements to the venerable chart.js, including:
tooltip functions (when download/unzip, look in the Samples folder and look at annotateFunction.html. When hover over any point, you can do anything.)
passing an array of colors to a bar chart (instead of each bar in series having the same color)
putting text on the chart wherever you want it
many etceteras.
Note that chart.js has been greatly enhanced in version 2, but the new version is not fully backwards compatible (just changing to the v2 plugin broke my existing code) whereas chartNew.js will work with old code whilst extending capabilities.

I have used this, i've found it on stackoverflow, but i try hardly to find it again
<div id="chartjs-tooltip"></div>
var chartoptions =
{
customTooltips: function ( tooltip )
{
var tooltipEl = $( "#chartjs-tooltip" );
if ( !tooltip )
{
tooltipEl.css( {
opacity: 0
} );
return;
}
tooltipEl.removeClass( 'above below' );
tooltipEl.addClass( tooltip.yAlign );
// split out the label and value and make your own tooltip here
var parts = tooltip.text.split( ":" );
var innerHtml = '<span>' + parts[0].trim() + '</span> : <span><b>' + parts[1].trim() + '</b></span>';
tooltipEl.html( innerHtml );
tooltipEl.css( {
opacity: 1,
left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px',
top: tooltip.chart.canvas.offsetTop + tooltip.y + 'px',
fontFamily: tooltip.fontFamily,
fontSize: tooltip.fontSize,
fontStyle: tooltip.fontStyle
} );
}
}
Link to where i got it: Chart.js: changing tooltip template

You can check for tooltip css - http://www.chartjs.org/docs/#chart-configuration-tooltip-configuration
tooltips:
{
bodyFontColor: "#000000", //#000000
bodyFontSize: 50,
bodyFontStyle: "bold",
bodyFontColor: '#FFFFFF',
bodyFontFamily: "'Helvetica', 'Arial', sans-serif",
footerFontSize: 50,
callbacks: {
label: function(tooltipItem, data) {
var value = data.datasets[0].data[tooltipItem.index];
if(tooltipItem.index == 0) {
return "<?php echo $data1;?>";
}
else if(tooltipItem.index == 1) {
return "<?php echo $data2;?>";
}
else if(tooltipItem.index == 2) {
return "<?php echo $data3;?>";
}
else {
return "<?php echo $data4; ?>";
}
},
},
},

It is very simple when you know where to put the option.
The answer is to add the custom option when you create the chart :
chart = new Chart(ctx).Bar(data, {"options goes here"} );
After you pass the data variable with the data info you can add custom options, so for example you want to change the size of the Title of the tooltip and you also want to put a light grey color in the title of the tooltip you would do something like that:
chart = new Chart(ctx).Bar(data, {
//Option for title font size in pixels
tooltipTitleFontSize: 14,
//Option for tooltip title color
tooltipTitleFontColor: "#eee"
});
Another way you can do is to create the set of options as a variable for organisation purposes and to be able to reuse it.
// Create a set of relevant options for you chart
var myoptions = {
scaleShowGridLines : false,
responsive : true,
scaleFontSize: 12,
pointDotRadius : 4,
scaleFontStyle: 14,
scaleLabel: "<%= ' ' + value%> %",
}
//Create the Chart
chart = new Chart(ctx).Bar(data, myoptions);
I hope it is clear now
Regards

I found this page to be helpful:
https://github.com/nnnick/Chart.js/blob/master/samples/pie-customTooltips.html
He shows where and how to define the function for your custom tooltip, as well as an example of the styling.
I had to modify the code to match my needs, but this is a great example on how to implement the custom tooltip feature.
Some things to note that threw me off at first:
1) The id in the style rules need to be modified to match your tooltip div. (this is obvious, but I didn't catch it at first)
2) tooltip.text will follow the format you set for 'tooltipTemplate' in your options, or the default tooltipTemplate set in chart.js

may be this can help you
Chart.types.Line.extend({
name: "LineAlt",
initialize: function (data) {
Chart.types.Line.prototype.initialize.apply(this, arguments);
var xLabels = this.scale.xLabels
xLabels.forEach(function (label, i) {
if (i % 2 == 1)
xLabels[i] = label.substring(1, 4);
})
}
});
var data = {
labels: ["1/jan/08", "15/fab/08", "1/mar/08", "1/apr/08", "10/apr/08", "10/may/2008", "1/jun/2008"],
datasets: [{
label: "First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,20,20,1)",
pointColor: "rgba(220,20,20,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 90]
}, {
label: "Third dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(15,187,25,1)",
pointColor: "rgba(15,187,25,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [38, 55, 50, 65, 35, 67, 54]
}]
};
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx).LineAlt(data);
// Chart.js replaces the base inRange function for Line points with a function that checks only the x coordinate
// we replace it with the original inRange fucntion (one that checks both x and y coordinates)
myChart.datasets.forEach(function(dataset) {
dataset.points.forEach(function(point) {
point.inRange = Chart.Point.prototype.inRange;
});
});
// Chart.js shows a multiTooltip based on the index if it detects that there are more than one datasets
// we override it to show a single tooltip for the inRange element
myChart.showTooltip = function(ChartElements, forceRedraw) {
// this clears out the existing canvas - the actual Chart.js library code is a bit more optimized with checks for whether active points have changed, etc.
this.draw();
// draw tooltip for active elements (if there is one)
Chart.helpers.each(ChartElements, function(Element) {
var tooltipPosition = Element.tooltipPosition();
new Chart.Tooltip({
x: Math.round(tooltipPosition.x),
y: Math.round(tooltipPosition.y),
xPadding: this.options.tooltipXPadding,
yPadding: this.options.tooltipYPadding,
fillColor: this.options.tooltipFillColor,
textColor: this.options.tooltipFontColor,
fontFamily: this.options.tooltipFontFamily,
fontStyle: this.options.tooltipFontStyle,
fontSize: this.options.tooltipFontSize,
caretHeight: this.options.tooltipCaretSize,
cornerRadius: this.options.tooltipCornerRadius,
text: Chart.helpers.template(this.options.tooltipTemplate, Element),
chart: this.chart,
custom: this.options.customTooltips
}).draw();
}, this);
};
http://jsfiddle.net/6cgo4opg/747/

Disbable rest of the page when progress loading is running....!

I am new to Javascript
I have written simple javascript to show progress using animated gif.
Problem is though it is working fine , I can able to click on the form below that gif image.
Can anyone guide me..??
my js function is
function search()
{
/* doOverlayOpen('dvLoading', 470); */
var opts = {
lines: 17, // The number of lines to draw
length: 10, // The length of each line
width: 4, // The line thickness
radius: 21, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 13, // The rotation offset
color: '#000', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: 'auto', // Top position relative to parent in px
left: 'auto' // Left position relative to parent in px
};
var target = document.getElementById('myDiv');
var spinner = new Spinner(opts).spin(target);
...Some code.....!!!!!
}