scripts/swiperCharts.js

const charts = {}

function initBarChart() {
  if (charts.barChart) return
  charts.barChart = new Chart(document.getElementById('BarChart-slider'), {
    type: 'bar',
    data: {
      labels: ['q', 'w', 'e', 'r', 't', 'y'],
      datasets: [
        {
          label: 'Dataset 1',
          data: [520, 760, 240, 433, 156, 380],
          backgroundColor: '#64bbf3',
        },
        {
          label: 'Dataset 2',
          data: [450, 810, 370, 400, 215, 300],
          backgroundColor: '#ee6c71',
        },
      ],
    },
    options: {
      responsive: true,
      plugins: {
        legend: {
          position: 'top',
        },
        title: {
          display: true,
          text: 'Chart.js Bar Chart',
        },
      },
    },
  })
}

function initLineChart() {
  if (charts.lineChart) return
  charts.lineChart = new Chart(document.getElementById('LineChart-slider'), {
    type: 'line',
    data: {
      labels: ['qq', 'w', 'e', 'r', 't', 'y'],
      datasets: [
        {
          label: 'Dataset 1',
          data: [520, 760, 240, 433, 156, 380],
          backgroundColor: '#64bbf3',
        },
        {
          label: 'Dataset 2',
          data: [450, 810, 370, 400, 215, 300],
          backgroundColor: '#ee6c71',
        },
      ],
    },
    options: {
      responsive: true,
      plugins: {
        title: {
          display: true,
          text: 'Chart.js Line Chart',
        },
      },
    },
  })
}

function initPieChart() {
  if (charts.pieChart) return
  charts.pieChart = new Chart(document.getElementById('PieChart-slider'), {
    type: 'pie',
    data: {
      labels: ['1', '2', '3'],
      datasets: [
        {
          label: 'Dataset 1',
          data: [50, 15, 35],
          backgroundColor: ['#64bbf3', '#ee6c71', '#fecc4e'],
        },
      ],
    },
    options: {
      responsive: true,
      plugins: {
        legend: {
          labels: {
            boxWidth: 15,
            padding: 15,
          },
        },
        title: {
          display: true,
          text: 'Chart.js Pie Chart',
        },
      },
    },
  })
}

initBarChart()

var swiperOnButton = new Swiper('.my-swiper-on-button', {
  loop: false,
})

function onSlideChange() {
  const activeIndex = swiperOnButton.realIndex

  ;['barChart', 'lineChart', 'pieChart'].forEach((key) => {
    if (charts[key]) {
      charts[key].destroy()
      charts[key] = null
    }
  })

  if (activeIndex === 0) initBarChart()
  if (activeIndex === 1) initLineChart()
  if (activeIndex === 2) initPieChart()
}

swiperOnButton.on('slideChange', onSlideChange)

document.querySelectorAll('[data-slide-to]').forEach((button) => {
  button.addEventListener('click', () => {
    console.log(
      'click',
      charts,
      button.getAttribute('data-slide-to'),
      parseInt(button.getAttribute('data-slide-to'))
    )
    document.querySelectorAll('.swiper-button').forEach((btn) => {
      btn.classList.remove('active')
    })
    button.classList.add('active')
    const index = parseInt(button.getAttribute('data-slide-to'))
    swiperOnButton.slideTo(index)

    setTimeout(() => {
      onSlideChange()
    }, 10)
  })
})