Creating a Chart

Charts are instantiated with a ChartConfig argument. Every property in a ChartConfig is optional, but you’ll probably want to at least provide a selector. The selector is a string that is used as a CSS selector to locate the DOM element that the Chart will be inserted into during instantiation.

Here, we’ll assume our page has a div with the id “soda-chart,” and we’ll instantiate a Chart that will be inserted into that div. We’ll call the Chart constructor with an anonymously defined ChartConfig that has the selector property set to the string “#soda-chart.”

let chart = new soda.Chart({
  selector: "#soda-chart",
});

---

Note

Running this code will indeed create a Chart in the selected div, but it will be completely blank. We’ll see how to start to add visual content to a Chart in the next section.

See the Pen Creating a Chart by Jack Roddy (@jackroddy) on CodePen.