Chart - JS + CSS

Chart

ReactVueJS + CSS

Struktur HTML

Copy

<div id="chartLine"></div>

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
  var options = {
    chart: {
      type: 'line',
    },
    series: [
      { name: 'Sales', data: [10, 22, 15, 30, 28, 40, 38, 50, 45, 60, 62, 70] },
      { name: 'Revenue', data: [8, 18, 12, 25, 24, 35, 32, 44, 40, 55, 57, 65] },
    ],
    xaxis: {
      categories: [
        'Jan',
        'Feb',
        'Mar',
        'Apr',
        'May',
        'Jun',
        'Jul',
        'Aug',
        'Sep',
        'Oct',
        'Nov',
        'Dec',
      ],
    },
    legends: {
      position: 'top',
    },
  };

  var chart = new ApexCharts(document.querySelector('#chartLine'), options);
  chart.render();
</script>

Contoh Penggunaan

INA Digital Design System menggunakan pustaka grafik pihak ketiga yaitu

ApexCharts

Dalam penggunaannya, diharapkan implementor dapat melakukan customisasi value options dari chart (seperti warna, spacing, dan font style) agar sesuai dengan panduan desain IDDS. Lihat dokumentasi ApexCharts untuk detail implementasi dan konfigurasi yang tersedia.

Contoh 1 - Line Chart

Preview Code

Pilih Tema

INAgov PANRB BKN LAN BGN Default

Pilih Tema

INAgov

PANRB

BKN

LAN

BGN

Default

Copy

<div class="p-5">
  <BrandSelector class="mb-4" />
  <div id="chartLine"></div>
</div>

<script is:inline>
  function initChart() {
    const chartContainer = document.querySelector('#chartLine');
    if (!chartContainer || chartContainer.dataset.chartInitialized) return;

    if (!window.ApexCharts) {
      setTimeout(initChart, 100);
      return;
    }

    chartContainer.dataset.chartInitialized = 'true';

    function getCSSVariable(variableName) {
      const root = document.documentElement;
      const value = getComputedStyle(root).getPropertyValue(variableName).trim();
      return value || '#3b82f6';
    }

    function getBrandColors() {
      return [
        getCSSVariable('--ina-primary-500'),
        getCSSVariable('--ina-primary-300'),
        getCSSVariable('--ina-primary-700'),
        getCSSVariable('--ina-primary-400'),
      ];
    }

    var options = {
      chart: {
        type: 'line',
        height: 350,
      },
      series: [
        { name: 'Sales', data: [10, 22, 15, 30, 28, 40, 38, 50, 45, 60, 62, 70] },
        { name: 'Revenue', data: [8, 18, 12, 25, 24, 35, 32, 44, 40, 55, 57, 65] },
      ],
      xaxis: {
        categories: [
          'Jan',
          'Feb',
          'Mar',
          'Apr',
          'May',
          'Jun',
          'Jul',
          'Aug',
          'Sep',
          'Oct',
          'Nov',
          'Dec',
        ],
      },
      legend: {
        position: 'top',
      },
      colors: getBrandColors(),
    };

    var chart = new ApexCharts(chartContainer, options);
    chart.render();

    document.addEventListener('brand:change', function () {
      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          chart.updateOptions({
            colors: getBrandColors(),
          });
        });
      });
    });
  }

  document.addEventListener('astro:page-load', initChart);
  if (document.readyState === 'complete' || document.readyState === 'interactive') {
    initChart();
  } else {
    document.addEventListener('DOMContentLoaded', initChart);
  }
</script>

Contoh 2 - Area Chart

Preview Code

Pilih Tema

INAgov PANRB BKN LAN BGN Default

Pilih Tema

INAgov

PANRB

BKN

LAN

BGN

Default

Copy

<div class="p-5">
  <BrandSelector class="mb-4" />
  <div id="chartArea"></div>
</div>

<script is:inline>
  function initChart() {
    const chartContainer = document.querySelector('#chartArea');
    if (!chartContainer || chartContainer.dataset.chartInitialized) return;

    if (!window.ApexCharts) {
      setTimeout(initChart, 100);
      return;
    }

    chartContainer.dataset.chartInitialized = 'true';

    function getCSSVariable(variableName) {
      const root = document.documentElement;
      const value = getComputedStyle(root).getPropertyValue(variableName).trim();
      return value || '#3b82f6';
    }

    function getBrandColors() {
      return [
        getCSSVariable('--ina-primary-500'),
        getCSSVariable('--ina-primary-300'),
        getCSSVariable('--ina-primary-700'),
      ];
    }

    var options = {
      chart: {
        type: 'area',
        toolbar: { show: false },
      },
      stroke: {
        curve: 'smooth',
        width: 2,
      },
      fill: {
        type: 'gradient',
        gradient: {
          shadeIntensity: 1,
          opacityFrom: 0.7,
          opacityTo: 0.1,
        },
      },
      series: [{ name: 'Total Transaksi', data: [12, 18, 25, 20, 30, 45, 50, 55, 48, 60, 65, 70] }],
      xaxis: {
        categories: [
          'Jan',
          'Feb',
          'Mar',
          'Apr',
          'May',
          'Jun',
          'Jul',
          'Aug',
          'Sep',
          'Oct',
          'Nov',
          'Dec',
        ],
      },
      colors: getBrandColors(),
    };

    var chart = new ApexCharts(chartContainer, options);
    chart.render();

    document.addEventListener('brand:change', function () {
      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          chart.updateOptions({
            colors: getBrandColors(),
          });
        });
      });
    });
  }

  document.addEventListener('astro:page-load', initChart);
  if (document.readyState === 'complete' || document.readyState === 'interactive') {
    initChart();
  } else {
    document.addEventListener('DOMContentLoaded', initChart);
  }
