calloutFilledStyle Field

A value that indicates the style to use in rendering the callout (the small triangle that points from the main hint box to the bubble it describes). In order for this attribute of the callout to take effect, you must also set the calloutFilled attribute to true. Otherwise, it takes on the colors of the style attribute of the hint. For more information on the available style parameters, see the Style Options topic.

Default: {fill: "#000"}

Type: Object

Syntax

Javascript (Usage)
Javascript (Specification)

var instance; // Type: wijmo.chart.chart_hint;
var value; // Type: any
value = instance.calloutFilledStyle;

var calloutFilledStyle : any;

Example

This example sets the calloutFilled attribute of the hint to true, sets the fill and outline colors of the calloutFilledStyle to red, and sets the style of the hint to purple with a blue outline so that you can easily see the different elements.

Javascript

<script type="text/javascript">
$(document).ready(function () {
    $("#wijbubblechart").wijbubblechart({
        axis: {
            y: {text: "Number of Products"},
            x: {text: "Sales", annoFormatString: "C0"}
        },
        hint: {
            calloutFilled: true,
            calloutFilledStyle: {fill: "red", stroke: "red"},
            style: {fill: "purple", "stroke-width": "2", stroke: "blue"},
            content: function(){
                return this.data.label + '\n' + 
                Globalize.format(this.y1, "p0") + ' ';
            }
        },
        legend: {visible: false},
        seriesList: [
        {
            label: "Company A Market Share",
            data: { y: [14], x: [12200], y1: [.15] }
        }, {
            label: "Company B Market Share",
            data: { y: [20], x: [60000], y1: [.23] }
        }, {
            label: "Company C Market Share",
            data: { y: [18], x: [24400], y1: [.1] }
        }]
    });
});
</script>

Remarks

The style object is defined in RaphaelJS, in the attr method’s parameters. Here is an external link to the documentation: http://raphaeljs.com/reference.html#Element.attr

Reference

chart_hint Interface