Charts

- Does each chart have to be imported/created individually? Or can I do a bulk upload of charts?

At this time you must create each chart individually. A bulk upload option of existing charts in CSV/Google Spreadsheets etc. is currently not available. However, you may use our API for this.

- Am I limited to only the fonts available in everviz editor?

No, you can upload your custom font if you are on a Team Business plan. Read more here.

- Help! Why is my chart is not loading, or is just showing the background?

Sometimes the browser window around the chart is too small, so the entire chart won't fit, and therefore it will not render. This can happen if you create a too tall or wide chart, if you have some custom CSS attached to it, or if you are just using a very small device.

To fix this generally, you can disable animations, causing the chart to load immediately. In the Basic Editor, go to Animations and tick to enable "load chart on page load".

- What is a theme and how can I use it?

The theme feature allows you to create projects aligned with your corporate brand easily and quickly. To learn about themes click here.

- How do I change the height/width sizes of the chart?

By default, the editor sets the width to 100%, allowing for a wide variety of browser/viewport sizes to properly scale the chart.

To change the height and width of the chart:

Go to Customize > Basic -> Chart -> Dimensions, then set the new height and width with the Chart width and Chart height options.

change chart Height and Width

- My chart has a lot of white space below it. How do I fix this?

If you’re using the iframe for embedding, then you can adjust the height parameter manually before you embed. everviz editor currently does not do any height calculations, 500px is the default height.

Default embed code:
<iframe style="border: 0; width: 100%; height: 500p"></iframe>

To change the height, just replace the value by default 500px to the value that suits you, e.g. 380px: <iframe style="border: 0; width: 100%; height: 380px"></iframe>

- How do I add the zooming capability?

To add the zooming capability:

Go to Advanced Customizer -> Chart -> Zoom Type, then type which zooming capability. Can be one of the following options: x, y, xy

-How do I colour only one bar?

To colour only one bar on a column/bar chart, you need to:

Go to the customize tab, and under: Custom Code, copy in the following, changing 'COLUMN_NAME' to your desired column name:

<code>var loaded = false; function changeColor(dataPoint) {   if (dataPoint.name === 'COLUMN_NAME') {     loaded = true;     dataPoint.update({       color: 'red'     });   } } Highcharts.merge(true, options, {   chart: {     events: {       render: function() {         if (!loaded) {           (this.series || []).forEach(function(s) {             s.data.forEach(changeColor);           });         }       }     }   } });

- Can I save the chart as PNG, JPG, or PDF?

Yes, you can save your chart as a PNG, JPG, PDF, or SVG file.

Read more here.

- When should the “Enable Exporting” option be checked (ON) or unchecked (OFF)?

You can allow or not users to export your chart as PNG, JPEG, PDF or SVG.

Go to Customize -> Basic -> Exporting. To allow users to export your chart just select the Enabled exporting option.

Exporting

- When embedding an interactive chart, which embedded code should I use?

To embed a chart in your system, you can select IFrame or Inject code. Inject is recommended if your system supports it, as it includes better features for responsiveness.

The IFrame code allows you to embed the chart as a child of the host page with no possibilities to change the chart styling. Inject code allows you to embed the chart straight to the page; so you can change the chart style using CSS.

Learn more about how to create the embedded code here.

- How do I override axis labels?

You can override the labels shown on the axis using categories. For example, to switch out the X-axis labels:

  • In the Basic editor, under "Axes" and "Horizontal", set the type to "categories" in the dropdown
  • In the Advanced editor, search "categories", and pick the option under "X axis". Insert as many categories as you need, and override their values to what you want.

You can replace the Y axis labels by doing much the same, switching out "X axis" for "Y axis" and "Horizontal" for "Vertical".


- How do I align two vertical axes?

  • Set the same max and min value for both y-axes, which are found by going to Advanced > Y Axis >  yAxis[0] and yAxis[1]
  • You probably want the axes to be on opposite sides, so in the Basic Editor you can enable 'Opposite' for one of them, and add the prefixes you want under y-axis > labels, then optionally remove the axis titles.

Here is an example.

Did you find what you were looking for? Thank you! There was a problem submitting your feedback. Please try again later.