{"id":45433,"date":"2015-04-02T02:05:26","date_gmt":"2015-04-02T06:05:26","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=45433"},"modified":"2017-08-14T05:58:06","modified_gmt":"2017-08-14T09:58:06","slug":"wordpress-how-to-change-chart-colors","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/wordpress-how-to-change-chart-colors.html","title":{"rendered":"WordPress. How to change chart colors"},"content":{"rendered":"<p>\r\n<p>This tutorial shows how to change chart colors in WordPress.<\/p>\r\n<p><a href=\"http:\/\/www.youtube.com\/watch?v=-x6UfuTKEYw?width=1280&amp;height=720\" rel=\"prettyPhoto\">WordPress. How to change chart colors<\/a><\/p>\r\n<div class=\"inline-banner\">\r\n<a href=\"https:\/\/www.templatemonster.com\/service-center\/\">\r\n<img src=\"\/help\/files\/banners\/inline\/Banner-3-(835-x100).jpg\" \/>\r\n<\/a>\r\n<\/div>\r\n<ol>\r\n<li>\r\n<p>Navigate to WordPress admin section and go to <strong>Appearance->Editor,<\/strong> on the right under <strong>themeXXXXX <\/strong>you will see <strong>post_masonry_view.php<\/strong> file:<\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2015\/04\/Wordpress._How_to_change_chart_colors-1.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2015\/04\/Wordpress._How_to_change_chart_colors-1-300x139.png\" alt=\"Wordpress._How_to_change_chart_colors-1\" width=\"300\" height=\"139\" class=\"aligncenter size-medium wp-image-45435\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/04\/Wordpress._How_to_change_chart_colors-1-300x139.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/04\/Wordpress._How_to_change_chart_colors-1-150x69.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/04\/Wordpress._How_to_change_chart_colors-1.png 922w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<\/li>\r\n<li>\r\n<p>Open post_masonry_view.php file and look for this code:<\/p>\r\n<pre class=\"brush:php\">\r\n$colorSetsPie = array(\r\narray(\r\n'skill_color' =&gt; 'rgba(26, 50, 56, 1)',\r\n'base_color'  =&gt; 'rgba(255, 255, 255, 0)'\r\n),\r\narray(\r\n'skill_color' =&gt; 'rgba(26, 50, 56, 1)',\r\n'base_color'  =&gt; 'rgba(255, 255, 255, 0)'\r\n),\r\narray(\r\n'skill_color' =&gt; 'rgba(26, 50, 56, 1)',\r\n'base_color'  =&gt; 'rgba(255, 255, 255, 0)'\r\n),\r\narray(\r\n'skill_color' =&gt; 'rgba(26, 50, 56, 1)',\r\n'base_color'  =&gt; 'rgba(255, 255, 255, 0)'\r\n)\r\n<\/pre>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2015\/04\/WordPress._How-_to-_change_chart-_colors-2.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2015\/04\/WordPress._How-_to-_change_chart-_colors-2-300x100.png\" alt=\"WordPress._How-_to-_change_chart-_colors-2\" width=\"300\" height=\"100\" class=\"aligncenter size-medium wp-image-45436\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/04\/WordPress._How-_to-_change_chart-_colors-2-300x100.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/04\/WordPress._How-_to-_change_chart-_colors-2-150x50.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/04\/WordPress._How-_to-_change_chart-_colors-2-1024x343.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/04\/WordPress._How-_to-_change_chart-_colors-2.png 1038w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<\/li>\r\n<li>\r\n<p>In order to change chart background color, you will have to change every rgba (26, 50, 56, 1) color in the above code to the one you need. You can use this convertor <a target=\"_blank\" href=\"http:\/\/www.javascripter.net\/faq\/hextorgb.htm\">Click here<\/a> to convert a hex color string (e.g. &#8220;FFFFCC&#8221;) to numeric RGB value.<\/p>\r\n<\/li>\r\n<li>\r\n<p>Then, look for this code in order to change skill border color: <\/p>\r\n<pre class=\"brush:php\">\r\n$colorSetsDoughnut = array(\r\narray(\r\n'skill_color' =&gt; '##21bee8',\r\n'base_color'  =&gt; 'rgba(255, 255, 255, 0)'\r\n),\r\narray(\r\n'skill_color' =&gt; '#21bee8',\r\n'base_color'  =&gt; 'rgba(255, 255, 255, 0)'\r\n),\r\narray(\r\n'skill_color' =&gt; '#21bee8',\r\n'base_color'  =&gt; 'rgba(255, 255, 255, 0)'\r\n),\r\narray(\r\n'skill_color' =&gt; '#21bee8',\r\n'base_color'  =&gt; 'rgba(255, 255, 255, 0)'\r\n)\r\n <\/pre>\r\n<p>In that code you have to change every #21bee8 color code to the one that you need: <\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2015\/04\/WordPress._How-_to-_change_chart-_colors-3.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2015\/04\/WordPress._How-_to-_change_chart-_colors-3-300x114.png\" alt=\"WordPress._How-_to-_change_chart-_colors-3\" width=\"300\" height=\"114\" class=\"aligncenter size-medium wp-image-45437\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/04\/WordPress._How-_to-_change_chart-_colors-3-300x114.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/04\/WordPress._How-_to-_change_chart-_colors-3-150x57.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/04\/WordPress._How-_to-_change_chart-_colors-3.png 1000w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<\/li>\r\n<li>\r\n<p>Once you are done, click on Update file button and check your chart section, colors will be changed.<\/p>\r\n<\/li>\r\n<\/ol>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n<p><a href=\"http:\/\/www.youtube.com\/watch?v=-x6UfuTKEYw?width=1280&amp;height=720\" rel=\"prettyPhoto\">WordPress. How to change chart colors<\/a><\/p>\r\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>This tutorial shows how to change chart colors in WordPress.<\/p>\n","protected":false},"author":71,"featured_media":45440,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[728],"tags":[1896,520,2405],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/45433"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/71"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=45433"}],"version-history":[{"count":1,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/45433\/revisions"}],"predecessor-version":[{"id":82672,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/45433\/revisions\/82672"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/45440"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=45433"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=45433"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=45433"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}