</script>

Contoh 3 - Bar Chart

Preview Code

Pilih Tema

INAgov PANRB BKN LAN BGN Default

Pilih Tema

INAgov

PANRB

BKN

LAN

BGN

Default

Copy

<div class="p-5">
  <BrandSelector class="mb-4" />
  <div id="chartBar"></div>
</div>

<script is:inline>
  function initChart() {
    const chartContainer = document.querySelector('#chartBar');
    if (!chartContainer || chartContainer.dataset.chartInitialized) return;

    if (!window.ApexCharts) {
      setTimeout(initChart, 100);
      return;
    }

    chartContainer.dataset.chartInitialized = 'true';

    function getCSSVariable(variableName) {
      const root = document.documentElement;
      const value = getComputedStyle(root).getPropertyValue(variableName).trim();
      return value || '#3b82f6';
    }

    function getBrandColors() {
      return [
        getCSSVariable('--ina-primary-500'),
        getCSSVariable('--ina-primary-300'),
        getCSSVariable('--ina-primary-700'),
        getCSSVariable('--ina-primary-400'),
      ];
    }

    var options = {
      chart: {
        type: 'bar',
        height: 400,
        toolbar: { show: false },
      },
      series: [
        { name: 'Data 1', data: [12, 18, 25, 20, 30, 45] },
        { name: 'Data 2', data: [10, 14, 22, 28, 26, 38] },
      ],
      xaxis: {
        categories: [
          'Category 1',
          'Category 2',
          'Category 3',
          'Category 4',
          'Category 5',
          'Category 6',
        ],
      },
      legend: { position: 'top' },
      plotOptions: {
        bar: {
          horizontal: true,
          columnWidth: '60%',
        },
      },
      colors: getBrandColors(),
    };

    var chart = new ApexCharts(chartContainer, options);
    chart.render();

    document.addEventListener('brand:change', function () {
      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          chart.updateOptions({
            colors: getBrandColors(),
          });
        });
      });
    });
  }

  document.addEventListener('astro:page-load', initChart);
  if (document.readyState === 'complete' || document.readyState === 'interactive') {
    initChart();
  } else {
    document.addEventListener('DOMContentLoaded', initChart);
  }
</script>

Contoh 4 - Column Chart

Preview Code

Pilih Tema

INAgov PANRB BKN LAN BGN Default

Pilih Tema

INAgov

PANRB

BKN

LAN

BGN

Default

Copy

<div class="p-5">
  <BrandSelector class="mb-4" />
  <div id="chartColumn"></div>
</div>

<script is:inline>
  function initChart() {
    const chartContainer = document.querySelector('#chartColumn');
    if (!chartContainer || chartContainer.dataset.chartInitialized) return;

    if (!window.ApexCharts) {
      setTimeout(initChart, 100);
      return;
    }

    chartContainer.dataset.chartInitialized = 'true';

    function getCSSVariable(variableName) {
      const root = document.documentElement;
      const value = getComputedStyle(root).getPropertyValue(variableName).trim();
      return value || '#3b82f6';
    }

    function getBrandColors() {
      return [
        getCSSVariable('--ina-primary-500'),
        getCSSVariable('--ina-primary-300'),
        getCSSVariable('--ina-primary-700'),
        getCSSVariable('--ina-primary-400'),
      ];
    }

    var options = {
      chart: {
        type: 'bar',
        height: 400,
        toolbar: { show: false },
      },
      series: [
        { name: 'Data 1', data: [12, 18, 25, 20, 30, 45] },
        { name: 'Data 2', data: [10, 14, 22, 28, 26, 38] },
      ],
      xaxis: {
        categories: [
          'Category 1',
          'Category 2',
          'Category 3',
          'Category 4',
          'Category 5',
          'Category 6',
        ],
      },
      legend: { position: 'top' },
      plotOptions: {
        bar: {
          horizontal: false,
          columnWidth: '60%',
        },
      },
      colors: getBrandColors(),
    };

    var chart = new ApexCharts(chartContainer, options);
    chart.render();

    document.addEventListener('brand:change', function () {
      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          chart.updateOptions({
            colors: getBrandColors(),
          });
        });
      });
    });
  }

  document.addEventListener('astro:page-load', initChart);
  if (document.readyState === 'complete' || document.readyState === 'interactive') {
    initChart();
  } else {
    document.addEventListener('DOMContentLoaded', initChart);
  }
