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> | |