You can use the the CDNs to create charts using Chartisan in your application. We recommend to use a module bundler like Webpack or Rollup and NPM to use project, but you have the freedom to try it out with the CDNs first. That said, to use Chartisan with the CDNs you will first need to import the library that you're willing to use, and then import the Chartisan adapter for it. Once this is done, you may add a container to the HTML page as shown below. The container is where the chart will be rendered and the chart will grab the container's dimensions and turn itself in a responsible mode. You should always set the container's height.
Chartisan provides two variables that are bound to the global
window object. Therefore, you can access them by just including chartisan from a CDN or a local path. The first global variable that can be seen in this example is called
Chartisan and it's a class you can use to create a chart. It accepts the chart options in the constructor. You can check all the options allowed in the fron-end's API section. The other one is called
ChartisanHooks and will be discussed in the customization chapter.
To illustrate a basic example, we have to provide the chart with an element
el. The element can be a string or a DOM element previously queried. We also need to provide a way for the chart to get the data from. This can either be a URL by specifying the property
url (in case we have a back-end chart adapter setup at the given URL) or by providing the data ourselves by using the
The same steps apply as the CDN inclusion but this time, we can use NPM to install the front-end library and the adapter. Once the installation is complete, you may simply import
Chartisan as the following example showcases.
The Chartisan class is the same as the one shown in the above example. You can check the API on the front-end section. You may now continue to the next section to customize the chart.