SVG Axis Marker Annotation
AxisMarkerAnnotations can also be created with SVG, also using the AxisMarkerAnnotation.image property. This can be done as follows.
Remember to import createImageAsync() and AxisMarkerAnnotation for this to work!
In this example we are using createImageAsync() helper function to create an htmlImageElement from SVG. This is then passed to AxisMarkerAnnotation.image property. AxisMarkerAnnotation.imageWidth and imageHeight must be set to scale the SVG to the desired size.
Here's the output:
<div id="scichart-root"></div>
body {
margin: 0;
}
#scichart-root {
width: 100%;
height: 100vh;
}
const {
AxisMarkerAnnotation,
NumericAxis,
SciChartSurface,
ELabelPlacement,
SciChartJsNavyTheme,
createImageAsync,
TextAnnotation,
EHorizontalAnchorPoint,
} = SciChart;
// or for npm import { SciChartSurface, ... } from "scichart"
async function addAnnotationToChart(divElementId) {
const { wasmContext, sciChartSurface } = await SciChartSurface.create(
divElementId,
{
theme: new SciChartJsNavyTheme(),
}
);
sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext));
// #region ExampleA
const someSvgString = `<svg width="800px" height="800px" viewBox="0 0 1024 1024" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M993.763 493.538v35c0 13.331-6.04 26.664-18.135 37.137-140.149 121.422-280.35 242.795-420.49 364.219-11.813 10.237-25.813 15.501-42.454 15.501v-35c16.644 0 30.641-5.264 42.454-15.501C695.28 773.47 835.474 652.092 975.628 530.677c12.095-10.475 18.135-23.803 18.135-37.139z" fill="#C16172" /><path d="M30.239 528.367v-3.5-1.75-3.5-3.5-1.75-3.5-3.5-1.75-3.5-3.5-1.75-3.5c0 14.707 6.701 29.313 19.037 40.019 138.449 120.064 277.049 239.996 415.562 360.02 13.002 11.26 28.74 16.466 47.853 16.994v35c-19.108-0.528-34.851-5.734-47.853-16.994C326.325 808.382 187.725 688.45 49.276 568.386c-12.337-10.705-19.037-25.312-19.037-40.019z" fill="#C16172" /><path d="M510.786 76.601c16.263 0 32.546 5.362 44.946 16.097 139.949 121.188 279.9 242.376 419.818 363.586 24.241 20.995 24.295 53.413 0.079 74.396C835.48 652.101 695.28 773.478 555.141 894.898c-11.814 10.238-25.813 15.502-42.451 15.502-19.109-0.528-34.853-5.734-47.854-16.994C326.324 773.382 187.724 653.45 49.275 533.386c-19.581-16.987-24.96-43.81-11.895-65.251 3.919-6.438 8.669-11.829 14.465-16.849C189.954 331.734 328.024 212.152 466.107 92.567c12.296-10.639 28.478-15.966 44.679-15.966z" fill="#EC6F8B" /><path d="M408.635 338.401v16.8c0 1.077-0.04 2.16-0.123 3.251-0.051 0.639-0.223 1.276-0.353 1.912-0.306 1.497-0.466 2.925-0.474 4.292v-16.8c0.008-1.367 0.168-2.795 0.474-4.292 0.13-0.638 0.302-1.275 0.353-1.912a42.35 42.35 0 0 0 0.123-3.251z" fill="#B83C55" /><path d="M408.635 338.401v16.8c0 0.851-0.024 1.706-0.077 2.565v-16.8c0.052-0.86 0.077-1.715 0.077-2.565" fill="#B83C55" /><path d="M408.559 340.965v16.8c-0.014 0.228-0.029 0.458-0.046 0.686-0.051 0.639-0.223 1.276-0.353 1.912a23.469 23.469 0 0 0-0.44 3.266v-16.8a23.6 23.6 0 0 1 0.44-3.266c0.13-0.638 0.302-1.275 0.353-1.912 0.017-0.228 0.032-0.457 0.046-0.686M407.719 346.832v16.8c-0.021 0.346-0.031 0.688-0.033 1.026v-16.8c0.002-0.339 0.013-0.681 0.033-1.026" fill="#B83C55" /><path d="M678.352 466.188c-0.014-0.005-0.025-0.009-0.039-0.012v-1.966-2.082-2.16-2.196-2.198-2.157-2.08-1.958c0.015 0.003 0.026 0.007 0.039 0.011v16.798z" fill="#B83C55" /><path d="M678.656 449.489v16.8a31.256 31.256 0 0 0-4.092-1.101c-0.476-0.094-0.952-0.183-1.428-0.272-0.485-0.091-0.972-0.179-1.458-0.267a185.93 185.93 0 0 0-1.858-0.325c-0.738-0.123-1.215-0.203-1.697-0.28a196.386 196.386 0 0 0-31.045-2.507c-9.379 0.018-18.6 0.674-27.696 1.918v-16.8a207.015 207.015 0 0 1 27.696-1.918 196.15 196.15 0 0 1 34.6 3.112c0.486 0.087 0.973 0.176 1.458 0.268 0.476 0.087 0.952 0.179 1.428 0.271 1.299 0.253 2.589 0.595 4.092 1.101" fill="#B83C55" /><path d="M678.434 449.322v16.8c-73.714 64.172-147.65 128.185-222.192 192.712v-16.8c74.54-64.527 148.478-128.541 222.192-192.712z" fill="#B83C55" /><path d="M678.434 449.322v16.8c-73.714 64.172-147.65 128.185-222.192 192.712v-16.8c74.54-64.527 148.478-128.541 222.192-192.712" fill="#B83C55" /><path d="M720.318 444.037v16.8c0 3.52-1.53 7.012-4.348 9.415v-16.8a12.412 12.412 0 0 0 4.348-9.415z" fill="#B83C55" /><path d="M720.318 444.037v16.8c0 0.256-0.011 0.511-0.024 0.766v-16.8c0.015-0.255 0.024-0.511 0.024-0.766M720.294 444.802v16.8a12.426 12.426 0 0 1-2.891 7.207v-16.8a12.419 12.419 0 0 0 2.891-7.207M717.403 452.008v16.8c-0.432 0.515-0.907 0.997-1.433 1.442v-16.8a11.895 11.895 0 0 0 1.433-1.442" fill="#B83C55" /><path d="M468.354 534.666v16.8c0.029-4.019-1.596-7.775-5.45-11.647-35.662-35.854-71.044-71.914-106.225-108.124a36.889 36.889 0 0 0-2.159-2.061c-4.37-3.826-9.086-5.88-15.211-5.953v-16.8c6.125 0.072 10.841 2.129 15.211 5.953a36.59 36.59 0 0 1 2.159 2.061c35.18 36.21 70.562 72.272 106.225 108.124 3.854 3.872 5.479 7.628 5.45 11.647z" fill="#B83C55" /><path d="M468.354 534.666v16.8c0.029-4.019-1.596-7.775-5.45-11.647-35.662-35.854-71.044-71.914-106.225-108.124a36.889 36.889 0 0 0-2.159-2.061c-4.37-3.826-9.086-5.88-15.211-5.953v-16.8c6.125 0.072 10.841 2.129 15.211 5.953a36.59 36.59 0 0 1 2.159 2.061c35.18 36.21 70.562 72.272 106.225 108.124 3.854 3.872 5.479 7.628 5.45 11.647" fill="#B83C55" /><path d="M437.399 537.494v16.801c0-1.147-0.376-2.429-1.087-3.154-32.982-33.747-66.064-67.437-99.277-101.019-1.158-1.174-3.731-1.833-5.663-1.833-0.998 0.012-1.882 0.019-2.763 0.019-16.335 0-32.126-2.215-46.69-9.097-4.921-2.333-9.597-5.256-13.771-8.493-2.479-1.928-3.666-4.917-3.666-7.945v-16.8c0 3.032 1.187 6.019 3.666 7.946 4.173 3.237 8.85 6.16 13.771 8.493 14.564 6.882 30.355 9.097 46.69 9.097 0.881 0 1.765-0.007 2.763-0.019 1.933 0 4.506 0.659 5.663 1.833a23607.117 23607.117 0 0 1 99.274 101.019c0.714 0.723 1.09 2.004 1.09 3.152z" fill="#B83C55" /><path d="M437.399 537.494v16.801c0-1.147-0.376-2.429-1.087-3.154-32.982-33.747-66.064-67.437-99.277-101.019-1.158-1.174-3.731-1.833-5.663-1.833-0.998 0.012-1.882 0.019-2.763 0.019-16.335 0-32.126-2.215-46.69-9.097-4.921-2.333-9.597-5.256-13.771-8.493-2.479-1.928-3.666-4.917-3.666-7.945v-16.8c0 3.032 1.187 6.019 3.666 7.946 4.173 3.237 8.85 6.16 13.771 8.493 14.564 6.882 30.355 9.097 46.69 9.097 0.881 0 1.765-0.007 2.763-0.019 1.933 0 4.506 0.659 5.663 1.833a23607.117 23607.117 0 0 1 99.274 101.019c0.714 0.723 1.09 2.004 1.09 3.152" fill="#B83C55" /><path d="M468.354 551.466c-0.017 2.41-0.629 4.914-1.712 7.591v-1.964-2.082-2.161-2.196-2.198-2.157-2.078-1.96c1.082-2.677 1.693-5.18 1.712-7.59 0 5.036 0.018 11.756 0 16.795z" fill="#B83C55" /><path d="M468.354 534.666v16.8c0 0.264-0.011 0.527-0.026 0.793v-16.8c0.015-0.266 0.026-0.53 0.026-0.793M468.327 535.46v16.8c-0.13 2.166-0.722 4.412-1.686 6.797-3.044 7.553-5.917 15.182-8.165 22.934-3.328 11.512-5.681 23.125-6.385 34.86V600.05c0.704-11.736 3.055-23.35 6.385-34.859 2.248-7.752 5.12-15.382 8.165-22.934 0.964-2.385 1.556-4.631 1.686-6.797" fill="#B83C55" /><path d="M715.971 453.451v16.8C677.9 502.742 640.25 535.619 602.43 568.32c-1.251 1.08-2.913 1.813-4.898 3.018v-16.8c1.985-1.203 3.647-1.938 4.898-3.019 37.82-32.701 75.468-65.576 113.541-98.068z" fill="#B83C55" /><path d="M715.971 453.451v16.8C677.9 502.742 640.25 535.619 602.43 568.32c-0.367 0.315-0.769 0.604-1.201 0.881v-16.8c0.436-0.278 0.836-0.565 1.201-0.882 37.82-32.701 75.468-65.576 113.541-98.068" fill="#B83C55" /><path d="M601.229 552.401v16.8c-1.051 0.67-2.295 1.286-3.697 2.137v-16.8c1.404-0.85 2.646-1.466 3.697-2.137" fill="#B83C55" /><path d="M403.542 316.38c2.979 6.753 5.075 14.133 5.093 21.914a43.101 43.101 0 0 1-0.123 3.358c-0.051 0.639-0.223 1.275-0.353 1.912-0.306 1.497-0.466 2.925-0.475 4.292-0.042 5.928 2.756 10.737 9.013 15.271 42.256 30.605 84.097 61.631 125.92 92.689 0.825 0.596 1.256 0.882 1.688 1.149 3.141 1.947 6.301 2.852 9.568 2.915 1.157 0.002 1.945-0.044 2.743-0.137 2.035-0.235 4.123-0.763 6.276-1.537 24.035-8.599 48.519-13.42 73.561-13.473 10.878 0.011 21.224 0.824 31.669 2.508 0.481 0.078 0.961 0.156 1.44 0.238 0.873 0.146 1.495 0.258 2.117 0.367a224.404 224.404 0 0 1 2.883 0.539c1.3 0.253 2.59 0.594 3.869 0.935-73.714 64.171-147.65 128.184-222.192 192.711-1.169-6.836-2.61-13.782-3.498-20.777a110.835 110.835 0 0 1-0.869-14.188c0.027-14.13 2.612-28.079 6.604-41.881 2.248-7.751 5.121-15.38 8.165-22.932 1.082-2.677 1.693-5.181 1.713-7.591 0.028-4.02-1.597-7.776-5.451-11.648-35.662-35.853-71.044-71.914-106.225-108.124a36.564 36.564 0 0 0-2.16-2.06c-4.369-3.826-9.086-5.88-15.211-5.953-1.6 0.007-2.688 0.07-3.824 0.193-2.759 0.275-4.971 0.381-7.17 0.387-7.711-0.062-14.521-1.135-21.039-2.901a93.06 93.06 0 0 1-4.297-1.275c33.453-28.911 66.989-57.885 100.565-86.901z" fill="#EF97A8" /><path d="M712.55 659.017v16.802c0 2.953-1.252 5.825-3.775 8.072-2.812 2.503-6.536 3.769-10.271 3.769-3.63 0-7.265-1.196-10.08-3.62-17.458-15.06-34.854-30.16-52.273-45.244-17.842-15.451-35.691-30.901-53.506-46.381-1.258-1.1-2.226-2.435-4.01-4.408v-16.8c1.784 1.973 2.752 3.309 4.01 4.408 17.813 15.479 35.664 30.93 53.506 46.38 17.419 15.085 34.815 30.187 52.273 45.245 2.815 2.422 6.45 3.62 10.08 3.62 3.735 0 7.461-1.268 10.271-3.77 2.523-2.247 3.775-5.12 3.775-8.073z" fill="#B83C55" /><path d="M712.55 659.017v16.802c0 0.216-0.007 0.432-0.019 0.644v-16.8c0.012-0.216 0.019-0.43 0.019-0.646M712.531 659.661v16.8c-0.141 2.202-0.979 4.337-2.531 6.173v-16.8c1.552-1.838 2.393-3.971 2.531-6.173" fill="#B83C55" /><path d="M710.002 665.834v16.8c-0.369 0.438-0.779 0.854-1.229 1.255a14.46 14.46 0 0 1-1.786 1.354v-16.8a14.216 14.216 0 0 0 1.786-1.354c0.45-0.401 0.86-0.82 1.229-1.255M706.985 668.442v16.8a14.962 14.962 0 0 1-2.901 1.433v-16.8a14.992 14.992 0 0 0 2.901-1.433M704.084 669.875v16.8c-1.08 0.396-2.205 0.673-3.351 0.832v-16.801a16.077 16.077 0 0 0 3.351-0.831" fill="#B83C55" /><path d="M700.734 670.706v16.801c-0.736 0.102-1.484 0.15-2.232 0.15-3.63 0-7.265-1.196-10.08-3.621-17.458-15.061-34.854-30.16-52.273-45.244-17.842-15.45-35.691-30.901-53.506-46.38-1.258-1.1-2.226-2.437-4.01-4.408v-16.8c1.784 1.973 2.752 3.309 4.01 4.407 17.813 15.479 35.664 30.931 53.506 46.381 17.419 15.084 34.815 30.187 52.273 45.244 2.815 2.423 6.45 3.62 10.08 3.62 0.748 0.002 1.494-0.048 2.232-0.15" fill="#B83C55" /><path d="M715.971 453.451C677.9 485.942 640.25 518.819 602.43 551.52c-1.251 1.08-2.913 1.814-4.898 3.019 4.044 3.293 7.166 5.709 10.121 8.269a124716.21 124716.21 0 0 1 100.104 86.656c5.998 5.195 6.4 12.833 1.019 17.625-2.812 2.502-6.536 3.769-10.271 3.769-3.63 0-7.266-1.196-10.08-3.62-17.458-15.061-34.854-30.16-52.273-45.244-17.842-15.451-35.692-30.901-53.506-46.381-1.258-1.101-2.227-2.436-4.011-4.408-2.058 2.191-3.316 3.815-4.89 5.17-37.234 32.297-74.71 64.396-111.616 96.992-3.318 2.933-7.612 4.438-11.83 4.438-6.082 0-12.01-3.132-14.642-9.656-14.544-36.098-14.495-72.525-4.917-109.319 1.764-6.793 4.495-13.383 6.501-20.13 0.394-1.318 0.05-3.361-0.929-4.356a23726.86 23726.86 0 0 0-99.275-101.019c-1.158-1.174-3.731-1.833-5.663-1.833-0.998 0.013-1.883 0.02-2.763 0.02-16.335 0-32.126-2.215-46.691-9.098-4.92-2.332-9.596-5.255-13.771-8.493-4.848-3.772-4.758-11.602-0.493-15.879 0.685-0.68 1.46-1.291 2.208-1.928 41.802-36.211 83.604-72.431 125.417-108.632 3.75-3.253 7.786-4.883 11.697-4.883 4.561 0 8.954 2.216 12.533 6.655 11.543 14.316 17.268 30.334 16.725 47.758-0.183 5.85 1.903 9.533 7.115 13.323 36.37 26.425 72.444 53.154 108.501 79.9 2.051 1.522 3.783 2.266 5.865 2.266 1.151 0 2.412-0.227 3.893-0.674 24.977-7.545 49.967-11.439 74.955-11.439 24.709 0 49.413 3.809 74.116 11.648 11.4 3.617 12.045 15.653 5.29 21.415zM456.239 642.035c74.543-64.527 148.478-128.54 222.417-192.546a31.56 31.56 0 0 0-4.092-1.1c-0.476-0.093-0.952-0.183-1.428-0.271-0.485-0.092-0.972-0.18-1.458-0.268a219.888 219.888 0 0 0-3.555-0.605 196.267 196.267 0 0 0-31.045-2.507c-25.671 0.051-50.146 4.873-74.182 13.472-2.156 0.772-4.244 1.3-6.281 1.536-0.797 0.093-1.584 0.141-2.368 0.141-3.642-0.066-6.8-0.972-9.941-2.917a26.594 26.594 0 0 1-1.294-0.86c-42.219-31.348-84.059-62.374-126.314-92.979-6.258-4.534-9.055-9.342-9.014-15.27 0.009-1.367 0.17-2.794 0.476-4.292 0.131-0.638 0.302-1.273 0.353-1.912 0.086-1.127 0.125-2.246 0.123-3.358-0.017-7.781-2.11-15.162-5.091-21.913-33.578 29.017-67.114 57.99-100.568 86.902a101.608 101.608 0 0 0 4.297 1.275c6.52 1.765 13.33 2.84 20.276 2.898 2.964-0.002 5.176-0.109 7.397-0.33 1.674-0.176 2.763-0.24 3.811-0.247 6.678 0.072 11.396 2.128 15.762 5.954a35.94 35.94 0 0 1 2.16 2.06c35.179 36.21 70.562 72.272 106.223 108.125 3.854 3.872 5.479 7.632 5.451 11.647-0.018 2.41-0.63 4.914-1.711 7.591-3.046 7.553-5.918 15.182-8.164 22.934-3.992 13.801-6.578 27.752-6.605 41.88-0.008 4.71 0.267 9.438 0.87 14.189 0.885 6.989 2.328 13.936 3.495 20.771" fill="#C5546B" /><path d="M424.059 624.969v-16.8c0 20.096 3.584 40.088 11.599 59.977 2.63 6.525 8.559 9.658 14.641 9.658 4.218 0 8.512-1.506 11.831-4.438 36.904-32.596 74.382-64.695 111.617-96.992 1.57-1.354 2.831-2.979 4.889-5.169v16.8c-2.058 2.191-3.317 3.817-4.889 5.169-37.235 32.298-74.711 64.397-111.617 96.993-3.318 2.933-7.613 4.438-11.831 4.438-6.081 0-12.009-3.132-14.641-9.657-8.016-19.89-11.599-39.882-11.599-59.979z" fill="#B83C55" /><path d="M578.633 571.204v16.8c-2.058 2.191-3.317 3.817-4.891 5.169-37.234 32.298-74.71 64.397-111.616 96.993-0.678 0.6-1.396 1.139-2.146 1.615v-16.8a17.41 17.41 0 0 0 2.146-1.616c36.904-32.596 74.381-64.695 111.616-96.992 1.572-1.352 2.833-2.977 4.891-5.169M459.98 674.983v16.8a17.823 17.823 0 0 1-3.451 1.71v-16.8a17.766 17.766 0 0 0 3.451-1.71M456.529 676.693v16.8a18.329 18.329 0 0 1-3.806 0.949v-16.801a18.17 18.17 0 0 0 3.806-0.948" fill="#B83C55" /><path d="M452.724 677.641v16.801c-0.808 0.108-1.618 0.163-2.427 0.163-6.081 0-12.009-3.133-14.641-9.658-8.016-19.889-11.599-39.879-11.599-59.978v-16.8c0 20.096 3.584 40.088 11.599 59.977 2.63 6.525 8.559 9.658 14.641 9.658 0.807 0 1.619-0.054 2.427-0.163" fill="#B83C55" /></svg>`;
const blob = new Blob([someSvgString], { type: "image/svg+xml" });
const imageUrl = URL.createObjectURL(blob);
const htmlImageElement = await createImageAsync(imageUrl);
// An AxisMarkerAnnotation at Y=5.2 showing an image
sciChartSurface.annotations.add(
new AxisMarkerAnnotation({
y1: 5.1,
isEditable: true,
image: htmlImageElement,
// Set imageWidth and imageHeight when using SVG to scale the marker size
imageWidth: 48,
imageHeight: 48,
})
);
// #endregion
// Add a text annotation to explain
sciChartSurface.annotations.add(
new TextAnnotation({
x1: 9.5,
y1: 5.2,
horizontalAnchorPoint: EHorizontalAnchorPoint.Right,
fontSize: 16,
text: "Draggable Axis Marker with a custom image -->",
})
);
}
addAnnotationToChart("scichart-root");
async function builderExample(divElementId) {
// #region ExampleB
const { chartBuilder, EAnnotationType } = SciChart;
// or for npm import { SciChartSurface, ... } from "scichart"
const someSvgString = `<svg width="800px" height="800px" viewBox="0 0 1024 1024" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M993.763 493.538v35c0 13.331-6.04 26.664-18.135 37.137-140.149 121.422-280.35 242.795-420.49 364.219-11.813 10.237-25.813 15.501-42.454 15.501v-35c16.644 0 30.641-5.264 42.454-15.501C695.28 773.47 835.474 652.092 975.628 530.677c12.095-10.475 18.135-23.803 18.135-37.139z" fill="#C16172" /><path d="M30.239 528.367v-3.5-1.75-3.5-3.5-1.75-3.5-3.5-1.75-3.5-3.5-1.75-3.5c0 14.707 6.701 29.313 19.037 40.019 138.449 120.064 277.049 239.996 415.562 360.02 13.002 11.26 28.74 16.466 47.853 16.994v35c-19.108-0.528-34.851-5.734-47.853-16.994C326.325 808.382 187.725 688.45 49.276 568.386c-12.337-10.705-19.037-25.312-19.037-40.019z" fill="#C16172" /><path d="M510.786 76.601c16.263 0 32.546 5.362 44.946 16.097 139.949 121.188 279.9 242.376 419.818 363.586 24.241 20.995 24.295 53.413 0.079 74.396C835.48 652.101 695.28 773.478 555.141 894.898c-11.814 10.238-25.813 15.502-42.451 15.502-19.109-0.528-34.853-5.734-47.854-16.994C326.324 773.382 187.724 653.45 49.275 533.386c-19.581-16.987-24.96-43.81-11.895-65.251 3.919-6.438 8.669-11.829 14.465-16.849C189.954 331.734 328.024 212.152 466.107 92.567c12.296-10.639 28.478-15.966 44.679-15.966z" fill="#EC6F8B" /><path d="M408.635 338.401v16.8c0 1.077-0.04 2.16-0.123 3.251-0.051 0.639-0.223 1.276-0.353 1.912-0.306 1.497-0.466 2.925-0.474 4.292v-16.8c0.008-1.367 0.168-2.795 0.474-4.292 0.13-0.638 0.302-1.275 0.353-1.912a42.35 42.35 0 0 0 0.123-3.251z" fill="#B83C55" /><path d="M408.635 338.401v16.8c0 0.851-0.024 1.706-0.077 2.565v-16.8c0.052-0.86 0.077-1.715 0.077-2.565" fill="#B83C55" /><path d="M408.559 340.965v16.8c-0.014 0.228-0.029 0.458-0.046 0.686-0.051 0.639-0.223 1.276-0.353 1.912a23.469 23.469 0 0 0-0.44 3.266v-16.8a23.6 23.6 0 0 1 0.44-3.266c0.13-0.638 0.302-1.275 0.353-1.912 0.017-0.228 0.032-0.457 0.046-0.686M407.719 346.832v16.8c-0.021 0.346-0.031 0.688-0.033 1.026v-16.8c0.002-0.339 0.013-0.681 0.033-1.026" fill="#B83C55" /><path d="M678.352 466.188c-0.014-0.005-0.025-0.009-0.039-0.012v-1.966-2.082-2.16-2.196-2.198-2.157-2.08-1.958c0.015 0.003 0.026 0.007 0.039 0.011v16.798z" fill="#B83C55" /><path d="M678.656 449.489v16.8a31.256 31.256 0 0 0-4.092-1.101c-0.476-0.094-0.952-0.183-1.428-0.272-0.485-0.091-0.972-0.179-1.458-0.267a185.93 185.93 0 0 0-1.858-0.325c-0.738-0.123-1.215-0.203-1.697-0.28a196.386 196.386 0 0 0-31.045-2.507c-9.379 0.018-18.6 0.674-27.696 1.918v-16.8a207.015 207.015 0 0 1 27.696-1.918 196.15 196.15 0 0 1 34.6 3.112c0.486 0.087 0.973 0.176 1.458 0.268 0.476 0.087 0.952 0.179 1.428 0.271 1.299 0.253 2.589 0.595 4.092 1.101" fill="#B83C55" /><path d="M678.434 449.322v16.8c-73.714 64.172-147.65 128.185-222.192 192.712v-16.8c74.54-64.527 148.478-128.541 222.192-192.712z" fill="#B83C55" /><path d="M678.434 449.322v16.8c-73.714 64.172-147.65 128.185-222.192 192.712v-16.8c74.54-64.527 148.478-128.541 222.192-192.712" fill="#B83C55" /><path d="M720.318 444.037v16.8c0 3.52-1.53 7.012-4.348 9.415v-16.8a12.412 12.412 0 0 0 4.348-9.415z" fill="#B83C55" /><path d="M720.318 444.037v16.8c0 0.256-0.011 0.511-0.024 0.766v-16.8c0.015-0.255 0.024-0.511 0.024-0.766M720.294 444.802v16.8a12.426 12.426 0 0 1-2.891 7.207v-16.8a12.419 12.419 0 0 0 2.891-7.207M717.403 452.008v16.8c-0.432 0.515-0.907 0.997-1.433 1.442v-16.8a11.895 11.895 0 0 0 1.433-1.442" fill="#B83C55" /><path d="M468.354 534.666v16.8c0.029-4.019-1.596-7.775-5.45-11.647-35.662-35.854-71.044-71.914-106.225-108.124a36.889 36.889 0 0 0-2.159-2.061c-4.37-3.826-9.086-5.88-15.211-5.953v-16.8c6.125 0.072 10.841 2.129 15.211 5.953a36.59 36.59 0 0 1 2.159 2.061c35.18 36.21 70.562 72.272 106.225 108.124 3.854 3.872 5.479 7.628 5.45 11.647z" fill="#B83C55" /><path d="M468.354 534.666v16.8c0.029-4.019-1.596-7.775-5.45-11.647-35.662-35.854-71.044-71.914-106.225-108.124a36.889 36.889 0 0 0-2.159-2.061c-4.37-3.826-9.086-5.88-15.211-5.953v-16.8c6.125 0.072 10.841 2.129 15.211 5.953a36.59 36.59 0 0 1 2.159 2.061c35.18 36.21 70.562 72.272 106.225 108.124 3.854 3.872 5.479 7.628 5.45 11.647" fill="#B83C55" /><path d="M437.399 537.494v16.801c0-1.147-0.376-2.429-1.087-3.154-32.982-33.747-66.064-67.437-99.277-101.019-1.158-1.174-3.731-1.833-5.663-1.833-0.998 0.012-1.882 0.019-2.763 0.019-16.335 0-32.126-2.215-46.69-9.097-4.921-2.333-9.597-5.256-13.771-8.493-2.479-1.928-3.666-4.917-3.666-7.945v-16.8c0 3.032 1.187 6.019 3.666 7.946 4.173 3.237 8.85 6.16 13.771 8.493 14.564 6.882 30.355 9.097 46.69 9.097 0.881 0 1.765-0.007 2.763-0.019 1.933 0 4.506 0.659 5.663 1.833a23607.117 23607.117 0 0 1 99.274 101.019c0.714 0.723 1.09 2.004 1.09 3.152z" fill="#B83C55" /><path d="M437.399 537.494v16.801c0-1.147-0.376-2.429-1.087-3.154-32.982-33.747-66.064-67.437-99.277-101.019-1.158-1.174-3.731-1.833-5.663-1.833-0.998 0.012-1.882 0.019-2.763 0.019-16.335 0-32.126-2.215-46.69-9.097-4.921-2.333-9.597-5.256-13.771-8.493-2.479-1.928-3.666-4.917-3.666-7.945v-16.8c0 3.032 1.187 6.019 3.666 7.946 4.173 3.237 8.85 6.16 13.771 8.493 14.564 6.882 30.355 9.097 46.69 9.097 0.881 0 1.765-0.007 2.763-0.019 1.933 0 4.506 0.659 5.663 1.833a23607.117 23607.117 0 0 1 99.274 101.019c0.714 0.723 1.09 2.004 1.09 3.152" fill="#B83C55" /><path d="M468.354 551.466c-0.017 2.41-0.629 4.914-1.712 7.591v-1.964-2.082-2.161-2.196-2.198-2.157-2.078-1.96c1.082-2.677 1.693-5.18 1.712-7.59 0 5.036 0.018 11.756 0 16.795z" fill="#B83C55" /><path d="M468.354 534.666v16.8c0 0.264-0.011 0.527-0.026 0.793v-16.8c0.015-0.266 0.026-0.53 0.026-0.793M468.327 535.46v16.8c-0.13 2.166-0.722 4.412-1.686 6.797-3.044 7.553-5.917 15.182-8.165 22.934-3.328 11.512-5.681 23.125-6.385 34.86V600.05c0.704-11.736 3.055-23.35 6.385-34.859 2.248-7.752 5.12-15.382 8.165-22.934 0.964-2.385 1.556-4.631 1.686-6.797" fill="#B83C55" /><path d="M715.971 453.451v16.8C677.9 502.742 640.25 535.619 602.43 568.32c-1.251 1.08-2.913 1.813-4.898 3.018v-16.8c1.985-1.203 3.647-1.938 4.898-3.019 37.82-32.701 75.468-65.576 113.541-98.068z" fill="#B83C55" /><path d="M715.971 453.451v16.8C677.9 502.742 640.25 535.619 602.43 568.32c-0.367 0.315-0.769 0.604-1.201 0.881v-16.8c0.436-0.278 0.836-0.565 1.201-0.882 37.82-32.701 75.468-65.576 113.541-98.068" fill="#B83C55" /><path d="M601.229 552.401v16.8c-1.051 0.67-2.295 1.286-3.697 2.137v-16.8c1.404-0.85 2.646-1.466 3.697-2.137" fill="#B83C55" /><path d="M403.542 316.38c2.979 6.753 5.075 14.133 5.093 21.914a43.101 43.101 0 0 1-0.123 3.358c-0.051 0.639-0.223 1.275-0.353 1.912-0.306 1.497-0.466 2.925-0.475 4.292-0.042 5.928 2.756 10.737 9.013 15.271 42.256 30.605 84.097 61.631 125.92 92.689 0.825 0.596 1.256 0.882 1.688 1.149 3.141 1.947 6.301 2.852 9.568 2.915 1.157 0.002 1.945-0.044 2.743-0.137 2.035-0.235 4.123-0.763 6.276-1.537 24.035-8.599 48.519-13.42 73.561-13.473 10.878 0.011 21.224 0.824 31.669 2.508 0.481 0.078 0.961 0.156 1.44 0.238 0.873 0.146 1.495 0.258 2.117 0.367a224.404 224.404 0 0 1 2.883 0.539c1.3 0.253 2.59 0.594 3.869 0.935-73.714 64.171-147.65 128.184-222.192 192.711-1.169-6.836-2.61-13.782-3.498-20.777a110.835 110.835 0 0 1-0.869-14.188c0.027-14.13 2.612-28.079 6.604-41.881 2.248-7.751 5.121-15.38 8.165-22.932 1.082-2.677 1.693-5.181 1.713-7.591 0.028-4.02-1.597-7.776-5.451-11.648-35.662-35.853-71.044-71.914-106.225-108.124a36.564 36.564 0 0 0-2.16-2.06c-4.369-3.826-9.086-5.88-15.211-5.953-1.6 0.007-2.688 0.07-3.824 0.193-2.759 0.275-4.971 0.381-7.17 0.387-7.711-0.062-14.521-1.135-21.039-2.901a93.06 93.06 0 0 1-4.297-1.275c33.453-28.911 66.989-57.885 100.565-86.901z" fill="#EF97A8" /><path d="M712.55 659.017v16.802c0 2.953-1.252 5.825-3.775 8.072-2.812 2.503-6.536 3.769-10.271 3.769-3.63 0-7.265-1.196-10.08-3.62-17.458-15.06-34.854-30.16-52.273-45.244-17.842-15.451-35.691-30.901-53.506-46.381-1.258-1.1-2.226-2.435-4.01-4.408v-16.8c1.784 1.973 2.752 3.309 4.01 4.408 17.813 15.479 35.664 30.93 53.506 46.38 17.419 15.085 34.815 30.187 52.273 45.245 2.815 2.422 6.45 3.62 10.08 3.62 3.735 0 7.461-1.268 10.271-3.77 2.523-2.247 3.775-5.12 3.775-8.073z" fill="#B83C55" /><path d="M712.55 659.017v16.802c0 0.216-0.007 0.432-0.019 0.644v-16.8c0.012-0.216 0.019-0.43 0.019-0.646M712.531 659.661v16.8c-0.141 2.202-0.979 4.337-2.531 6.173v-16.8c1.552-1.838 2.393-3.971 2.531-6.173" fill="#B83C55" /><path d="M710.002 665.834v16.8c-0.369 0.438-0.779 0.854-1.229 1.255a14.46 14.46 0 0 1-1.786 1.354v-16.8a14.216 14.216 0 0 0 1.786-1.354c0.45-0.401 0.86-0.82 1.229-1.255M706.985 668.442v16.8a14.962 14.962 0 0 1-2.901 1.433v-16.8a14.992 14.992 0 0 0 2.901-1.433M704.084 669.875v16.8c-1.08 0.396-2.205 0.673-3.351 0.832v-16.801a16.077 16.077 0 0 0 3.351-0.831" fill="#B83C55" /><path d="M700.734 670.706v16.801c-0.736 0.102-1.484 0.15-2.232 0.15-3.63 0-7.265-1.196-10.08-3.621-17.458-15.061-34.854-30.16-52.273-45.244-17.842-15.45-35.691-30.901-53.506-46.38-1.258-1.1-2.226-2.437-4.01-4.408v-16.8c1.784 1.973 2.752 3.309 4.01 4.407 17.813 15.479 35.664 30.931 53.506 46.381 17.419 15.084 34.815 30.187 52.273 45.244 2.815 2.423 6.45 3.62 10.08 3.62 0.748 0.002 1.494-0.048 2.232-0.15" fill="#B83C55" /><path d="M715.971 453.451C677.9 485.942 640.25 518.819 602.43 551.52c-1.251 1.08-2.913 1.814-4.898 3.019 4.044 3.293 7.166 5.709 10.121 8.269a124716.21 124716.21 0 0 1 100.104 86.656c5.998 5.195 6.4 12.833 1.019 17.625-2.812 2.502-6.536 3.769-10.271 3.769-3.63 0-7.266-1.196-10.08-3.62-17.458-15.061-34.854-30.16-52.273-45.244-17.842-15.451-35.692-30.901-53.506-46.381-1.258-1.101-2.227-2.436-4.011-4.408-2.058 2.191-3.316 3.815-4.89 5.17-37.234 32.297-74.71 64.396-111.616 96.992-3.318 2.933-7.612 4.438-11.83 4.438-6.082 0-12.01-3.132-14.642-9.656-14.544-36.098-14.495-72.525-4.917-109.319 1.764-6.793 4.495-13.383 6.501-20.13 0.394-1.318 0.05-3.361-0.929-4.356a23726.86 23726.86 0 0 0-99.275-101.019c-1.158-1.174-3.731-1.833-5.663-1.833-0.998 0.013-1.883 0.02-2.763 0.02-16.335 0-32.126-2.215-46.691-9.098-4.92-2.332-9.596-5.255-13.771-8.493-4.848-3.772-4.758-11.602-0.493-15.879 0.685-0.68 1.46-1.291 2.208-1.928 41.802-36.211 83.604-72.431 125.417-108.632 3.75-3.253 7.786-4.883 11.697-4.883 4.561 0 8.954 2.216 12.533 6.655 11.543 14.316 17.268 30.334 16.725 47.758-0.183 5.85 1.903 9.533 7.115 13.323 36.37 26.425 72.444 53.154 108.501 79.9 2.051 1.522 3.783 2.266 5.865 2.266 1.151 0 2.412-0.227 3.893-0.674 24.977-7.545 49.967-11.439 74.955-11.439 24.709 0 49.413 3.809 74.116 11.648 11.4 3.617 12.045 15.653 5.29 21.415zM456.239 642.035c74.543-64.527 148.478-128.54 222.417-192.546a31.56 31.56 0 0 0-4.092-1.1c-0.476-0.093-0.952-0.183-1.428-0.271-0.485-0.092-0.972-0.18-1.458-0.268a219.888 219.888 0 0 0-3.555-0.605 196.267 196.267 0 0 0-31.045-2.507c-25.671 0.051-50.146 4.873-74.182 13.472-2.156 0.772-4.244 1.3-6.281 1.536-0.797 0.093-1.584 0.141-2.368 0.141-3.642-0.066-6.8-0.972-9.941-2.917a26.594 26.594 0 0 1-1.294-0.86c-42.219-31.348-84.059-62.374-126.314-92.979-6.258-4.534-9.055-9.342-9.014-15.27 0.009-1.367 0.17-2.794 0.476-4.292 0.131-0.638 0.302-1.273 0.353-1.912 0.086-1.127 0.125-2.246 0.123-3.358-0.017-7.781-2.11-15.162-5.091-21.913-33.578 29.017-67.114 57.99-100.568 86.902a101.608 101.608 0 0 0 4.297 1.275c6.52 1.765 13.33 2.84 20.276 2.898 2.964-0.002 5.176-0.109 7.397-0.33 1.674-0.176 2.763-0.24 3.811-0.247 6.678 0.072 11.396 2.128 15.762 5.954a35.94 35.94 0 0 1 2.16 2.06c35.179 36.21 70.562 72.272 106.223 108.125 3.854 3.872 5.479 7.632 5.451 11.647-0.018 2.41-0.63 4.914-1.711 7.591-3.046 7.553-5.918 15.182-8.164 22.934-3.992 13.801-6.578 27.752-6.605 41.88-0.008 4.71 0.267 9.438 0.87 14.189 0.885 6.989 2.328 13.936 3.495 20.771" fill="#C5546B" /><path d="M424.059 624.969v-16.8c0 20.096 3.584 40.088 11.599 59.977 2.63 6.525 8.559 9.658 14.641 9.658 4.218 0 8.512-1.506 11.831-4.438 36.904-32.596 74.382-64.695 111.617-96.992 1.57-1.354 2.831-2.979 4.889-5.169v16.8c-2.058 2.191-3.317 3.817-4.889 5.169-37.235 32.298-74.711 64.397-111.617 96.993-3.318 2.933-7.613 4.438-11.831 4.438-6.081 0-12.009-3.132-14.641-9.657-8.016-19.89-11.599-39.882-11.599-59.979z" fill="#B83C55" /><path d="M578.633 571.204v16.8c-2.058 2.191-3.317 3.817-4.891 5.169-37.234 32.298-74.71 64.397-111.616 96.993-0.678 0.6-1.396 1.139-2.146 1.615v-16.8a17.41 17.41 0 0 0 2.146-1.616c36.904-32.596 74.381-64.695 111.616-96.992 1.572-1.352 2.833-2.977 4.891-5.169M459.98 674.983v16.8a17.823 17.823 0 0 1-3.451 1.71v-16.8a17.766 17.766 0 0 0 3.451-1.71M456.529 676.693v16.8a18.329 18.329 0 0 1-3.806 0.949v-16.801a18.17 18.17 0 0 0 3.806-0.948" fill="#B83C55" /><path d="M452.724 677.641v16.801c-0.808 0.108-1.618 0.163-2.427 0.163-6.081 0-12.009-3.133-14.641-9.658-8.016-19.889-11.599-39.879-11.599-59.978v-16.8c0 20.096 3.584 40.088 11.599 59.977 2.63 6.525 8.559 9.658 14.641 9.658 0.807 0 1.619-0.054 2.427-0.163" fill="#B83C55" /></svg>`;
const blob = new Blob([someSvgString], { type: "image/svg+xml" });
const imageUrl = URL.createObjectURL(blob);
const htmlImageElement = await createImageAsync(imageUrl);
const { wasmContext, sciChartSurface } = await chartBuilder.build2DChart(
divElementId,
{
annotations: [
{
type: EAnnotationType.RenderContextAxisMarkerAnnotation,
options: {
y1: 5.1,
isEditable: true,
image: htmlImageElement,
// Optional: Set imageWidth and imageHeight, else it will default to image size
imageWidth: 48,
imageHeight: 48,
},
},
],
}
);
// #endregion
}
// Uncomment this to use the builder example //builderExample("scichart-root");
On the chart we can see a custom SVG axis label annotation. The annotation is draggable along the YAxis.