sanity-plugin-highcharts-editor

1.0.2 • Public • Published

Highcharts editor input plugin for Sanity CMS

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

Screenshot of Highcharts Editor in action

Screenshot of doughnut graph in rich text editor

Installation

  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

Usage

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 => {
  ReactDOM.render(
    <BlockContent blocks={post.content} serializers={serializers} />,
    document.getElementById("root")
  );
});

License

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.

Readme

Keywords

none

Package Sidebar

Install

npm i sanity-plugin-highcharts-editor

Weekly Downloads

1

Version

1.0.2

License

MIT

Unpacked Size

346 kB

Total Files

16

Last publish

Collaborators

  • nilsnh