Add Classification Banners to Charts and Exported Images
Environment
| Product Version | 8.0.1 |
| Product | Progress® Kendo UI for Vue Native |
Description
I need to add classification banners (such as "UNCLASSIFIED") to charts, pages, and exported images. The classification labels should appear at the top left and bottom right of the chart, and must be included when exporting the chart to an image.
Solution
To add classification banners to Kendo UI for Vue Charts that persist in exported images, display the labels using HTML elements in the UI, then use the @progress/kendo-drawing API to add them to the exported image. Use exportVisual() to get the chart's drawing visual and calculate positions based on the chart's bounding box (bbox()). Append Text elements for top-left and bottom-right labels, insert a solid background using Path.fromRect(), then export with exportImage() and save using @progress/kendo-file-saver.
The following example demonstrates adding "UNCLASSIFIED" labels that appear both on screen and in the exported image: