Name: Highcharts
Author: mosabsayyed

스킬 검색.../

Highcharts | Skills Pool

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
  <div id="container" style="width: 100%; height: 400px;"></div>
  <script>
    Highcharts.chart('container', {
      title: {
        text: 'Monthly Sales'
      },
      subtitle: {
        text: 'Source: Sales Department'
      },
      xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
      },
      yAxis: {
        title: {
          text: 'Sales (units)'
        }
      },
      series: [{
        name: 'Product A',
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0]
      }],
      credits: {
        enabled: false
      }
    });
  </script>
</body>
</html>

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Quarterly Revenue Comparison'
  },
  xAxis: {
    categories: ['Q1', 'Q2', 'Q3', 'Q4']
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Revenue (thousands)'
    }
  },
  tooltip: {
    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
      '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
    footerFormat: '</table>',
    shared: true,
    useHTML: true
  },
  plotOptions: {
    column: {
      pointPadding: 0.2,
      borderWidth: 0
    }
  },
  series: [{
    name: '2023',
    data: [49.9, 71.5, 106.4, 129.2]
  }, {
    name: '2024',
    data: [83.6, 78.8, 98.5, 93.4]
  }]
});

Highcharts.chart('container', {
  chart: {
    type: 'pie'
  },
  title: {
    text: 'Browser Market Share'
  },
  tooltip: {
    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  },
  accessibility: {
    point: {
      valueSuffix: '%'
    }
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      dataLabels: {
        enabled: true,
        format: '<b>{point.name}</b>: {point.percentage:.1f} %'
      },
      showInLegend: true
    }
  },
  series: [{
    name: 'Share',
    colorByPoint: true,
    data: [{
      name: 'Chrome',
      y: 61.41,
      sliced: true,
      selected: true
    }, {
      name: 'Firefox',
      y: 11.84
    }, {
      name: 'Edge',
      y: 4.67
    }, {
      name: 'Safari',
      y: 4.18
    }, {
      name: 'Other',
      y: 17.9
    }]
  }]
});

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<div id="container"></div>

<script>
// Load stock data from CSV
fetch('../data/stock_prices.csv')
  .then(response => response.text())
  .then(csvText => {
    const lines = csvText.split('\n');
    const data = [];

    for (let i = 1; i < lines.length; i++) {
      const row = lines[i].split(',');
      if (row.length >= 2) {
        const date = new Date(row[0]).getTime();
        const price = parseFloat(row[1]);
        data.push([date, price]);
      }
    }

    Highcharts.stockChart('container', {
      rangeSelector: {
        selected: 1
      },
      title: {
        text: 'Stock Price History'
      },
      series: [{
        name: 'Price',
        data: data,
        tooltip: {
          valueDecimals: 2
        }
      }],
      navigator: {
        enabled: true
      },
      scrollbar: {
        enabled: true
      }
    });
  });
</script>

Highcharts.chart('container', {
  title: {
    text: 'Sales vs Profit Margin'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  },
  yAxis: [{
    title: {
      text: 'Sales'
    }
  }, {
    title: {
      text: 'Profit Margin (%)'
    },
    opposite: true
  }],
  tooltip: {
    shared: true
  },
  series: [{
    type: 'column',
    name: 'Sales',
    data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0]
  }, {
    type: 'spline',
    name: 'Profit Margin',
    yAxis: 1,
    data: [15.2, 16.8, 18.9, 19.3, 20.1, 21.4],
    marker: {
      enabled: true
    },
    dashStyle: 'shortdot'
  }]
});

Highcharts.chart('container', {
  chart: {
    type: 'heatmap'
  },
  title: {
    text: 'Sales per employee per weekday'
  },
  xAxis: {
    categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']
  },
  yAxis: {
    categories: ['Employee 1', 'Employee 2', 'Employee 3', 'Employee 4', 'Employee 5'],
    title: null
  },
  colorAxis: {
    min: 0,
    minColor: '#FFFFFF',
    maxColor: Highcharts.getOptions().colors[0]
  },
  legend: {
    align: 'right',
    layout: 'vertical',
    margin: 0,
    verticalAlign: 'top',
    y: 25,
    symbolHeight: 280
  },
  tooltip: {
    formatter: function () {
      return '<b>' + this.series.yAxis.categories[this.point.y] + '</b> sold <br><b>' +
        this.point.value + '</b> items on <br><b>' + this.series.xAxis.categories[this.point.x] + '</b>';
    }
  },
  series: [{
    name: 'Sales per employee',
    borderWidth: 1,
    data: [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67],
           [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48],
           [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52],
           [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16],
           [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115]],
    dataLabels: {
      enabled: true,
      color: '#000000'
    }
  }]
});

