API Reference

• cm.render - render a SVG element.
• cm.renderMark - render a mark.
• cm.svg - create a SVG mark.
• cm.html - create a HTML mark.
• cm.tag - create a new mark factory.
• mark.with - append children to mark.

cm.render(options)

cm.render({
  width: 200,
  height: 100,
  style_background: "black",
  marks: [
    cm.svg("circle", {
      cx: 100,
      cy: 50,
      r: 40,
      fill: "white",
    }),
  ],
});

cm.renderMark(mark)

cm.renderMark(
  cm.html("span", {
    textContent: "Hello Charming.js",
    style_color: "red",
  }),
);

cm.svg(tag[, data[, options]])

cm.render({
  width: 100,
  height: 50,
  marks: [
    cm.svg("circle", [1, 2, 3], {
      cx: (d) => d * 30,
      cy: 25,
      r: 10,
    }),
  ],
});

cm.html(tag[, data[, options]])

const table = [
  [11975, 5871, 8916, 2868],
  [1951, 10048, 2060, 6171],
  [8010, 16145, 8090, 8045],
  [1013, 990, 940, 6907],
];

cm.renderMark(
  cm.html("table").with([
    cm.html("tr", table).with([
      cm.html("td", (row) => row, {
        textContent: (d) => d,
      }),
    ]),
  ]),
);

cm.tag(namespace)

const math = cm.tag("http://www.w3.org/1998/Math/MathML");

cm.renderMark(
  math("math").with([
    math("mrow").with([
      math("mrow").with([
        math("mi", {textContent: "x"}),
        math("mo", {textContent: "∗"}),
        math("mn", {textContent: "2"}),
      ]),
      math("mo", {textContent: "+"}),
      math("mi", {textContent: "y"}),
    ]),
  ]),
);

mark.with(children)

const svg = cm.svg;

cm.render({
  width: 100,
  height: 50,
  marks: [
    svg("g", [1, 2, 3], {
      transform: (d) => `translate(${d * 30},${25})`,
      fill: "steelblue",
    }).with([
      svg("circle", [1, 2, 3], {
        r: 10,
      }),
    ]),
  ],
});