9/8/2016

InteractivechartsforWordPress|Highcharts

Interactive charts for WordPress

Posted on May 18, 2015 by Mustapha Mekhatria. Last modied on April 04, 2016.

Interactive charts are an intuitive way to support your story with beautiful, responsive and dynamic content.
Guess what! It is easy to create an interactive chart and even easier to embed them on your favorite blog or
website.
This article will guide you step by step (with pictures and videos) from how to make a chart to how to share
it on your blog or website.
This article is organized into two parts, the rst part provides instructions about how to create interactive
charts, while the second part shows you how to embed them into your blog.

PART 1 - CREATE THE CHART

To start making interactive charts, go to cloud.highcharts.com (https://cloud.highcharts.com/), and click
"Get started now".
Drag and drop your CSV le (or copy/paste your data from Excel le) in the data section (watch video).

To learn more about how to set up a CSV le, read more in our docs (/news/import-data/how-to-set-up-a-

http://www.highcharts.com/news/169interactivechartsforwordpress

1/8

9/8/2016

InteractivechartsforWordPress|Highcharts

To learn more about how to set up a CSV le, read more in our docs (/news/import-data/how-to-set-up-acsv-le).

Drag and drop your CSV le in the Import section (watch video (https://www.youtube.com/watch?
v=_qgJmYyhBDA)).

Or copy/paste your data from Excel le in the Import section.

http://www.highcharts.com/news/169interactivechartsforwordpress

2/8

9/8/2016

InteractivechartsforWordPress|Highcharts

Click Templates section, and select any templates that best suits you.

Customize your charts in the Customize section (watch video (https://www.youtube.com/watch?

v=kHGqkDxmhf4))

http://www.highcharts.com/news/169interactivechartsforwordpress

3/8

9/8/2016

InteractivechartsforWordPress|Highcharts

v=kHGqkDxmhf4))

Click on theSave button and go to Share section

http://www.highcharts.com/news/169interactivechartsforwordpress

4/8

9/8/2016

InteractivechartsforWordPress|Highcharts

PART 2 - ADD IT TO WORDPRESS

Once your interactive charts is set up, all you have to do is to copy the embed code and paste it on your blog
(watch video (https://www.youtube.com/watch?v=tPPn0a3ZMLw)).
To do that, go to theEmbed section (under the SHARE section), and copy the embed code.

On your WordPress page click on Text.

http://www.highcharts.com/news/169interactivechartsforwordpress

5/8

9/8/2016

InteractivechartsforWordPress|Highcharts

Paste the Embed code into the page (be sure to select the right spot).

And Voila! An interactive chart to make your blog more attractive.

3Comments
Recommend

Highcharts

Share

Jointhediscussion

http://www.highcharts.com/news/169interactivechartsforwordpress

Login

SortbyBest

6/8

9/8/2016

Jointhediscussion

InteractivechartsforWordPress|Highcharts

MetricsMix10monthsago

Thankyou!Thisisawesome.
1

Reply Share

RalGarcaSarabia8monthsago

Great!
Butihave2questions.
Isthereanyfreelimitnumberofcharts?
Canweusethischarts,inaprofitwebpage,oronlyinnonprofitwebpages?
Inmycase,iwanttouse100charts,butiamgettingincomesthroughmyaddsandsponsors.Is
thereanyproblem?
Thanks

Reply Share
GertVaartjes>RalGarcaSarabia8monthsago

Hi,
That'snoproblem,wedon'tlimitthenumberofcharts.Wehaveasubscriptionmodelbased
onthefeaturesyouuse.Free>Basic>Advanced.
Youcanuseitanysite,ProfitandNonProfit
HappyCharting!

Reply Share

ALSOONHIGHCHARTS

Highcharts5preview

Jobopenings

28comments2monthsago

2comments10monthsago

JchymBrzezinaOnemorethingIreally

Mustapha(Highsoft)ThankyouWaleed:),we

appreciate....andthatisthefactyouguysoffer
yourproductforfreefornoncommercial

areworkingonit

http://www.highcharts.com/news/169interactivechartsforwordpress

7/8

9/8/2016

InteractivechartsforWordPress|Highcharts

yourproductforfreefornoncommercial
purposes.I

Designersrejoice:CSSStylingforJavaScript
charts

HighchartsPerformanceBoost

2commentsamonthago

AvatarJamieGrayWow.thisisincredible.Greatjob,
HCteam!keepitup!

AvatarLarsCabreraHi,jlbriggs!Yes,ifyouchoose
thenonstyledmodebranch.Fornow,youcan
choosewhichbranchyouwanttouse
Standard

Subscribe d AddDisqustoyoursiteAddDisqusAdd

Share

Tweet

2016 Highcharts. All rights reserved.

Like

16commentsayearago

Privacy

(https://www.facebook.com/Highcharts)
(https://twitter.com/Highcharts)
(http://www.linkedin.com/company/highsoftsolutions-as)
(https://github.com/highslidesoftware/highcharts.com)
(https://www.youtube.com/channel/UCzxXofPTQ0DoT7uIy3Fxw7A)

http://www.highcharts.com/news/169interactivechartsforwordpress

8/8