{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/show/chart","result":{"data":{"current":{"frontmatter":{"title":"Data Visualization","order":86,"brief":"Semi DV is a data visualization solution for Semi design systems.","icon":"doc-vchart"},"fields":{"type":"show"},"tableOfContents":{"items":[{"url":"#create-a-chart-theme","title":"Create a Chart Theme"},{"url":"#using-a-theme","title":"Using a Theme"},{"url":"#using-chart-themes-in-figma","title":"Using Chart Themes in Figma"}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"localeCode\": \"en-US\",\n  \"order\": 86,\n  \"category\": \"Show\",\n  \"title\": \"Data Visualization\",\n  \"icon\": \"doc-vchart\",\n  \"dir\": \"column\",\n  \"brief\": \"Semi DV is a data visualization solution for Semi design systems.\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"Semi DV is a data visualization solution built on top of ByteDance's open-source library \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://visactor.io/vchart\"\n  }, \"VChart\"), \", packaged with styles that match the Semi Design system.\"), mdx(\"p\", null, \"VChart itself is built using the visualization grammar library VGrammar and the rendering engine VRender. VChart not only supports high-quality data presentation, but also provides animation sequencing for storytelling, rich interactive capabilities, and customizable chart styles. On top of this, Semi DV supports chart theme configuration, helping users maintain a consistent UI while enabling flexible and personalized data visualization.\"), mdx(\"p\", null, \"Semi DV supports two configuration modes:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Simple Mode: Easily customize a chart theme by setting theme colors, choosing a palette, and adjusting corner radius, spacing, and line thickness.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Advanced Mode: Fine-tune your chart from the ground up, customizing tokens (color, font, radius, spacing, lines, animations), elements (title, axes, legend, interactive elements), and charts (bar, line, area, pie, funnel, etc.) for full control and precision.\")), mdx(\"h3\", null, \"Create a Chart Theme\"), mdx(\"p\", null, \"Go to \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://semi.design/dsm/design_system_list?type=vcharts\"\n  }, \"Design System Creation\"), \" and click the \\\"Create a chart design system\\\" Button. After finishing your configuration, with a single click, you can publish the theme to npm.\"), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/chart-create.jpeg\",\n    \"alt\": \"Create\"\n  })), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/chart-easy-en.jpeg\",\n    \"alt\": \"Simple Mode\"\n  })), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/chart-advance-en.jpeg\",\n    \"alt\": \"Advanced Mode\"\n  })), mdx(\"p\", null, \"For more detailed documentation on customizing themes, see \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://semi.design/dsm_vchart/doc/en-US/introduction/start#dsm_Customizethetheme\"\n  }, \"Theme Creation Guide\")), mdx(\"h3\", null, \"Using a Theme\"), mdx(\"p\", null, \"Install VChart\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-shell\"\n  }, \"# Using npm\\nnpm install @visactor/react-vchart\\n# Using yarn\\nyarn add @visactor/react-vchart\\n\")), mdx(\"p\", null, \"The theme package will be published by your designer via Semi DV. Please check with the designer for the correct package name. Assuming the package is called \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"@ies/semi-vchart-theme-test\"), \", you can install it as follows:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-shell\"\n  }, \"npm install @ies/semi-vchart-theme-test\\n# or\\nyarn add @ies/semi-vchart-theme-test\\n\")), mdx(\"p\", null, \"Import the Theme\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"// VChart light theme\\nimport vchartLight from \\\"@ies/semi-vchart-theme-test/light.json\\\";\\n// VChart dark theme\\nimport vchartDark from \\\"@ies/semi-vchart-theme-test/dark.json\\\";\\n\")), mdx(\"p\", null, \"Register the Theme\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"import VChart from '@visactor/vchart';\\n\\nVChart.ThemeManager.registerTheme(\\\"myLightTheme\\\", vchartLight);\\n// Apply a theme\\nVChart.ThemeManager.setCurrentTheme('myLightTheme');\\n\")), mdx(\"h3\", null, \"Using Chart Themes in Figma\"), mdx(\"p\", null, \"Install the \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/en-US/start/design-source\"\n  }, \"Figma plugin\"), \" to select a theme and draw themed charts directly within your designs.\"));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"en-US/show/chart","next":{"fields":{"slug":"zh-CN/show/chart"},"id":"065d34e0-127e-5ff0-915a-ef3457e09b58","frontmatter":{"title":"Semi DV 数据可视化","localeCode":"zh-CN","icon":"doc-vchart","showNew":null}},"previous":{"fields":{"slug":"zh-CN/show/userGuide"},"id":"63249a74-2e4b-5ba0-9cfc-707ee5b43d77","frontmatter":{"title":"UserGuide 用户引导","localeCode":"zh-CN","icon":"doc-userGuide","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}