900_051_highLight_with_shapesInChart.js
Previous Chapter Previous Page Next Page Table of content
Some very special highlighting have been written. Those special highlightings have been written with the usage of the shapesInChart.js add-ins.
If you want to use them, you have to include the Add-ins/shapesInChart.js add-ins and to specify those three options :
1. highLight : true
2. highLightRerunEndFunction : true
3. onAnimationComplete : addIns_highLight
or
endDrawScaleFunction : addIns_HighLight_endDraw
Three samples are available :
http://fvancop.github.io/ChartNew.js/Samples/highLight3.html
http://fvancop.github.io/ChartNew.js/Samples/highLight4.html
http://fvancop.github.io/ChartNew.js/Samples/highLight5.html
If you specify those options without additional options, you will get a simple black arrow that points to the highlighted element in the chart. This is the default.
Playing with the highLightSet option, you can specify additional characteristics to the highLighting.
First of all, you have to define the "general" highligthing options. For instance, you can set the default value that you have for the highLighting (see https://github.com/FVANCOP/ChartNew.js/wiki/100_25_highLight#highlightset ). If you do this, the highlighting will be as defined by default with the additional black arrow.
Three different highlighting layouts have been defined through the shapesInChartjs add-ins :
The first one is the "arrow". This is the default and can be used for all chart type. With this layout, an arrow will point to the highLighted element.
The seconde one is the "ellipse". This can be used for Line, Radar, Bar, StackedBar, HorizontalBar and HorizontalStackeBar charts. With this second layout, the highlighted element will be sourrounded by an ellipse.
The Third one is the "rectangle". This can be used for Line, Bar, StackedBar, HorizontalBar and HorizontalStackeBar charts. With this third layout, the highlighted element will be sourrounded by a rectangle (for this third one, you should preferably use option endDrawScaleFunction : addIns_HighLight_endDraw so that the rectangle is displayed in the background).
You can select the layout by setting the option "addIns_shape" in the highLightSet option. Specify "arrow" or "ellipse".
Example 1 :
highLight : true,
highLightSet : { markerShape : "cross", pointStrokeColor : "red", pointDotRadius : 8, fillColor : "red", color : "red", expandOutRadius : 0.1, expandInRadius : -0.10,
addIns_shape : "ARROW", addIns_strokeColor : "red"
},
highLightRerunEndFunction : true,
onAnimationComplete : addIns_highLight,
Example 2 :
highLight : true,
highLightSet : { addIns_shape : "ELLIPSE", addIns_strokeColor : "red", addIns_fillColor : "rgba(0,0,0,0)"
},
highLightRerunEndFunction : true,
onAnimationComplete : addIns_highLight,
Example 3 :
highLight : true,
highLightSet : { addIns_shape : "RECTANGLE", addIns_strokeColor : "black", addIns_fillColor : "rgba(200,220,230,0.5)"
},
highLightRerunEndFunction : true,
endDrawScaleFunction : addIns_HighLight_endDraw,
Without any additional option, the arrow or the ellipse will be displayed with the default options associated to this shape in the shapesInChart.js add-ins. If you want to change any of the default option associated to a shape, you have to specify the option "addIns_".
Example : if you want to change the strokeColor of the ellipse, you have to specify the option addIns_strokeColor into the highLightSet option.