Third-party plugins

Charts

Charts are visual tools that simplify complex data sets, making information more accessible. They include line, bar, and pie charts for specific trends.

Getting started

Setup

Below are the comprehensively outlined steps you can follow to seamlessly integrate <a href="https://apexcharts.com/docs/installation/" target="_blank" class="link link-primary">Apexcharts JS</a> with Semji.

npm i apexcharts lodash

<head>
  <link rel="stylesheet" href="../path/to/apexcharts/apexcharts.css" />
</head>
<body>
  <script src="../path/to/lodash/lodash.js"></script>
  <script src="../path/to/apexcharts/dist/apexcharts.js"></script>
</body>

<script src="./node_modules/flyonui/dist/helper-apexcharts.js"></script>
JavaScript
// helper.js
buildChart('#id', () => ({ /* Chart details */ }))

// Default Apexchart init
const areaChartEl = document.querySelector('#id'),
areaChartConfig = {
  ...
}
if (typeof areaChartEl !== undefined && areaChartEl !== null) {
  const areaChart = new ApexCharts(areaChartEl, areaChartConfig)
  areaChart.render()
}

Basic example

Single area chart

The example below demonstrates how to use a single area chart with Helper.js.

Without helper js

Helper.js offers four different tooltip designs and includes an auto-init function, eliminating the need for manual initialization. However, if you prefer, you can remove the Helper.js file and use the default Apex chart initialization. Below is an example, but keep in mind that you will need to enable the vendor option in the config file for CSS generation.

Illustrations

Multiple area charts

The following example demonstrates the usage of a multiple area charts.

Multiple area charts (comparison tooltip)

The following example demonstrates the usage of a multiple area charts with comparison tooltip.

Multiple area charts (comparison alternative)

The following example demonstrates the usage of a multiple area charts with alternative comparison tooltip.

Curved area charts

The following example demonstrates the usage of a curved area charts.

Column chart

The following example demonstrates the usage of a Column chart.

Multiple column charts

The following example demonstrates the usage of a multiple column charts.

Single line chart

The following example demonstrates the usage of a single line chart.

Multiple line charts

The following example demonstrates the usage of a multiple line charts.

Curved line charts

The following example demonstrates the usage of a Curved line charts.

Horizontal bar chart

The following example demonstrates the usage of a Horizontal bar chart.

Doughnut chart

The following example demonstrates the usage of a doughnut chart.

Bubble chart

The following example demonstrates the usage of a bubble chart.

Pie chart

The following example demonstrates the usage of a pie chart.

Radial bar chart

The following example demonstrates the usage of a radial bar chart.

Radar chart

The following example demonstrates the usage of a radar chart.

Small sized sparklines

The following example demonstrates the usage of a small sized sparkline charts.

  • Chart types Description
  • Inline area chart.
  • Inline bar chart.
  • Inline pie chart.
  • Inline line chart.
  • Inline candles chart.