Non-Chart Usage

As part of amCharts 4, we’ve built a powerful SVG graphics and interface building engine. Incidentally, you can use it to build all kinds of interactive SVG graphics, even interfaces with controls, that are not charts in purpose.

Creating generic container

For example, the below code will create a container with a draggable circle in it.

// let's create a very basic Container
let container = am4core.create("chartdiv", am4core.Container);
container.width = am4core.percent(100);
container.height = am4core.percent(100);
container.background.opacity = 1;
container.background.fill = am4core.color("#dadada");
container.background.fillOpacity = 0.5;

// Now let's create a circle in our container
let circle = container.createChild(am4core.Circle);
circle.radius = 50;
// let's put it in the middle. You can set x and y coordinates both as percent or as pixels.
circle.x = am4core.percent(50);
circle.y = am4core.percent(50);
circle.fill = am4core.color("#6794dc");

// Make it draggable with a mouse or with touch
circle.draggable = true;

// And, for the hell of it, make it inert, so that
// when we drag it and release it will continue in
// the same direction gradually slowing down.
circle.inert = true;

// Enable export menu
container.exporting.menu = new am4core.ExportMenu();

// Let's create a very basic Container
var container = am4core.create("chartdiv", am4core.Container);
container.width = am4core.percent(100);
container.height = am4core.percent(100);
container.background.opacity = 1;
container.background.fill = am4core.color("#dadada");
container.background.fillOpacity = 0.5;

// Now let's create a circle in our container
var circle = container.createChild(am4core.Circle);
circle.radius = 50;
// let's put it in the middle. You can set x and y coordinates both as percent or as pixels.
circle.x = am4core.percent(50);
circle.y = am4core.percent(50);
circle.fill = am4core.color("#6794dc");

// Make it draggable with a mouse or with touch
circle.draggable = true;

// And, for the hell of it, make it inert, so that
// when we drag it and release it will continue in
// the same direction gradually slowing down.
circle.inert = true;

// Enable export menu
container.exporting.menu = new am4core.ExportMenu();

// Let's create a very basic Container
var container = am4core.createFromConfig({
  "width": "100%",
  "height": "100%",
  "background": {
    "opacity": 1,
    "fill": "#dadada",
    "fillOpacity": 0.5
  },

  // Now let's create a circle in our container
  "children": [{
    "type": "Circle",
    "radius": 50,
    "x": "50%",
    "y": "50%",
    "fill": "#6794dc",

     // Make it draggable with a mouse or with touch
    "draggable": true,

    // And, for the hell of it, make it inert, so that
    // when we drag it and release it will continue in
    // the same direction gradually slowing down.
    "inert": true
  }],

  "exporting": {
    "menu": {}
  }
},"div1", am4core.Container);

Example

Here’s how this looks in real life:

Open in CodePen

Go ahead, drag the blue circle.

Just in case you feel adventurous, here’s an enhanced version of the demo above. Same old blue circle you’ve come to know and love, but better - with hover states, tooltip, and move animations.

Open in CodePen

This is just a preview of the topic. Eventually, this article will be filled out with detailed information. Stay tuned.

Related content

• Using curved labels