chartisan.dev Open in urlscan Pro
2606:4700:3034::6815:57ac  Public Scan

Form analysis
0 forms found in the DOM

Text Content

News
Chartisan will be ported to mobile with Flutter if it meets the github goal.
Chartisan
Beta
Roadmap
Documentation
Github
Examples
Learn by watching complete examples of charts

Change preferences

General walk-through
Getting started
Installing adapters
Setting up data
Building charts
Customizing charts
Examples
Front-end
Creating charts
Hooks (Customization)
Updating charts
Deleting charts
Back-end
Preparing the data
The protocol
Extra fields
Framework-specific
React
Laravel
#
Simple example
#
Different datasets
Simple example
Base example of a chart
Loading chart

// This example only works for
// chart.js front-end library.

const chart = new Chartisan({
  el: '#chart',
  url: 'https://chartisan.dev/chart/example.json',
  hooks: new ChartisanHooks()
    .beginAtZero()
    .colors(),
})

Loading chart

// This example only works for
// echarts front-end library.

const chart = new Chartisan({
  el: '#chart',
  url: 'https://chartisan.dev/chart/example.json',
  hooks: new ChartisanHooks()
    .legend()
    .colors()
    .tooltip(),
})

Different datasets
Change the dataset types
Loading chart

// This example only works for
// chart.js front-end library.

const chart = new Chartisan({
  el: '#chart',
  url: 'https://chartisan.dev/chart/example.json',
  hooks: new ChartisanHooks()
    .beginAtZero()
    .colors()
    .borderColors()
    .datasets([{ type: 'line', fill: false }, 'bar']),
})

Loading chart

// This example only works for
// echarts front-end library.

const chart = new Chartisan({
  el: '#chart',
  url: 'https://chartisan.dev/chart/example.json',
  hooks: new ChartisanHooks()
    .legend()
    .colors()
    .datasets(['line', 'bar'])
    .tooltip(),
})

Loading chart

// This example only works for
// chart.js front-end library.

const chart = new Chartisan({
  el: '#chart',
  url: 'https://chartisan.dev/chart/example.json',
  hooks: new ChartisanHooks()
    .datasets('doughnut')
    .pieColors(),
})

Loading chart

// This example only works for
// echarts front-end library.

const chart = new Chartisan({
  el: '#chart',
  url: 'https://chartisan.dev/chart/example.json',
  hooks: new ChartisanHooks()
    .legend()
    .colors()
    .tooltip()
    .axis(false)
    .custom(({ data }) => ({
      ...data,
      series: data.series.map((serie: any) => ({
        ...serie,
        label: { show: false },
      })),
    }))
    .datasets([
      { type: 'pie', radius: ['40%', '60%'] },
      { type: 'pie', radius: ['10%', '30%'] },
    ]),
})

Copyright © 2021 Èrik C. Forés — All rights reserved.