Salary Chart Examples

import SalaryChart from '../components/visualization/SalaryChart.astro'

<SalaryChart 
  id="my-chart" 
  title="My Chart Title" 
  type="bar"
  height={350}
/>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const data = [
      { label: 'Category 1', value: 100 },
      { label: 'Category 2', value: 200 },
      { label: 'Category 3', value: 150 }
    ];
    
    window.initializeChart('chart-my-chart', data, {
      xAxisLabel: 'Categories',
      yAxisLabel: 'Values',
      showValues: true
    });
  });
</script>

// Chart options
const options = {
  margin: { top: 30, right: 30, bottom: 60, left: 60 },
  colors: ['#2563eb', '#10b981', '#f59e0b', '#ef4444'],
  animate: true,
  showLegend: true,
  showTooltip: true,
  showValues: true,  // For bar charts
  showLabels: true,  // For pie charts
  showPercentages: true,  // For pie charts
  innerRadius: 70,  // For donut charts
  xAxisLabel: 'X Axis',
  yAxisLabel: 'Y Axis',
  valueFormat: (d) => '$' + d.toLocaleString()
};