Skip to content
amCharts 5

Custom icons in Stock Chart

This demo shows how we can use a custom theme to override the look of icons used in a StockChart.

Code

Section titled “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)
]);

Comment

Section titled “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

Section titled “Example”
Open in CodePen