{"id":25905,"date":"2024-03-16T05:51:40","date_gmt":"2024-03-16T05:51:40","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-to-solve-the-issue-of-echarts-color-settings-not-working\/"},"modified":"2024-03-22T07:18:03","modified_gmt":"2024-03-22T07:18:03","slug":"how-to-solve-the-issue-of-echarts-color-settings-not-working","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-to-solve-the-issue-of-echarts-color-settings-not-working\/","title":{"rendered":"How to solve the issue of ECharts color settings not working?"},"content":{"rendered":"

With the color configuration option provided by Echarts, you can set colors for each data series in the chart.<\/p>\n

If you find that the color setting is not taking effect, it may be due to a few reasons.<\/p>\n

    \n
  1. Default color configuration is used: When no custom color configuration is specified, echarts will use the default color configuration. If you want to customize colors, you need to set them through the color configuration option.<\/li>\n
  2. option = {
    \n color: [‘red’, ‘blue’, ‘green’],
    \n \/\/ …
    \n};<\/li>\n
  3. The itemStyle in the configuration overrides the color setting: In certain types of charts, you can use itemStyle to customize the style of certain elements, including color. If a color is specified in the itemStyle, it will override the color setting.<\/li>\n
  4. option = {
    \n series: [{
    \n chartType: ‘bar’,
    \n values: [10, 20, 30],
    \n style: {
    \n fill: ‘red’,
    \n },
    \n }],
    \n \/\/ …
    \n};<\/li>\n
  5. Other configuration items may override the color setting in certain cases. For example, when a color range is set in visualMap, the color configuration of visualMap will be used.<\/li>\n
  6. Option includes a continuous visual mapping with a range from 0 to 100, where colors range from blue to red.<\/li>\n<\/ol>\n

    If the above solutions still cannot resolve your issue, it is recommended that you provide your code and a detailed description of the problem in order to better assist you in finding a solution.<\/p>\n","protected":false},"excerpt":{"rendered":"

    With the color configuration option provided by Echarts, you can set colors for each data series in the chart. If you find that the color setting is not taking effect, it may be due to a few reasons. Default color configuration is used: When no custom color configuration is specified, echarts will use the default […]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-25905","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\nHow to solve the issue of ECharts color settings not working? - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/blog\/how-to-solve-the-issue-of-echarts-color-settings-not-working\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to solve the issue of ECharts color settings not working?\" \/>\n<meta property=\"og:description\" content=\"With the color configuration option provided by Echarts, you can set colors for each data series in the chart. If you find that the color setting is not taking effect, it may be due to a few reasons. Default color configuration is used: When no custom color configuration is specified, echarts will use the default […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-to-solve-the-issue-of-echarts-color-settings-not-working\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-16T05:51:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-22T07:18:03+00:00\" \/>\n<meta name=\"author\" content=\"Emily Johnson\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Emily Johnson\" \/>\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\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-solve-the-issue-of-echarts-color-settings-not-working\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-solve-the-issue-of-echarts-color-settings-not-working\/\"},\"author\":{\"name\":\"Emily Johnson\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/3b041b19cffc258705478ecfab895378\"},\"headline\":\"How to solve the issue of ECharts color settings not working?\",\"datePublished\":\"2024-03-16T05:51:40+00:00\",\"dateModified\":\"2024-03-22T07:18:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-solve-the-issue-of-echarts-color-settings-not-working\/\"},\"wordCount\":219,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-solve-the-issue-of-echarts-color-settings-not-working\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-to-solve-the-issue-of-echarts-color-settings-not-working\/\",\"name\":\"How to solve the issue of ECharts color settings not working? - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-16T05:51:40+00:00\",\"dateModified\":\"2024-03-22T07:18:03+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-solve-the-issue-of-echarts-color-settings-not-working\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-to-solve-the-issue-of-echarts-color-settings-not-working\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-solve-the-issue-of-echarts-color-settings-not-working\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to solve the issue of ECharts color settings not working?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"name\":\"Silicon Cloud Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\",\"name\":\"Silicon Cloud Blog\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"contentUrl\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"width\":1024,\"height\":1024,\"caption\":\"Silicon Cloud Blog\"},\"image\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\",\"https:\/\/twitter.com\/SiliCloudGlobal\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/3b041b19cffc258705478ecfab895378\",\"name\":\"Emily Johnson\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a5cb4e73d02ab1d79f2dfe919389ff7c1de072baa97686392031c03d858cc358?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a5cb4e73d02ab1d79f2dfe919389ff7c1de072baa97686392031c03d858cc358?s=96&d=mm&r=g\",\"caption\":\"Emily Johnson\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/emilyjohnson\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to solve the issue of ECharts color settings not working? - Blog - Silicon Cloud","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:\/\/www.silicloud.com\/blog\/how-to-solve-the-issue-of-echarts-color-settings-not-working\/","og_locale":"en_US","og_type":"article","og_title":"How to solve the issue of ECharts color settings not working?","og_description":"With the color configuration option provided by Echarts, you can set colors for each data series in the chart. If you find that the color setting is not taking effect, it may be due to a few reasons. Default color configuration is used: When no custom color configuration is specified, echarts will use the default […]","og_url":"https:\/\/www.silicloud.com\/blog\/how-to-solve-the-issue-of-echarts-color-settings-not-working\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-16T05:51:40+00:00","article_modified_time":"2024-03-22T07:18:03+00:00","author":"Emily Johnson","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Emily Johnson","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-to-solve-the-issue-of-echarts-color-settings-not-working\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-solve-the-issue-of-echarts-color-settings-not-working\/"},"author":{"name":"Emily Johnson","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/3b041b19cffc258705478ecfab895378"},"headline":"How to solve the issue of ECharts color settings not working?","datePublished":"2024-03-16T05:51:40+00:00","dateModified":"2024-03-22T07:18:03+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-solve-the-issue-of-echarts-color-settings-not-working\/"},"wordCount":219,"commentCount":0,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-to-solve-the-issue-of-echarts-color-settings-not-working\/","url":"https:\/\/www.silicloud.com\/blog\/how-to-solve-the-issue-of-echarts-color-settings-not-working\/","name":"How to solve the issue of ECharts color settings not working? - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-16T05:51:40+00:00","dateModified":"2024-03-22T07:18:03+00:00","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-solve-the-issue-of-echarts-color-settings-not-working\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-to-solve-the-issue-of-echarts-color-settings-not-working\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-to-solve-the-issue-of-echarts-color-settings-not-working\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to solve the issue of ECharts color settings not working?"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/blog\/#website","url":"https:\/\/www.silicloud.com\/blog\/","name":"Silicon Cloud Blog","description":"","publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.silicloud.com\/blog\/#organization","name":"Silicon Cloud Blog","url":"https:\/\/www.silicloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","contentUrl":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","width":1024,"height":1024,"caption":"Silicon Cloud Blog"},"image":{"@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SiliCloudGlobal\/","https:\/\/twitter.com\/SiliCloudGlobal"]},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/3b041b19cffc258705478ecfab895378","name":"Emily Johnson","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a5cb4e73d02ab1d79f2dfe919389ff7c1de072baa97686392031c03d858cc358?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a5cb4e73d02ab1d79f2dfe919389ff7c1de072baa97686392031c03d858cc358?s=96&d=mm&r=g","caption":"Emily Johnson"},"url":"https:\/\/www.silicloud.com\/blog\/author\/emilyjohnson\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/25905","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=25905"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/25905\/revisions"}],"predecessor-version":[{"id":60042,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/25905\/revisions\/60042"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=25905"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=25905"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=25905"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}