Class

Chart

kiss.ux.Chart(config)

The chart derives from Component.

Encapsulates original Chart.js bar chart inside a KissJS UI component: https://www.chartjs.org/

Constructor

# new Chart(config)

Its a Custom Web Component. Do not use the constructor directly with the new keyword. Instead, use one of the 3 following methods:

Create the Web Component and call its init method:

const myChart = document.createElement("a-chart").init(config)

Or use the shorthand for it:

const myChart = createChart({
 chartType: "bar",
 data: {...},
 options: {...},
 width: 300,
 height: 200
})

myChart.render()

Or directly declare the config inside a container component:

const myPanel = createPanel({
  title: "My panel",
  items: [
      {
         type: "chart",
         chartType: "bar",
         data: {...},
         options: {...},
         width: 300,
         height: 200
      }
  ]
})
myPanel.render()
Parameters:
Name Type Attributes Description
config object
chartType string

Chart type (bar, line, pie, doughnut, radar, polarArea, bubble, scatter)

data object

Chart data

options object

Chart options

width integer <optional>

Width in pixels

height integer <optional>

Height in pixels

useCDN boolean <optional>

Set to false to use the local version of OpenLayers. Default is true.

View Source client/ux/chart/chart.js, line 23

this

Generated markup

<a-chart class="a-chart">
</a-chart>

Methods

# setHeight(height)

Set the height of the map

Parameters:
Name Type Description
height number

View Source client/ux/chart/chart.js, line 160

this

# setWidth(width)

Set the width of the map

Parameters:
Name Type Description
width number

View Source client/ux/chart/chart.js, line 149

this