# How to Embed Interactive ECharts in NoteRich Data is only as valuable as your ability to understand it. In the realm of Personal Knowledge Management (PKM), transforming raw numbers and structured data into visual insights is crucial. **NoteRich** bridges the gap between text and data by natively supporting **Apache ECharts**, allowing you to embed fully interactive, publication-ready charts directly within your notes. Unlike cloud-based tools that send your data to external servers for rendering, NoteRich processes and renders ECharts entirely on your local device. This ensures your proprietary data remains 100% private while delivering a seamless, interactive visualization experience. --- ## Why ECharts in NoteRich? Apache ECharts is an open-source visualization library renowned for its fluidity, depth, and cross-platform compatibility. By integrating ECharts natively, NoteRich offers several distinct advantages: - **Zero-Code Rendering**: Write standard JSON configuration in a Markdown code block, and NoteRich instantly renders it into an interactive chart. - **100% Local & Private**: The rendering engine runs locally in your browser. Your data never leaves your device. - **Rich Interactivity**: Enjoy built-in zooming, panning, tooltips, and legend toggling without writing a single line of JavaScript. - **AI-Powered Generation**: Let NoteRich's local AI analyze your tables or natural language prompts to auto-generate the ECharts JSON. --- ## The Basics: Embedding Your First Chart Embedding a chart in NoteRich is as simple as writing a Markdown code block. You just need to specify `echarts` as the language identifier and provide a valid ECharts `option` JSON object inside. ```echarts { "title": { "text": "Local-First Note Growth", "left": "center", "textStyle": { "color": "#000", "fontSize": 16 } }, "tooltip": { "trigger": "axis" }, "xAxis": { "type": "category", "data": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], "axisLabel": { "color": "#666" } }, "yAxis": { "type": "value", "splitLine": { "lineStyle": { "color": "#f4f4f5" } }, "axisLabel": { "color": "#666" } }, "series": [ { "data": [120, 200, 150, 80, 70, 110], "type": "bar", "itemStyle": { "color": "#000", "borderRadius": [4, 4, 0, 0] } } ], "grid": { "left": "10%", "right": "10%", "bottom": "15%" } } ``` When you switch to the preview mode or read the note, NoteRich's rendering engine intercepts the `echarts` block, initializes the ECharts instance, and binds it to the DOM with automatic resizing capabilities. --- ## Deep Dive: Advanced Chart Configurations Once you master the basics, you can leverage the full power of ECharts to create complex, multi-dimensional visualizations. ### 1. Multi-Series and Mixed Charts You can easily combine different chart types, such as overlaying a line chart on a bar chart, by defining multiple objects in the `series` array and utilizing dual Y-axes. ```echarts { "tooltip": { "trigger": "axis", "axisPointer": { "type": "cross" } }, "legend": { "data": ["Notes Created", "Cumulative Total"], "bottom": 0, "textStyle": { "color": "#666" } }, "xAxis": { "type": "category", "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], "axisLabel": { "color": "#666" } }, "yAxis": [ { "type": "value", "name": "Daily", "splitLine": { "lineStyle": { "color": "#f4f4f5" } }, "axisLabel": { "color": "#666" } }, { "type": "value", "name": "Total", "splitLine": { "show": false }, "axisLabel": { "color": "#666" } } ], "series": [ { "name": "Notes Created", "type": "bar", "data": [12, 18, 9, 22, 15, 30, 25], "itemStyle": { "color": "#eaeaea", "borderRadius": [4, 4, 0, 0] } }, { "name": "Cumulative Total", "type": "line", "yAxisIndex": 1, "smooth": true, "data": [120, 138, 147, 169, 184, 214, 239], "lineStyle": { "color": "#000", "width": 3 }, "itemStyle": { "color": "#000" } } ], "grid": { "left": "10%", "right": "10%", "bottom": "15%" } } ``` ### 2. Pie and Donut Charts for Composition Visualizing proportions is effortless with ECharts' `pie` series. You can customize the radius to create stunning donut charts that match NoteRich's minimalist aesthetic. ```echarts { "tooltip": { "trigger": "item", "formatter": "{a} <br/>{b}: {c} ({d}%)" }, "legend": { "bottom": 0, "textStyle": { "color": "#666" } }, "series": [ { "name": "Storage Usage", "type": "pie", "radius": ["40%", "70%"], "avoidLabelOverlap": false, "itemStyle": { "borderRadius": 10, "borderColor": "#fff", "borderWidth": 2 }, "label": { "show": false, "position": "center" }, "emphasis": { "label": { "show": true, "fontSize": 20, "fontWeight": "bold", "color": "#000" } }, "data": [ { "value": 1048, "name": "Text Notes", "itemStyle": { "color": "#000" } }, { "value": 735, "name": "Attachments", "itemStyle": { "color": "#666" } }, { "value": 580, "name": "Databases", "itemStyle": { "color": "#eaeaea" } } ] } ] } ``` --- ## AI-Powered Visualization: From Text to Chart Writing JSON manually is powerful, but NoteRich takes it a step further with its **Local AI Visualization Engine**. You don't always need to write the configuration yourself. ### Natural Language to Chart You can simply describe the chart you want in plain English, and NoteRich's local LLM will generate the ECharts JSON for you. *Prompt example: "Create a radar chart comparing the features of NoteRich, Notion, and Obsidian across Privacy, Speed, Offline Support, and Extensibility."* ### Auto-Detection from Tables If you have a Markdown table in your note, NoteRich's AI can analyze the structured data and automatically suggest or generate the corresponding ECharts configuration. This seamless transition from raw data to visual insight happens entirely on your device, ensuring your analytical data remains strictly private. --- ## Performance and Lazy Loading A common concern when embedding multiple interactive charts in a single document is performance. NoteRich addresses this with a highly optimized **Lazy Loading Architecture**. 1. **Intersection Observer**: Charts are not rendered until they scroll into the viewport. This drastically reduces the initial load time of long documents. 2. **Skeleton Screens**: While a chart is loading or initializing, a lightweight skeleton UI is displayed, preventing layout shifts (CLS) and maintaining a smooth reading experience. 3. **Responsive Resizing**: NoteRich automatically attaches a `ResizeObserver` to every ECharts instance, ensuring charts flawlessly adapt to window resizing or sidebar toggling without manual intervention. --- ## Best Practices for NoteRich ECharts To get the most out of ECharts in NoteRich, keep these tips in mind: - **Keep JSON Valid**: Ensure your configuration is valid JSON. NoteRich will gracefully display an error message in the editor if the syntax is incorrect, preventing app crashes. - **Match the Theme**: NoteRich's UI is minimalist and monochromatic. Use colors like `#000` (primary), `#666` (secondary text), and `#eaeaea` (borders/backgrounds) in your chart configurations to maintain visual harmony. - **Use `grid` for Padding**: Always define the `grid` property to ensure your chart axes and labels have enough breathing room and don't get clipped by the container edges. - **Leverage Local AI**: For complex charts, let the AI do the heavy lifting. You can always tweak the generated JSON manually for fine-tuning. --- ## Conclusion Integrating interactive data visualization directly into your note-taking workflow eliminates the need to context-switch between external tools like Excel or Tableau. With native **ECharts** support, **NoteRich** empowers you to turn your local knowledge base into a dynamic, visual, and deeply insightful dashboard—all while maintaining the uncompromising privacy and local-first philosophy you expect. Start embedding your data today, and watch your notes come to life. --- <div class="flex flex-wrap gap-2 mt-8 mb-12"> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">ECharts</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Data Visualization</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Local-First</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">AI-Powered</span> </div>