Highcharts editor

This plugin lets you embed the Highcharts Editor within Sanity.

Highcharts editor input plugin for Sanity CMS

This plugin let's you embed the Highcharts Editor within Sanity. Learn how I did it here.


  1. Run sanity install highcharts-editor to install the plugin.
  2. Copy the highcharts-assets/ folder into your Sanity project's static folder like so /static/highcharts-assets/.
  3. Run sanity start


Prerequisite: Knowledge of how Sanity does rich text.

After installing the plugin. In your schema where you define block content you can add:

export default {
  name: "content",
  type: "array",
  title: "Content",
  of: [
      type: "block"
      type: "highcharts"

If all works correctly you should now be able to create charts with the Sanity studio.

See HighchartsType.js, to see what data fields is saved.

How to display the chart

Prerequisite: Knowledge of presenting portable text. Based on the serializer example found there, we can add a serializer that either outputs svgStr directly, or outputs jsonStr with HighchartsReact like so:

import React from "react";
import ReactDOM from "react-dom";
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import BlockContent from "@sanity/block-content-to-react";
import initSanityClient from "@sanity/client";

const client = initSanityClient({
  projectId: "<your project id>",
  dataset: "<some dataset>",
  useCdn: true

const serializers = {
  types: {
    highcharts: ({ node: { jsonStr = "" } = {} }) => {
      try {
        const options = JSON.parse(jsonStr);
        return <HighchartsReact highcharts={Highcharts} options={options} />;
      } catch (e) {
        console.log("Failed to load highcharts options", e);

client.fetch('*[_type == "post"][0]').then(post => {
    <BlockContent blocks={post.content} serializers={serializers} />,


This plugin is licensed under the MIT license.

Please note: While the Highcharts editor is MIT licensed, Highcharts.js itself requires a paid license. If you're a non-profit organization you can apply to get a free license.

Code of Conduct

This project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.

Install command

sanity install highcharts-editor