Best way to export same chart in multiple themes and filetypes?

[tylersticka]

Apologies if this is covered somewhere, but I'm new to the library and still wrapping my head around things. 🙂

I'm working on a project where we have the same set of data, but we want to export charts in two formats (SVG and PNG) and two styles (for separate websites with different brand guidelines). Ideally this would happen in Node rather than via the CLI, as the rest of our project is Node-based so it'll be a bit easier to maintain.

As an example, my project directory looks a little like this:

├── charts
│   ├── chart1.json
│   ├── chart2.json
│   └── chart3.json
└── themes
    ├── theme1.json
    └── theme2.json

I'm unclear from the documentation and issues I've read if it's actually possible to set the theme in this way, or if I need to compile the themes as JS files in resources that assign Highcharts.theme.

Thanks in advance for your help!

[cvasseng]

You should be able to use the (undocumented) themeOptions property to separate theme settings from chart options:

var exportSettings = {
    options: {..chart options...},
    themeOptions: {...theme options..}
};

exporter.export(exportSettings, function (err, res) {...}

So you could load your chart options into options, your theme into themeOption, and then set type to e.g. png or svg. If you need it in two formats per. export (or with two different themes), the best way is probably to mutate the exportSettings and do multiple calls to export(..).

[tylersticka]

Thanks for your response!

I tried using themeOptions but now I'm seeing errors:

Wed Feb 15 2017 09:29:27 GMT-0800 (PST) [error] phantom worker 7 unexpected data - SyntaxError: Expected token ']'

  undefined:1 in appendChild
  :15
  :16
{"filename":"chart.svg"}

The chart.svg is output but without any themeOptions applied.

I was worried this could be caused by some unrelated mistake in my code, so I stripped everything down to the barest essentials, but the issue still remains. Here's my complete simplified JS file:

const exporter = require('highcharts-export-server');

const options ={
  "chart": {
    "type": "pie"
  },
  "title": {
    "text": "Example Title"
  },
  "subtitle": {
    "text": "Example Subtitle"
  },
  "series": [{
    "showInLegend": true,
    "dataLabels": {
      "enabled": true,
      "format": "{y}"
    },
    "data": [
      {
        "y": 529,
        "name": "Data Sample 1"
      },
      {
        "y": 81,
        "name": "Data Sample 2"
      }
    ]
  }]
};

const themeOptions = {
  "lang": {
    "thousandsSep": ","
  },
  "chart": {
    "style": {
      "fontFamily": "\"proxima-nova\", sans-serif"
    }
  },
  "colors": [
    "#008fc4",
    "#46a088",
    "#e21836",
    "#f5d664",
    "#ff6b35",
    "#5b507a"
  ],
  "title": {
    "style": {
      "color": "#353536",
      "fontFamily": "\"proxima-nova-soft\", sans-serif",
      "fontWeight": "600"
    }
  },
  "subtitle": {
    "style": {
      "color": "#747476",
      "fontWeight": "600"
    }
  },
  "legend": {
    "itemStyle": {
      "fontWeight": "400",
      "color": "#353536"
    }
  }
};

const settings = {
  options: options,
  themeOptions: themeOptions,
  type: 'svg',
  outfile: 'chart.svg'
};

exporter.initPool();

exporter.export(settings, (err, res) => {
  exporter.killPool();
  process.exit(1);
});

[cvasseng]

Sorry for the delay!

bbbbfa1 adds a fix for this, I'll push it to NPM once I've taken care of a couple more issues.

Please feel free to reopen if you still experience issues with this.