This is a demo tutorial. While there is no step-by-step commentary available (yet), the live demo below is fully functional. Feel free to open it for full source code.
This demo shows how we can use a custom theme to override the look of icons used in a StockChart.
Code
class MyTheme extends am5.Theme {
setupDefaultRules() {
this.rule("Graphics", ["settings", "button", "icon"]).setAll({
fill: am5.color(0x000000),
fillOpacity: 1,
svgPath: "M11.48 17.578H9.121a.587.587 0 0 1-.582-.523l-.176-1.645a5.938 5.938 0 0 1-.71-.297l-1.286 1.04a.586.586 0 0 1-.781-.04l-1.668-1.668a.586.586 0 0 1-.043-.78l1.043-1.29a5.36 5.36 0 0 1-.297-.71l-1.648-.177a.585.585 0 0 1-.524-.582v-2.36c0-.3.227-.55.524-.581l1.644-.176c.082-.242.184-.48.297-.71l-1.039-1.29a.586.586 0 0 1 .04-.781l1.667-1.664c.211-.211.55-.23.781-.043l1.29 1.039c.23-.113.468-.211.71-.297l.176-1.645a.585.585 0 0 1 .582-.523h2.36c.3 0 .55.227.582.523l.175 1.645c.242.082.48.184.711.297l1.29-1.04a.586.586 0 0 1 .78.04l1.668 1.668c.211.21.227.55.04.781l-1.04 1.29c.114.23.211.468.297.71l1.645.176a.585.585 0 0 1 .523.582v2.36c0 .296-.226.55-.523.581l-1.645.176a5.36 5.36 0 0 1-.296.711l1.042 1.29a.587.587 0 0 1-.043.78l-1.667 1.668a.586.586 0 0 1-.782.04l-1.285-1.04c-.23.114-.469.215-.715.297l-.172 1.645a.588.588 0 0 1-.586.523Zm-1.832-1.172h1.305l.16-1.508a.584.584 0 0 1 .43-.503c.414-.11.809-.274 1.18-.489a.59.59 0 0 1 .664.051l1.18.953.921-.922-.953-1.175a.584.584 0 0 1-.055-.665c.215-.367.38-.765.489-1.175a.594.594 0 0 1 .508-.434l1.503-.16V9.074l-1.503-.16a.584.584 0 0 1-.508-.43 4.872 4.872 0 0 0-.485-1.18.577.577 0 0 1 .051-.663l.95-1.18-.922-.922-1.176.953a.591.591 0 0 1-.664.051 4.792 4.792 0 0 0-1.18-.488.58.58 0 0 1-.43-.504l-.16-1.504H9.648l-.16 1.508a.588.588 0 0 1-.433.504c-.41.109-.805.273-1.176.488a.59.59 0 0 1-.664-.05l-1.176-.954-.922.922.953 1.176a.591.591 0 0 1 .051.664 4.793 4.793 0 0 0-.488 1.18.58.58 0 0 1-.504.43l-1.508.163v1.3l1.508.161c.242.027.441.2.504.434.11.41.273.808.488 1.175a.59.59 0 0 1-.05.665l-.954 1.175.922.922 1.18-.95a.584.584 0 0 1 .664-.054c.367.215.765.38 1.176.489a.593.593 0 0 1 .433.503Zm7.918-5.5Zm0 0",
draw: function(display) {
// override default icon
}
});
this.rule("Graphics", ["close", "button", "icon"]).setAll({
fill: am5.color(0x000000),
fillOpacity: 1,
svgPath: "M10 1.5A8.499 8.499 0 0 0 1.5 10c0 4.695 3.805 8.5 8.5 8.5s8.5-3.805 8.5-8.5a8.503 8.503 0 0 0-2.488-6.012A8.503 8.503 0 0 0 10 1.5Zm0 15a6.5 6.5 0 1 1 6.5-6.5 6.494 6.494 0 0 1-1.898 4.602A6.494 6.494 0 0 1 10 16.5Zm0 0 M12.852 7.398a.971.971 0 0 0-.704-.296.97.97 0 0 0-.699.296L10 8.852 8.602 7.449a.994.994 0 0 0-1.395.008.994.994 0 0 0-.008 1.395l1.403 1.398-1.403 1.398a.994.994 0 0 0 .008 1.395.994.994 0 0 0 1.395.008L10 11.648l1.398 1.403a.994.994 0 0 0 1.395-.008.994.994 0 0 0 .008-1.395l-1.403-1.398 1.403-1.398c.386-.399.41-1.028.05-1.454Zm0 0",
draw: function(display) {
// override default icon
}
});
}
}
root.setThemes([
am5themes_Animated.new(root),
MyTheme.new(root)
]);
class MyTheme extends am5.Theme {
setupDefaultRules() {
this.rule("Graphics", ["settings", "button", "icon"]).setAll({
fill: am5.color(0x000000),
fillOpacity: 1,
svgPath: "M11.48 17.578H9.121a.587.587 0 0 1-.582-.523l-.176-1.645a5.938 5.938 0 0 1-.71-.297l-1.286 1.04a.586.586 0 0 1-.781-.04l-1.668-1.668a.586.586 0 0 1-.043-.78l1.043-1.29a5.36 5.36 0 0 1-.297-.71l-1.648-.177a.585.585 0 0 1-.524-.582v-2.36c0-.3.227-.55.524-.581l1.644-.176c.082-.242.184-.48.297-.71l-1.039-1.29a.586.586 0 0 1 .04-.781l1.667-1.664c.211-.211.55-.23.781-.043l1.29 1.039c.23-.113.468-.211.71-.297l.176-1.645a.585.585 0 0 1 .582-.523h2.36c.3 0 .55.227.582.523l.175 1.645c.242.082.48.184.711.297l1.29-1.04a.586.586 0 0 1 .78.04l1.668 1.668c.211.21.227.55.04.781l-1.04 1.29c.114.23.211.468.297.71l1.645.176a.585.585 0 0 1 .523.582v2.36c0 .296-.226.55-.523.581l-1.645.176a5.36 5.36 0 0 1-.296.711l1.042 1.29a.587.587 0 0 1-.043.78l-1.667 1.668a.586.586 0 0 1-.782.04l-1.285-1.04c-.23.114-.469.215-.715.297l-.172 1.645a.588.588 0 0 1-.586.523Zm-1.832-1.172h1.305l.16-1.508a.584.584 0 0 1 .43-.503c.414-.11.809-.274 1.18-.489a.59.59 0 0 1 .664.051l1.18.953.921-.922-.953-1.175a.584.584 0 0 1-.055-.665c.215-.367.38-.765.489-1.175a.594.594 0 0 1 .508-.434l1.503-.16V9.074l-1.503-.16a.584.584 0 0 1-.508-.43 4.872 4.872 0 0 0-.485-1.18.577.577 0 0 1 .051-.663l.95-1.18-.922-.922-1.176.953a.591.591 0 0 1-.664.051 4.792 4.792 0 0 0-1.18-.488.58.58 0 0 1-.43-.504l-.16-1.504H9.648l-.16 1.508a.588.588 0 0 1-.433.504c-.41.109-.805.273-1.176.488a.59.59 0 0 1-.664-.05l-1.176-.954-.922.922.953 1.176a.591.591 0 0 1 .051.664 4.793 4.793 0 0 0-.488 1.18.58.58 0 0 1-.504.43l-1.508.163v1.3l1.508.161c.242.027.441.2.504.434.11.41.273.808.488 1.175a.59.59 0 0 1-.05.665l-.954 1.175.922.922 1.18-.95a.584.584 0 0 1 .664-.054c.367.215.765.38 1.176.489a.593.593 0 0 1 .433.503Zm7.918-5.5Zm0 0",
draw: function(display) {
// override default icon
}
});
this.rule("Graphics", ["close", "button", "icon"]).setAll({
fill: am5.color(0x000000),
fillOpacity: 1,
svgPath: "M10 1.5A8.499 8.499 0 0 0 1.5 10c0 4.695 3.805 8.5 8.5 8.5s8.5-3.805 8.5-8.5a8.503 8.503 0 0 0-2.488-6.012A8.503 8.503 0 0 0 10 1.5Zm0 15a6.5 6.5 0 1 1 6.5-6.5 6.494 6.494 0 0 1-1.898 4.602A6.494 6.494 0 0 1 10 16.5Zm0 0 M12.852 7.398a.971.971 0 0 0-.704-.296.97.97 0 0 0-.699.296L10 8.852 8.602 7.449a.994.994 0 0 0-1.395.008.994.994 0 0 0-.008 1.395l1.403 1.398-1.403 1.398a.994.994 0 0 0 .008 1.395.994.994 0 0 0 1.395.008L10 11.648l1.398 1.403a.994.994 0 0 0 1.395-.008.994.994 0 0 0 .008-1.395l-1.403-1.398 1.403-1.398c.386-.399.41-1.028.05-1.454Zm0 0",
draw: function(display) {
// override default icon
}
});
}
}
root.setThemes([
am5themes_Animated.new(root),
MyTheme.new(root)
]);
Comment
By default, Stock chart uses a custom draw function for its icons.
In the above code, in a theme, we override draw with an empty function, so that default behavior is disabled.
Then we use icon's svgPath setting, to supply an SVG path, which will actually be used to draw the custom icon.
We can also provide additional settings, like fill and stroke colors, strokeOpacity, fillOpacity, centerX / centerY settings, and any other Graphics setting.
Example
See the Pen Custom icons in StockChart by amCharts team (@amcharts) on CodePen.