-
Notifications
You must be signed in to change notification settings - Fork 143
100_020_Annotations
Previous Chapter Previous Page Next Page Next Chapter Table of content
If you want more information to be displayed when the mouse is hovered over a part of the chart, use the options described in this chapter.
REMARK : this option is not working correctly on all devices. On some devices, the charts are not displayed at all when these options are activated.
If you set the option “annotateDisplay” to true, the annotations will be activated with their default values.
- annotateBackgroundColor
- annotateBarMinimumDetectionHeight
- annotateBorder
- annotateBorderRadius
- annotateClassName
- annotateDisplay
- annotateFunctionIn
- annotateFunctionOut
- annotateFontColor
- annotateFontFamily
- annotateFontSize
- annotateFontStyle
- annotateFunction
- annotateLabel
- annotatePadding
- annotateRelocate
- detectAnnotateOnFullLine
- pointHitDetectionRadius
Description : background color of the annotations
Chart types : All
Values : any color
Default value : 'rgba(0,0,0,0.8)'
Sample : annotateBackgroundColor : 'rgba(0,0,0,0.8)'
See also :
Description : by default, when you pass hover a zero value on a bar, annotation is not displayed because the height to the area for the mouse is zero point. You can force a minimum height for the detection area with option annotateBarMinimumDetectionHeight.
Chart types : Bar, StackedBar, HorizontalBar, HorizontalStackedBar
Values : any positive value
Default value : 0
Sample : annotateBarMinimumDetectionHeight : 10
See also :
##annotateBorder
Description : specify the border style of the annotations.
Chart types : All
Values : see http://www.w3schools.com/jsref/prop_style_border.asp
Default value : ‘none’
Sample : annotateBorder: 'thick dotted red'
See also :
Description : use this option to round the corner of the annotations
Chart types : All
Values : a pixel value (0px <=> no rounding)
Default value : ‘2px’
Sample : annotateBorderRadius : ‘2px’
See also :
Description : through several options, you can define the layout of the annotation; If you prefer, you can define the layout through a CSS description; If you want to proceed so, define the name of the CSS in option annotateClassName.
Chart types : All
Values : a CSS name
Default value : “”
Sample :
<style type="text/css">
.tooltip {
position: absolute;
z-index: 999;
left: -9999px;
word-wrap: break-word;
max-width: 350px;
padding: 0 0.2em;
color: #333;
background: #fff;
border: 1px solid #aaa;
border-radius: 4px 4px 4px 4px;
box-shadow: 1px 2px 4px rgba(0,0,0,0.2), 0 0px 10px rgba(0,0,0,0.05) inset;
}
</style>
(…)
annotateClassName : "tooltip"
See also :
Description : set this option to true if you want to activate the annotations.
Chart types : All
Values : true or false or an array or a function
Default value : false
Sample : annotateDisplay : true
See also :
Description : associate a function to this option if you want to execute a javascript when the mouse enters an annotate area. Prerequiste : annotateDisplay must be set to true Tip : if you want to associate a function to annotateFunctionIn but don't want to display an annotate, set following options : annotateDisplay : true, annotateLabel : "", annotateBackgroundColor : "rgba(0,0,0,0)",
Chart types : All
Values : a function
Default value : null
Sample : annotateFunctionIn : myFctIn
function myFctIn(area,ctx,data,statdata,posi,posj,othervars) {
window.alert("IN of (" + posi+","+posj+")");
};
See also : annotateFunctionOut - See example in Samples\annotateFunction.html
Description : associate a function to this option if you want to execute a javascript when the mouse leaves an annotate area. Prerequiste : annotateDisplay must be set to true Tip : if you want to associate a function to annotateFunctionOut but don't want to display an annotate, set following options : annotateDisplay : true, annotateLabel : "", annotateBackgroundColor : "rgba(0,0,0,0)",
Chart types : All
Values : a function
Default value : null
Sample : annotateFunctionOut : myFctOut
function myFctOut(area,ctx,data,statdata,posi,posj,othervars) {
window.alert("Out of (" + posi+","+posj+")");
};
See also : annotateFunctionIn - See example in Samples\annotateFunction.html
Description : Font color of the annotations.
Chart types : All
Values : any color
Default value : ‘white’
Sample : annotateFontColor : "white"
See also :
Description : font of the annotations
Chart types : All
Values : any available font (see chapter “Font Family”)
Default value : “’Arial’”
Sample : annotateFontFamily : “’Arial’”
See also :
Description : size of the annotations font
Chart types : All
Values : any positive value
Default value : 4
Sample : annotateFontSize : 4
See also :
Description : style of the font in the annotations
Chart types : All
Values : any available font style(see chapter “Font Style”)
Default value : “normal”
Sample : annotateFontStyle : “normal”
See also :
Description : By default, the annotations appears the the mouse is hover a part of the chart. If you prefer that the annotation appears when another action is performed with the mouse (for instance a right click), specify the function here.
Chart types : All
Values : any mouse action (see chapter “Mouse Actions”)
Default value : “mousemove”
Sample : annotateFunction : “mousemove”
See also :
Description : the text displayed in the annotation can be fully specified by the user through a template description that uses available variables. Template usage is described in chapter “Templates”; Available variables are described in chapter “Template variables”;
Chart types : All
Values : a template text description (see chapter “Templates”).
Default value : The default value is different for all chart type… Try and adapt if you want
Sample : annotateLabel : '<%=v3%>'
See also :
Description : padding of the text in the annotations (<=> space between the border of the annotation and the text in the annotation)
Chart types : All
Values : see http://www.w3schools.com/jsref/prop_style_padding.asp
Default value : ‘3px’
Sample : annotatePadding : ‘3px 10px 20px 30px’
See also :
Description : Relocate the annotation if it exceeds the browser window.
Chart types : All
Values : true or false
Default value : false
Sample : annotateRelocate: true
See also :
Description : For Line, Bubbles and Radar chart, you have to set the mouse around a point to display the annotation. If you prefer that the annotate is displayed when the mouse is on the "X-Axis" line, change option detectAnnotateOnFullLine to true (default value is false).
Chart types : Line, Bubbles, & Radar
Values : true or false
Default value : false
Sample : detectAnnotateOnFullLine : true
See also : Samples/issue211.html
Description : For Line, Bubbles and Radar chart, you have to set the mouse around a point to display the annotation. The "pointHitDetectionRadius" option defines the radius (in pixels) around the points that determines the selection area. For Bubbles, this value is the minimum value of the radius around the points that determines the selection area.
Chart types : Line, Bubbles & Radar
Values : any positive integer
Default value : 10
Sample : pointHitDetectionRadius : 20
See also :
Previous Chapter Previous Page Next Page Next Chapter Top of Page