[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["難以理解","hardToUnderstand","thumb-down"],["資訊或程式碼範例有誤","incorrectInformationOrSampleCode","thumb-down"],["缺少我需要的資訊/範例","missingTheInformationSamplesINeed","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間:2025-07-31 (世界標準時間)。"],[],[],null,["# Using visualization components to render custom visualizations\n\n\u003e This example renders a custom visualization that is local to an app being developed, not a custom visualization that is available from the [Looker Marketplace](/looker/docs/marketplace#accessing_the_looker_marketplace).\n\nLooker visualization components have an adapter system that allows developers to override existing chart types or add entirely new chart type options.\n\nThis option can be useful in the following circumstances:\n\n- You have built custom React visualizations that you'd like to use with Looker components.\n- You want to replace an existing default Looker visualization with a visualization that is built on a different library.\n\nThe ability to override or add charts can be especially relevant if you're building an application that allows users to change the type of chart visualization during a session.\n\nBackground\n----------\n\nAfter rendering a query in Looker's Explore interface and passing its `Query.client_id` into Looker's visualization components, you can modify the chart type by updating the `config` property's [`type` property](/looker/docs/components-vis-prop-tables#config_prop).\n\nEach value accepted by the `type` property is mapped to a specific React component. So, when `type` is set to `line`, a `Line` component is rendered; when `type` is set to `area`, an `Area` component is rendered; and so on.\n\nThe `chartTypeMap` property of the `Visualization` component allows you to add a new entry to, or replace existing entries in, the type/component map that associates each `type` value with a particular component.\n\nRequirements\n------------\n\nYou must begin by importing the `DataProvider` component and providing an authenticated SDK instance. The following example is built within Looker's [extension\nframework](/data-modeling/extension-framework/extension-framework-intro), and the SDK comes from `ExtensionContext`.\n\nWithin `DataProvider`, you can render the `Query` and `Visualization`\ncomponents to request data from the Looker SDK and render the expected visualization within your application.\n\nThe setup is as follows (in the `query` property, replace the value with the `Query.client_id` from your query): \n\n import React, { useContext } from 'react'\n import { ExtensionContext } from '@looker/extension-sdk-react'\n import { DataProvider } from '@looker/components-data'\n import { Query, Visualization } from '@looker/visualizations'\n\n const App = () =\u003e {\n const { core40SDK } = useContext(ExtensionContext)\n return (\n \u003cDataProvider sdk={core40SDK}\u003e\n \u003cQuery query=\"z8klgi4PJKAl7TXgTw1opS\"\u003e\n \u003cVisualization /\u003e\n \u003c/Query\u003e\n \u003c/DataProvider\u003e\n )\n }\n\n\u003cbr /\u003e\n\nAdding a new chart type\n-----------------------\n\nYou can modify the rendered chart type by passing a [config override](/looker/docs/components-vis-prop-tables#pie_chart_properties) to the `Query` component. \n\n \u003cQuery query=\"z8klgi4PJKAl7TXgTw1opS\" config={{ type: 'pie' }}\u003e\n \u003cVisualization /\u003e\n \u003c/Query\u003e\n\nIn this case, `type` was set to `pie`: a chart that Looker components offer by default. But what if you would like to use a chart that isn't offered by default? In that situation, you can use the `chartTypeMap` property of `Visualization` to add or replace the chart components in the type/component map in the adapter system.\n\nIf, for example, you want to add a new radar chart to the type/component map, add it to the `chartTypeMap` like this: \n\n import React, { useContext } from 'react'\n import { ExtensionContext } from '@looker/extension-sdk-react'\n import { DataProvider } from '@looker/components-data'\n import { Query, Visualization } from '@looker/visualizations'\n import { MyCustomRadar } from '../MyCustomRadar'\n\n const App = () =\u003e {\n const { core40SDK } = useContext(ExtensionContext)\n return (\n \u003cDataProvider sdk={core40SDK}\u003e\n \u003cQuery query=\"z8klgi4PJKAl7TXgTw1opS\" config={{ type: 'radar'}}\u003e\n \u003cVisualization chartTypeMap={{ radar: MyCustomRadar }} /\u003e\n \u003c/Query\u003e\n \u003c/DataProvider\u003e\n )\n }\n\nThis code does the following things:\n\n- Imports the `MyCustomRadar` React component\n- Assigns the `radar` key to the `config.type` property\n- Updates the `chartTypeMap` property so that the type mapping system knows what to render for a `type` of `radar`\n\nThis is how it renders in the Looker visualization playground:\n\nSimilarly, you can replace existing charts if you'd like to render your own version. In the following example, the default Looker components' line chart is overridden with a custom line chart component: \n\n import React, { useContext } from 'react'\n import { ExtensionContext } from '@looker/extension-sdk-react'\n import { DataProvider } from '@looker/components-data'\n import { Query, Visualization } from '@looker/visualizations'\n import { MyCustomLine } from '../MyCustomLine'\n\n const App = () =\u003e {\n const { core40SDK } = useContext(ExtensionContext)\n return (\n \u003cDataProvider sdk={core40SDK}\u003e\n \u003cQuery query=\"z8klgi4PJKAl7TXgTw1opS\"\u003e\n \u003cVisualization chartTypeMap={{ line: MyCustomLine }} /\u003e\n \u003c/Query\u003e\n \u003c/DataProvider\u003e\n )\n }\n\nNow, whenever the `Query` component encounters a query where the visualization type is set to `line`, it will render the custom implementation in place of the Looker default.\n\nNext steps\n----------\n\n- [Using visualization components and the `dashboard` property to render a simple visualization](/looker/docs/components-vis-dashboard-id)\n- [Using visualization components to build a custom visualization](/looker/docs/components-vis-custom)\n- [Visualization and Query property tables](/looker/docs/components-vis-prop-tables)"]]