@dschz/solid-highcharts/dist/index.jsx

SolidJS wrapper for Highcharts

// src/createChartComponent.tsx
import { createEffect, mergeProps, onCleanup, onMount, splitProps } from "solid-js";
var baseClass = "solid-highcharts";
var createChartComponent = (HighchartsModule, constructor = "chart") => {
  if (typeof HighchartsModule[constructor] !== "function") {
    throw new Error(
      `[solid-highcharts] Constructor "${constructor}" not found on Highcharts module. Did you import the correct variant (e.g., highstock, highmaps)?`
    );
  }
  return (props) => {
    let container;
    const _props = mergeProps(
      {
        animation: true
      },
      props
    );
    const [local, options] = splitProps(_props, [
      "style",
      "class",
      "ref",
      "animation",
      "onCreateChart"
    ]);
    onMount(() => {
      local.ref?.(container);
      const chart = HighchartsModule[constructor](container, options, local.onCreateChart);
      createEffect(() => {
        chart.update(options, true, true, local.animation);
      });
      onCleanup(() => {
        chart.destroy();
      });
    });
    const classes = () => local.class ? `${baseClass} ${local.class}` : baseClass;
    return <div ref={container} class={classes()} style={local.style} />;
  };
};

// src/index.tsx
var createChart = (HighchartsModule) => createChartComponent(HighchartsModule, "chart");
var createStockChart = (HighchartsModule) => createChartComponent(HighchartsModule, "stockChart");
var createMapChart = (HighchartsModule) => createChartComponent(HighchartsModule, "mapChart");
var createGanttChart = (HighchartsModule) => createChartComponent(HighchartsModule, "ganttChart");
export {
  createChart,
  createGanttChart,
  createMapChart,
  createStockChart
};