<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>
<div id="container"></div>

<script>
Highcharts.ganttChart('container', {
  title: {
    text: 'Project Timeline'
  },
  xAxis: {
    min: Date.UTC(2024, 0, 1),
    max: Date.UTC(2024, 11, 31)
  },
  series: [{
    name: 'Project Tasks',
    data: [{
      name: 'Planning',
      start: Date.UTC(2024, 0, 1),
      end: Date.UTC(2024, 1, 15),
      completed: 1
    }, {
      name: 'Development',
      start: Date.UTC(2024, 1, 15),
      end: Date.UTC(2024, 7, 1),
      completed: 0.65,
      dependency: 'Planning'
    }, {
      name: 'Testing',
      start: Date.UTC(2024, 6, 1),
      end: Date.UTC(2024, 9, 1),
      completed: 0.3,
      dependency: 'Development'
    }, {
      name: 'Deployment',
      start: Date.UTC(2024, 9, 1),
      end: Date.UTC(2024, 10, 15),
      completed: 0,
      dependency: 'Testing'
    }]
  }]
});
</script>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<div id="container"></div>

<script>
Highcharts.chart('container', {
  chart: {
    type: 'column',
    options3d: {
      enabled: true,
      alpha: 15,
      beta: 15,
      depth: 50,
      viewDistance: 25
    }
  },
  title: {
    text: '3D Column Chart'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
  },
  yAxis: {
    title: {
      text: 'Sales'
    }
  },
  plotOptions: {
    column: {
      depth: 25
    }
  },
  series: [{
    name: 'Sales',
    data: [29.9, 71.5, 106.4, 129.2, 144.0]
  }]
});
</script>

Highcharts.chart('container', {
  chart: {
    type: 'spline',
    animation: Highcharts.svg,
    marginRight: 10,
    events: {
      load: function () {
        var series = this.series[0];
        setInterval(function () {
          var x = (new Date()).getTime(),
              y = Math.random() * 100;
          series.addPoint([x, y], true, true);
        }, 1000);
      }
    }
  },
  time: {
    useUTC: false
  },
  title: {
    text: 'Live Random Data'
  },
  xAxis: {
    type: 'datetime',
    tickPixelInterval: 150
  },
  yAxis: {
    title: {
      text: 'Value'
    },
    plotLines: [{
      value: 0,
      width: 1,
      color: '#808080'
    }]
  },
  tooltip: {
    headerFormat: '<b>{series.name}</b><br/>',
    pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}'
  },
  legend: {
    enabled: false
  },
  exporting: {
    enabled: false
  },
  series: [{
    name: 'Random data',
    data: (function () {
      var data = [],
          time = (new Date()).getTime(),
          i;

      for (i = -19; i <= 0; i += 1) {
        data.push({
          x: time + i * 1000,
          y: Math.random() * 100
        });
      }
      return data;
    }())
  }]
});

Highcharts.chart('container', {
  accessibility: {
    enabled: true,
    description: 'Chart showing sales trends over time',
    keyboardNavigation: {
      enabled: true
    }
  },
  // ... rest of config
});

Highcharts

Highcharts Enterprise Charting Skill

When to Use This Skill

Highcharts

Highcharts Enterprise Charting Skill

When to Use This Skill

Core Capabilities

1. Basic Line Chart

2. Column Chart with Multiple Series

3. Pie Chart with Drilldown

Complete Examples

Example 1: Stock Chart with Time Series

Example 2: Combination Chart (Column + Line)

Example 3: Heatmap

Example 4: Gantt Chart

Example 5: 3D Chart

Example 6: Live Updating Chart

Best Practices

1. Enable Accessibility

2. Customize Tooltips

Visualization Expert

Data Analyst

Huggingface Hub

Multi Reviewer Patterns

Dbt Transformation Patterns

Startup Financial Modeling