Wijmo UI for the Web
Add Annotations
Wijmo User Guide > Widgets > Chart Widgets > CompositeChart > CompositeChart How To > Add Annotations

Annotations are used to mark important news or events that can be attached to a specific data point on a chart. Users can hover over the event to display the full annotation text. Wijcompositechart annotation lets a user add different types of annotations on the chart, including text, shapes, images. There are various built-in shapes which are supported as annotations in wijmo charts, such as circle, ellipse, image, line, polygon, rectangle, square and text.

You can specify the position of annotation on charts by using the point property and setting its x and y co-ordinates.

To specify the attachment of annotation in a compositechart, you can use the attachment property of annotations, and set its value to:

You can add annotations to various chart types, including BarChart, BubbleChart, CandleStickChart, LineChart and ScatterChart.

Script
Copy Code
<script id="scriptInit" type="text/javascript">
        require(["wijmo.wijcompositechart"], function () {
            $(document).ready(function () {
                $("#wijcompositechart").wijcompositechart({
                    axis: {
                        y: [{// main y axis
                            text: "Temperature",
                            compass: "east",
                            autoMin: false,
                            autoMax: false,
                            min: 5,
                            max: 35,
                            textStyle: {
                                fill: "#89A54E"
                            },
                            labels: {
                                style: {
                                    fill: "#89A54E"
                                }
                            }
                        }, {// y1 axis
                            text: "Rainfall",
                            autoMax: false,
                            autoMin: false,
                            min: 0,
                            max: 300
                        }, {// y2 axis
                            text: "",
                            compass: "east"
                        }]
                    },
                    stacked: false,
                    hint: {
                        content: function () {
                            return this.label + '\n ' + this.y + '';
                        }
                    },
                    seriesList: [{
                        type: "column",
                        label: "West",
                        legendEntry: true,
                        data: {
                            x: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                            y: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
                        },
                        yAxis: 1
                    }, {
                        type: "line",
                        label: "East",
                        legendEntry: true,
                        data: {
                            x: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                            y: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7]
                        },
                        yAxis: 2
                    }, {
                        type: "area",
                        label: "South",
                        legendEntry: true,
                        data: {
                            x: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                            y: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
                        },
                        markers: {
                            visible: true,
                            type: "circle"
                        }
                    }, {
                        type: "column",
                        label: "East",
                        legendEntry: true,
                        data: {
                            x: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                            y: [39.9, 51.5, 136.4, 79.2, 44.0, 76.0, 75.6, 88.5, 196.4, 150.1, 125.6, 94.4]
                        },
                        yAxis: 1
                    }],
                    annotations: [
                        {
                            type: "circle",
                            content: "Relative [LeftMiddle]",
                            tooltip: "Relative [LeftMiddle]",
                            attachment: "relative",
                            radius: 50,
                            point: { x: 0.1, y: 0.5 },
                            style: { fill: '#01DFD7', "fill-opacity": 0.75 }
                        },
                        {
                            type: "rect",
                            content: "x:300,y:120+x:50,y:-10",
                            tooltip: "x:300,y:120+x:50,y:-10",
                            attachment: "absolute",
                            width: 120,
                            height: 50,
                            point: { x: 300, y: 120 },
                            offset: { x: 50, y: -10 },
                            style: { fill: '#C0AFA7', "fill-opacity": 0.75 }
                        },                    
                        {
                            type: "image",
                            attachment: "dataIndex",
                            href: "http://wijmo.com/wp-content/themes/wijmo5/img/wijmo_flexible.png",
                            tooltip: "wijmo_flexible.png",
                            content: "Image",
                            width: 30,
                            height: 30,
                            offset: { x: 1, y: -10 },
                            seriesIndex: 0,
                            pointIndex: 1
                        },
                        {
                            type: "circle",
                            content: "Serie1Point0",
                            tooltip: "Serie1Point0",
                            attachment: "dataIndex",
                            seriesIndex: 1,
                            pointIndex: 0,
                            radius: 35,
                            style: { fill: '#FF1109', "fill-opacity": 0.75 }
                        },
                        {
                            type: "circle",
                            content: "BOUND",
                            tooltip: "BOUND",
                            attachment: "dataIndex",
                            seriesIndex: 0,
                            pointIndex: 3,
                            radius: 50,
                            style: { fill: '#FFFF01', "fill-opacity": 0.75 }
                        },
                    
                        {
                            type: "ellipse",
                            content: "SerieOnePoint11",
                            tooltip: "SerieOnePoint11",
                            attachment: "dataIndex",
                            seriesIndex: 1,
                            pointIndex: 11,
                            width: 90,
                            height: 30,
                            r: 3,
                            style: {
                                "fill": "#FF7700",
                                "stroke": "#FFA9DB",
                                "fill-opacity": 0.75,
                                "stroke-width": 2,
                                "stroke-opacity": 0.75
                            }
                        },
                        {
                            type: "line",
                            content: "LineText",
                            tooltip: "LineText",
                            start: { x: 10, y: 10 },
                            end: { x: 100, y: 100 },
                            style: {
                                "fill": "#FE2E2E",
                                "stroke": "#01A9DB",
                                "fill-opacity": 2,
                                "stroke-width": 5,
                                "stroke-opacity": 1
                            }
                        },
                        {
                            type: "text",
                            text: "CompositeChart Annotation",
                            tooltip: "CompositeChart Annotation",
                            point: { x: 420, y: 30 },
                            style: {
                                "font-size": 23,
                                "font-family": "Trebuchet MS"
                            }
                        },
                                            {
                            type: "polygon",
                            content: "Polygon",
                            tooltip: "Polygon",
                            points: [
                                        {
                                            "x": 200,
                                            "y": 0
                                        },
                                        {
                                            "x": 150,
                                            "y": 50
                                        },
                                        {
                                            "x": 175,
                                            "y": 100
                                        },
                                        {
                                            "x": 225,
                                            "y": 100
                                        },
                                        {
                                            "x": 250,
                                            "y": 50
                                        }
                            ],
                            style: {
                                "fill": "#FEAA2E",
                                "stroke": "#01A9DB"
                            }
                        }
                    ]
                });
            });
        });
    </script>