{"id":1078,"date":"2026-02-13T11:27:24","date_gmt":"2026-02-13T03:27:24","guid":{"rendered":"https:\/\/witlab.ph\/blog\/?p=1078"},"modified":"2026-02-13T11:27:24","modified_gmt":"2026-02-13T03:27:24","slug":"how-to-create-gradient-charts-using-chart-js","status":"publish","type":"post","link":"https:\/\/witlab.ph\/blog\/how-to-create-gradient-charts-using-chart-js\/","title":{"rendered":"How to create Gradient Charts using Chart JS ?"},"content":{"rendered":"\n<p>Good Day to you all !<\/p>\n\n\n\n<p>Today, I would like to share how to create a gradient bar chart using Chart.js. Chart.js is a popular JavaScript charting library used in many web applications.<\/p>\n\n\n\n<p>First, add the CDN link as follows.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\">&lt;\/script><\/code><\/pre>\n\n\n\n<p>Next, add a canvas element to display the chart.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;canvas id=\"gradientChart\">&lt;\/canvas><\/code><\/pre>\n\n\n\n<p>In the script section, define a variable to reference the canvas element for the chart.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const ctx = document.getElementById('gradientChart').getContext('2d');<\/code><\/pre>\n\n\n\n<p>Then, specify the gradient colors and implement a function to apply the gradient effect to the chart.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const gradientColors = &#91;\n            { start: '#c0392b', end: '#ff6b6b' },\n            { start: '#d68910', end: '#f9e79f' },\n            { start: '#1a5276', end: '#85c1e9' },\n            { start: '#0e6251', end: '#58d68d' },\n            { start: '#4a235a', end: '#bb8fce' },\n            { start: '#922b6c', end: '#f5b7d1' },\n            { start: '#1b4f72', end: '#7fb3d5' }\n        ];\n\nfunction getGradient(chart, dataIndex) {\n            const { ctx, chartArea } = chart;\n            \n            if (!chartArea) {\n                return gradientColors&#91;dataIndex].start;\n            }\n\n            const colors = gradientColors&#91;dataIndex];\n            const gradient = ctx.createLinearGradient(0, chartArea.bottom, 0, chartArea.top);\n            gradient.addColorStop(0, colors.start);\n            gradient.addColorStop(1, colors.end);\n            return gradient;\n        }<\/code><\/pre>\n\n\n\n<p>After that, define the chart configuration as shown below.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\n        function getChartConfig(withAnimation) {\n            return {\n                type: 'bar',\n                data: {\n                    labels: &#91;'January', 'February', 'March', 'April', 'May', 'June', 'July'],\n                    datasets: &#91;{\n                        label: 'Monthly Sales ($)',\n                        data: &#91;65, 59, 80, 81, 56, 55, 72],\n                        borderWidth: 0,\n                        borderRadius: 8,\n                        borderSkipped: false,\n                        backgroundColor: function(context) {\n                            const chart = context.chart;\n                            const { ctx, chartArea } = chart;\n                            \n                            if (!chartArea) {\n                                return null;\n                            }\n                            \n                            const dataIndex = context.dataIndex;\n                            const colors = gradientColors&#91;dataIndex];\n                            const gradient = ctx.createLinearGradient(0, chartArea.bottom, 0, chartArea.top);\n                            gradient.addColorStop(0, colors.start);\n                            gradient.addColorStop(1, colors.end);\n                            return gradient;\n                        }\n                    }]\n                },\n                options: {\n                    responsive: true,\n                    maintainAspectRatio: false,\n                    animation: withAnimation ? {\n                        duration: 1500,\n                        easing: 'easeOutQuart'\n                    } : false,\n                    plugins: {\n                        legend: {\n                            display: true,\n                            labels: {\n                                font: {\n                                    size: 14,\n                                    weight: '500'\n                                },\n                                color: '#555'\n                            }\n                        },\n                        tooltip: {\n                            backgroundColor: 'rgba(0, 0, 0, 0.8)',\n                            titleFont: { size: 14 },\n                            bodyFont: { size: 13 },\n                            padding: 12,\n                            cornerRadius: 8\n                        }\n                    },\n                    scales: {\n                        x: {\n                            grid: {\n                                display: false\n                            },\n                            ticks: {\n                                font: {\n                                    size: 12\n                                },\n                                color: '#666'\n                            }\n                        },\n                        y: {\n                            beginAtZero: true,\n                            grid: {\n                                color: 'rgba(0, 0, 0, 0.05)'\n                            },\n                            ticks: {\n                                font: {\n                                    size: 12\n                                },\n                                color: '#666'\n                            }\n                        }\n                    }\n                }\n            };\n        }\n\n        \/\/ Create chart\n        let myChart = new Chart(ctx, getChartConfig(true));\n<\/code><\/pre>\n\n\n\n<p>In this tutorial, we learned how to create a gradient bar chart using Chart.js, from adding the CDN and canvas element to configuring gradients and chart settings. You can customize the colors and data further to match your project requirements.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Good Day to you all ! Today, I would like to share how to create a gradient bar chart using Chart.js. Chart.js is a popular JavaScript charting library used in many web applications. First, add the CDN link as follows. Next, add a canvas element to display the chart. In the script section, define a [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":1080,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-1078","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-system"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to create Gradient Charts using Chart JS ? - WIT LAB %<\/title>\n<meta name=\"description\" content=\"We excel in utilizing cutting-edge technology, programming languages, and frameworks to deliver high-quality digital solutions.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/witlab.ph\/blog\/how-to-create-gradient-charts-using-chart-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to create Gradient Charts using Chart JS ? - WIT LAB %\" \/>\n<meta property=\"og:description\" content=\"We excel in utilizing cutting-edge technology, programming languages, and frameworks to deliver high-quality digital solutions.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/witlab.ph\/blog\/how-to-create-gradient-charts-using-chart-js\/\" \/>\n<meta property=\"og:site_name\" content=\"WIT LAB\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/people\/WIT-LAB\/61567795364273\/\" \/>\n<meta property=\"article:published_time\" content=\"2026-02-13T03:27:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2026\/02\/How-TO-USE-.append-.appendTo-.wrap_.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Htay Min Kaung\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Htay Min Kaung\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/witlab.ph\/blog\/how-to-create-gradient-charts-using-chart-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/witlab.ph\/blog\/how-to-create-gradient-charts-using-chart-js\/\"},\"author\":{\"name\":\"Htay Min Kaung\",\"@id\":\"https:\/\/witlab.ph\/blog\/#\/schema\/person\/c37bd963f520e565eebe682a9e319680\"},\"headline\":\"How to create Gradient Charts using Chart JS ?\",\"datePublished\":\"2026-02-13T03:27:24+00:00\",\"dateModified\":\"2026-02-13T03:27:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/witlab.ph\/blog\/how-to-create-gradient-charts-using-chart-js\/\"},\"wordCount\":140,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/witlab.ph\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/witlab.ph\/blog\/how-to-create-gradient-charts-using-chart-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2026\/02\/How-TO-USE-.append-.appendTo-.wrap_.jpg\",\"articleSection\":[\"System\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/witlab.ph\/blog\/how-to-create-gradient-charts-using-chart-js\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/witlab.ph\/blog\/how-to-create-gradient-charts-using-chart-js\/\",\"url\":\"https:\/\/witlab.ph\/blog\/how-to-create-gradient-charts-using-chart-js\/\",\"name\":\"How to create Gradient Charts using Chart JS ? - WIT LAB %\",\"isPartOf\":{\"@id\":\"https:\/\/witlab.ph\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/witlab.ph\/blog\/how-to-create-gradient-charts-using-chart-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/witlab.ph\/blog\/how-to-create-gradient-charts-using-chart-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2026\/02\/How-TO-USE-.append-.appendTo-.wrap_.jpg\",\"datePublished\":\"2026-02-13T03:27:24+00:00\",\"dateModified\":\"2026-02-13T03:27:24+00:00\",\"description\":\"We excel in utilizing cutting-edge technology, programming languages, and frameworks to deliver high-quality digital solutions.\",\"breadcrumb\":{\"@id\":\"https:\/\/witlab.ph\/blog\/how-to-create-gradient-charts-using-chart-js\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/witlab.ph\/blog\/how-to-create-gradient-charts-using-chart-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/witlab.ph\/blog\/how-to-create-gradient-charts-using-chart-js\/#primaryimage\",\"url\":\"https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2026\/02\/How-TO-USE-.append-.appendTo-.wrap_.jpg\",\"contentUrl\":\"https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2026\/02\/How-TO-USE-.append-.appendTo-.wrap_.jpg\",\"width\":1920,\"height\":1080},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/witlab.ph\/blog\/how-to-create-gradient-charts-using-chart-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/witlab.ph\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to create Gradient Charts using Chart JS ?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/witlab.ph\/blog\/#website\",\"url\":\"https:\/\/witlab.ph\/blog\/\",\"name\":\"WIT LAB\",\"description\":\"Web Development\",\"publisher\":{\"@id\":\"https:\/\/witlab.ph\/blog\/#organization\"},\"alternateName\":\"WIT LAB INC\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/witlab.ph\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/witlab.ph\/blog\/#organization\",\"name\":\"WIT LAB INC\",\"alternateName\":\"Spiceworks (Japan)\",\"url\":\"https:\/\/witlab.ph\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/witlab.ph\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2024\/09\/logo_witlab-Copy-Copy.png\",\"contentUrl\":\"https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2024\/09\/logo_witlab-Copy-Copy.png\",\"width\":681,\"height\":616,\"caption\":\"WIT LAB INC\"},\"image\":{\"@id\":\"https:\/\/witlab.ph\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/people\/WIT-LAB\/61567795364273\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/witlab.ph\/blog\/#\/schema\/person\/c37bd963f520e565eebe682a9e319680\",\"name\":\"Htay Min Kaung\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/witlab.ph\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0a90aff2f83f2079748817650f0848ff?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0a90aff2f83f2079748817650f0848ff?s=96&d=mm&r=g\",\"caption\":\"Htay Min Kaung\"},\"url\":\"https:\/\/witlab.ph\/blog\/author\/htay-min-kaung\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to create Gradient Charts using Chart JS ? - WIT LAB %","description":"We excel in utilizing cutting-edge technology, programming languages, and frameworks to deliver high-quality digital solutions.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/witlab.ph\/blog\/how-to-create-gradient-charts-using-chart-js\/","og_locale":"en_US","og_type":"article","og_title":"How to create Gradient Charts using Chart JS ? - WIT LAB %","og_description":"We excel in utilizing cutting-edge technology, programming languages, and frameworks to deliver high-quality digital solutions.","og_url":"https:\/\/witlab.ph\/blog\/how-to-create-gradient-charts-using-chart-js\/","og_site_name":"WIT LAB","article_publisher":"https:\/\/www.facebook.com\/people\/WIT-LAB\/61567795364273\/","article_published_time":"2026-02-13T03:27:24+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2026\/02\/How-TO-USE-.append-.appendTo-.wrap_.jpg","type":"image\/jpeg"}],"author":"Htay Min Kaung","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Htay Min Kaung","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/witlab.ph\/blog\/how-to-create-gradient-charts-using-chart-js\/#article","isPartOf":{"@id":"https:\/\/witlab.ph\/blog\/how-to-create-gradient-charts-using-chart-js\/"},"author":{"name":"Htay Min Kaung","@id":"https:\/\/witlab.ph\/blog\/#\/schema\/person\/c37bd963f520e565eebe682a9e319680"},"headline":"How to create Gradient Charts using Chart JS ?","datePublished":"2026-02-13T03:27:24+00:00","dateModified":"2026-02-13T03:27:24+00:00","mainEntityOfPage":{"@id":"https:\/\/witlab.ph\/blog\/how-to-create-gradient-charts-using-chart-js\/"},"wordCount":140,"commentCount":0,"publisher":{"@id":"https:\/\/witlab.ph\/blog\/#organization"},"image":{"@id":"https:\/\/witlab.ph\/blog\/how-to-create-gradient-charts-using-chart-js\/#primaryimage"},"thumbnailUrl":"https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2026\/02\/How-TO-USE-.append-.appendTo-.wrap_.jpg","articleSection":["System"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/witlab.ph\/blog\/how-to-create-gradient-charts-using-chart-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/witlab.ph\/blog\/how-to-create-gradient-charts-using-chart-js\/","url":"https:\/\/witlab.ph\/blog\/how-to-create-gradient-charts-using-chart-js\/","name":"How to create Gradient Charts using Chart JS ? - WIT LAB %","isPartOf":{"@id":"https:\/\/witlab.ph\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/witlab.ph\/blog\/how-to-create-gradient-charts-using-chart-js\/#primaryimage"},"image":{"@id":"https:\/\/witlab.ph\/blog\/how-to-create-gradient-charts-using-chart-js\/#primaryimage"},"thumbnailUrl":"https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2026\/02\/How-TO-USE-.append-.appendTo-.wrap_.jpg","datePublished":"2026-02-13T03:27:24+00:00","dateModified":"2026-02-13T03:27:24+00:00","description":"We excel in utilizing cutting-edge technology, programming languages, and frameworks to deliver high-quality digital solutions.","breadcrumb":{"@id":"https:\/\/witlab.ph\/blog\/how-to-create-gradient-charts-using-chart-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/witlab.ph\/blog\/how-to-create-gradient-charts-using-chart-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/witlab.ph\/blog\/how-to-create-gradient-charts-using-chart-js\/#primaryimage","url":"https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2026\/02\/How-TO-USE-.append-.appendTo-.wrap_.jpg","contentUrl":"https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2026\/02\/How-TO-USE-.append-.appendTo-.wrap_.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/witlab.ph\/blog\/how-to-create-gradient-charts-using-chart-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/witlab.ph\/blog\/"},{"@type":"ListItem","position":2,"name":"How to create Gradient Charts using Chart JS ?"}]},{"@type":"WebSite","@id":"https:\/\/witlab.ph\/blog\/#website","url":"https:\/\/witlab.ph\/blog\/","name":"WIT LAB","description":"Web Development","publisher":{"@id":"https:\/\/witlab.ph\/blog\/#organization"},"alternateName":"WIT LAB INC","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/witlab.ph\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/witlab.ph\/blog\/#organization","name":"WIT LAB INC","alternateName":"Spiceworks (Japan)","url":"https:\/\/witlab.ph\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/witlab.ph\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2024\/09\/logo_witlab-Copy-Copy.png","contentUrl":"https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2024\/09\/logo_witlab-Copy-Copy.png","width":681,"height":616,"caption":"WIT LAB INC"},"image":{"@id":"https:\/\/witlab.ph\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/people\/WIT-LAB\/61567795364273\/"]},{"@type":"Person","@id":"https:\/\/witlab.ph\/blog\/#\/schema\/person\/c37bd963f520e565eebe682a9e319680","name":"Htay Min Kaung","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/witlab.ph\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0a90aff2f83f2079748817650f0848ff?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0a90aff2f83f2079748817650f0848ff?s=96&d=mm&r=g","caption":"Htay Min Kaung"},"url":"https:\/\/witlab.ph\/blog\/author\/htay-min-kaung\/"}]}},"_links":{"self":[{"href":"https:\/\/witlab.ph\/blog\/wp-json\/wp\/v2\/posts\/1078"}],"collection":[{"href":"https:\/\/witlab.ph\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/witlab.ph\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/witlab.ph\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/witlab.ph\/blog\/wp-json\/wp\/v2\/comments?post=1078"}],"version-history":[{"count":3,"href":"https:\/\/witlab.ph\/blog\/wp-json\/wp\/v2\/posts\/1078\/revisions"}],"predecessor-version":[{"id":1083,"href":"https:\/\/witlab.ph\/blog\/wp-json\/wp\/v2\/posts\/1078\/revisions\/1083"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/witlab.ph\/blog\/wp-json\/wp\/v2\/media\/1080"}],"wp:attachment":[{"href":"https:\/\/witlab.ph\/blog\/wp-json\/wp\/v2\/media?parent=1078"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/witlab.ph\/blog\/wp-json\/wp\/v2\/categories?post=1078"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/witlab.ph\/blog\/wp-json\/wp\/v2\/tags?post=1078"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}