</script>

Contoh 5 - Pie Chart

Preview Code

Pilih Tema

INAgov PANRB BKN LAN BGN Default

Pilih Tema

INAgov

PANRB

BKN

LAN

BGN

Default

Copy

<div class="p-5">
  <BrandSelector class="mb-4" />
  <div id="chartPie"></div>
</div>

<script is:inline>
  function initChart() {
    const chartContainer = document.querySelector('#chartPie');
    if (!chartContainer || chartContainer.dataset.chartInitialized) return;

    if (!window.ApexCharts) {
      setTimeout(initChart, 100);
      return;
    }

    chartContainer.dataset.chartInitialized = 'true';

    function getCSSVariable(variableName) {
      const root = document.documentElement;
      const value = getComputedStyle(root).getPropertyValue(variableName).trim();
      return value || '#3b82f6';
    }

    function getBrandColors() {
      return [
        getCSSVariable('--ina-primary-500'),
        getCSSVariable('--ina-primary-300'),
        getCSSVariable('--ina-primary-700'),
        getCSSVariable('--ina-primary-400'),
        getCSSVariable('--ina-primary-600'),
        getCSSVariable('--ina-primary-200'),
      ];
    }

    var options = {
      series: [10, 20, 5, 10, 25, 30],
      chart: {
        height: 350,
        type: 'pie',
      },
      labels: ['Data 1', 'Data 2', 'Data 3', 'Data 4', 'Data 5', 'Data 6'],
      legend: { position: 'right' },
      colors: getBrandColors(),
    };

    var chart = new ApexCharts(chartContainer, options);
    chart.render();

    document.addEventListener('brand:change', function () {
      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          chart.updateOptions({
            colors: getBrandColors(),
          });
        });
      });
    });
  }

  document.addEventListener('astro:page-load', initChart);
  if (document.readyState === 'complete' || document.readyState === 'interactive') {
    initChart();
  } else {
    document.addEventListener('DOMContentLoaded', initChart);
  }
</script>

Contoh 6 - Donut Chart

Preview Code

Pilih Tema

INAgov PANRB BKN LAN BGN Default

Pilih Tema

INAgov

PANRB

BKN

LAN

BGN

Default

Copy

<div class="p-5">
  <BrandSelector class="mb-4" />
  <div id="chartDonut"></div>
</div>

<script is:inline>
  function initChart() {
    const chartContainer = document.querySelector('#chartDonut');
    if (!chartContainer || chartContainer.dataset.chartInitialized) return;

    if (!window.ApexCharts) {
      setTimeout(initChart, 100);
      return;
    }

    chartContainer.dataset.chartInitialized = 'true';

    function getCSSVariable(variableName) {
      const root = document.documentElement;
      const value = getComputedStyle(root).getPropertyValue(variableName).trim();
      return value || '#3b82f6';
    }

    function getBrandColors() {
      return [
        getCSSVariable('--ina-primary-500'),
        getCSSVariable('--ina-primary-300'),
        getCSSVariable('--ina-primary-700'),
        getCSSVariable('--ina-primary-400'),
        getCSSVariable('--ina-primary-600'),
        getCSSVariable('--ina-primary-200'),
      ];
    }

    var options = {
      series: [10, 20, 5, 10, 25, 30],
      chart: {
        height: 350,
        type: 'donut',
      },
      labels: ['Data 1', 'Data 2', 'Data 3', 'Data 4', 'Data 5', 'Data 6'],
      legend: { position: 'right' },
      colors: getBrandColors(),
    };

    var chart = new ApexCharts(chartContainer, options);
    chart.render();

    document.addEventListener('brand:change', function () {
      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          chart.updateOptions({
            colors: getBrandColors(),
          });
        });
      });
    });
  }

  document.addEventListener('astro:page-load', initChart);
  if (document.readyState === 'complete' || document.readyState === 'interactive') {
    initChart();
  } else {
    document.addEventListener('DOMContentLoaded', initChart);
  }
</script>

Props

Komponen Chart menggunakan library

ApexCharts

sebagai basis. Untuk dokumentasi lengkap mengenai semua opsi dan konfigurasi yang tersedia, silakan kunjungi dokumentasi resmi ApexCharts.

Dokumentasi ApexCharts

Pelajari semua opsi konfigurasi, props, dan fitur yang tersedia di ApexCharts termasuk annotations, chart types, dan customization options.

Buka Dokumentasi

Di halaman ini

• Struktur HTML
• Contoh Penggunaan
• Props