document.addEventListener("DOMContentLoaded", function() {
	var options = {
		chart: {
			height: 350,
			type: "rangeBar",
			zoom: {
				enabled: false
			},
			toolbar: {
				show: false
			},
			events: {
			  mounted: function(chartContext, config) {
				setTimeout(() => {  document.getElementsByClassName("apexcharts-subtitle-text")[0].addEventListener('click', clickDiv); }, 1000);
			  }
			}
					},
		title: {
			text: "rangeBar",
			align: 'left',
			margin: 0,
			offsetX: 0,
			offsetY: 0,
			floating: false,
			style: {
			  fontSize:  '14px',
			  fontWeight:  'bold',
			  fontFamily:  undefined,
			  color:  '#263238'
			}
		},
		subtitle: {
			  text: '© govstats.us',
			  align: 'right',
			  margin: 0,
			  offsetX: 0,
			  offsetY: 45, // 295
			  floating: true,
			  style: {
				fontSize:  '11px',
				fontWeight:  'normal',
				fontFamily:  undefined,
				color:  '#AAA',
				background: '#FFF'
			  },
		  },
		series: [
          {
            data: [
              {
                x: '2008',
                y: [2800, 4500]
              },
              {
                x: '2009',
                y: [3200, 4100]
              },
              {
                x: '2010',
                y: [2950, 7800]
              },
              {
                x: '2011',
                y: [3000, 4600]
              },
              {
                x: '2012',
                y: [3500, 4100]
              },
              {
                x: '2013',
                y: [4500, 6500]
              },
              {
                x: '2014',
                y: [4100, 5600]
              }
            ]
          }
        ]
					,plotOptions: {
          bar: {
            isDumbbell: true,
            columnWidth: 3,
            dumbbellColors: [['#008FFB', '#00E396']]
          }
        },
        legend: {
          show: true,
          showForSingleSeries: true,
          position: 'top',
          horizontalAlign: 'left',
          customLegendItems: ['Product A', 'Product B']
        },
        fill: {
          type: 'gradient',
          gradient: {
            type: 'vertical',
            gradientToColors: ['#00E396'],
            inverseColors: true,
            stops: [0, 100]
          }
        },
        grid: {
          xaxis: {
            lines: {
              show: true
            }
          },
          yaxis: {
            lines: {
              show: false
            }
          }
        },
        xaxis: {
          tickPlacement: 'on'
        }
			}
	var chart = new ApexCharts(
		document.querySelector("#chart"),
		options
	);
	chart.render();
	function clickDiv() { console.log("https://govstats.us/metric/rangebar"); }
	});