This article highlights the basics of using AnyChart in WordPress – one of the most popular content management systems. You can easily add a dashboard or a chart in your post, making it more appealing and helping your storytelling.<\/p>\n
Adding AnyChart to a WordPress Post<\/b><\/p>\n
Adding AnyChart to a WordPress post is quite easy. You should open the page editor<\/strong>, switch into Text Editing Mode<\/strong>, insert link to an AnyChart JavaScript file, create a chart container, and add some data and settings, like this:<\/p>\n Note:<\/strong> A chart container may be of any size. However, if there are no style settings for the container and it has zero height and zero width, the chart will be added, but it will not be seen. So do not forget to set container size<\/b>.<\/p>\n You can open your WordPress blog right now, copy paste the code below and try it yourself:<\/p>\n That’s basically all you need to to! Could it be easier? Now the page is ready to be published, but do not forget to preview it and make sure that everything looks fine and there are no mistakes in the data.<\/p>\n See below what you get if everything is done right – it actually is a live AnyChart JavaScript Pie Chart<\/a> which is embedded in AnyChart WordPress Blog<\/a> the way described above. Hover the slices to see tooltips, click to select them. If you don’t see anything – please check if JavaScript is enabled in your browser.<\/p>\n![\"anychart](\"https:\/\/www.anychart.com\/blog\/images\/wordpress-1.png\")
<\/center><\/p>\n<!-- Step 1: link AnyChart from AnyChart CDN -->
\n<script src=\"\/\/cdn.anychart.com\/js\/latest\/anychart-bundle.min.js\"><\/script>
\n<!-- Step 2: Create chart container -->
\n<div id=\"container\" style=\"width:90%;height:600px;\"><\/div>
\n<!-- Step 3: Write a script to create a chart -->
\n<script>
\n anychart.onDocumentLoad(function() {
\n var chart = anychart.pie([ \/\/ create an instance of a pie chart with data
\n [\"Chocolate\", 5],
\n [\"Cr\u00eape Suzette\", 2],
\n [\"American blueberry\", 2],
\n [\"Buttermilk\", 1]
\n ]);
\n chart.title('Top 5 pancake fillings');
\n chart.container('container'); \/\/chart container id
\n chart.draw(); \/\/ initiate chart display
\n });
\n<\/script><\/code><\/p>\n