# Highcharts With React

> Sub-skill of highcharts: With React (+1).

- Skill: `vamseeachanta/highcharts-with-react` (Agent Skill)
- Install (CLI): `npx skillmds@latest add vamseeachanta/highcharts-with-react`
- Raw SKILL.md: https://api.skillmd.com/api/skills/vamseeachanta/highcharts-with-react/raw
- Safety review: PASS (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: vamseeachanta (https://skillmd.com/u/vamseeachanta)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/vamseeachanta/highcharts-with-react

---


# With React (+1)

## With React

```jsx
import { useEffect, useRef } from 'react';
import Highcharts from 'highcharts';

function HighchartsComponent({ options }) {
  const chartRef = useRef(null);

  useEffect(() => {
    const chart = Highcharts.chart(chartRef.current, options);

    return () => {
      chart.destroy();
    };
  }, [options]);

  return <div ref={chartRef} />;
}
```


## With Vue

```vue
<template>
  <div ref="chartContainer"></div>
</template>

<script>
import Highcharts from 'highcharts';

export default {
  props: ['options'],
  mounted() {
    this.chart = Highcharts.chart(this.$refs.chartContainer, this.options);
  },
  beforeUnmount() {
    if (this.chart) {
      this.chart.destroy();
    }
  },
  watch: {
    options: {
      deep: true,
      handler(newOptions) {
        this.chart.update(newOptions);
      }
    }
  }
};
</script>
```