Como criar um gráfico de marcadores com o editor de configuração de gráficos
Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
Os gráficos de marcadores são úteis para mostrar a performance em relação a uma meta ou o progresso em relação a uma meta.
Com o Chart Config Editor, é possível criar gráficos de marcadores a partir de um gráfico de barras no Looker.
Por exemplo, o gráfico de marcadores a seguir compara a medida Contagem de novos clientes, representada por uma barra de progresso azul, a um valor de meta de 40, representado por uma linha vertical azul. O gráfico também indica os intervalos de progresso entre 0 e 20, 20 e 40 e 40 e 80, cada um representado por um tom de cinza diferente.
Mude os seguintes valores para se adequar ao seu caso de uso:
O atributo xAxis.categories substitui o rótulo do eixo X. Neste exemplo, o rótulo do eixo X deve ser o nome da medida Novos clientes.
O atributo yAxis.plotBands especifica a cor de fundo do gráfico para determinados valores. Neste exemplo, a cor de fundo é cinza-escuro (#666666) entre 0 e 20, cinza médio (#999999) entre 20 e 40 e cinza-claro (#bbbbbb) entre 40 e 80.
O atributo series.data.target especifica o valor desejado para o gráfico de marcadores, que vai aparecer como uma linha vertical. Neste exemplo, a meta é 40.
Como criar um gráfico de marcadores
Para criar um gráfico de marcadores, siga estas etapas:
Visualize um gráfico de barras em uma Análise ou edite um gráfico de barras em um Look ou painel.
Para este exemplo, recomendamos começar com um gráfico de barras com uma dimensão e uma medida, com um limite de uma linha. O gráfico inicial pode ser parecido com este exemplo:
Abra o menu Editar na visualização.
Na guia Gráfico, clique no botão Editar configuração do gráfico. O Looker mostra a caixa de diálogo Edit Chart Config.
Selecione a seção Configuração do gráfico (substituir) e insira o JSON do HighCharts na seção Como escrever o snippet JSON desta página.
Para permitir que o Looker formate seu JSON corretamente, clique em <> (Format code).
Para testar as mudanças, clique em Visualizar.
Para aplicar as mudanças, clique em Aplicar. A visualização será mostrada usando os valores JSON personalizados.
Depois de personalizar a visualização, você pode salvá-la. Se você acessou a visualização em uma Análise, salve a Análise. Se você tiver editado um visual ou um painel, clique em Salvar.
[[["Fácil de entender","easyToUnderstand","thumb-up"],["Meu problema foi resolvido","solvedMyProblem","thumb-up"],["Outro","otherUp","thumb-up"]],[["Difícil de entender","hardToUnderstand","thumb-down"],["Informações incorretas ou exemplo de código","incorrectInformationOrSampleCode","thumb-down"],["Não contém as informações/amostras de que eu preciso","missingTheInformationSamplesINeed","thumb-down"],["Problema na tradução","translationIssue","thumb-down"],["Outro","otherDown","thumb-down"]],["Última atualização 2025-08-25 UTC."],[],[],null,["# Creating a bullet chart with the Chart Config Editor\n\n| **Note:** Starting in Looker 24.4, the Chart Config Editor supports the creation of bullet charts.\n\nBullet charts are useful for showing performance against a target, or progress on a goal.\n\nUsing the [Chart Config Editor](/looker/docs/chart-config-editor), you can create bullet charts by starting from a bar chart in Looker.\n\nFor example, the following bullet chart compares the **New Customers Count** measure, represented by a blue progress bar, to a target value of 40, represented by a blue vertical line. The chart also indicates progress buckets between 0 and 20, between 20 and 40, and between 40 and 80, each represented by a different shade of grey.\n\nPrerequisites\n-------------\n\nTo access the Chart Config Editor, you must have the [`can_override_vis_config` permission](/looker/docs/admin-panel-users-roles#can_override_vis_config).\n\n### Writing the JSON snippet\n\nTo create a bullet chart, start from the following JSON snippet: \n\n {\n chart: {\n type: 'bullet'\n },\n xAxis: {\n categories: ['New Customers']\n },\n yAxis: {\n plotBands: [{\n from: 0,\n to: 20,\n color: '#666666'\n }, {\n from: 20,\n to: 40,\n color: '#999999'\n }, {\n from: 40,\n to: 80,\n color: '#bbbbbb'\n }],\n },\n series: [{\n data: [{\n target: 40\n }]\n }],\n }\n\nChange the following values to fit your use case:\n\n- The `xAxis.categories` attribute overwrites the label of the X-axis. In this example, the X-axis label should be the measure name **New Customers**.\n- The `yAxis.plotBands` attribute specifies the background color of the chart for certain values. In this example, the background color is dark grey (`#666666`) between 0 and 20, medium grey (`#999999`) between 20 and 40, and light grey (`#bbbbbb`) between 40 and 80.\n- The `series.data.target` attribute specifies the target value for the bullet chart, which will appear as a vertical line. In this example, the target is 40.\n\n### Creating a bullet chart\n\nTo create a bullet chart, follow these steps:\n\n1. View a [bar chart](/looker/docs/bar-options) in an Explore, or edit a bar chart in a Look or dashboard.\n\n For this example, we recommend starting from a bar chart with one dimension and one measure, with a limit of one row. Your starting chart might look something like this example:\n\n2. Open the **Edit** menu in the visualization.\n\n3. In the **Plot** tab, click the **Edit Chart Config** button. Looker displays the **Edit Chart Config** dialog.\n\n4. Select the **Chart Config (Override)** section, and enter the HighCharts JSON from the [Writing the JSON snippet](#json) section of this page.\n\n5. To allow Looker to properly format your JSON, click **\\\u003c\\\u003e (Format code)**.\n\n6. To test your changes, click **Preview**.\n\n7. To apply your changes, click **Apply**. The visualization will be displayed using the custom JSON values.\n\nOnce you've customized your visualization, you can save it. If you viewed the visualization in an Explore, [save the Explore](/looker/docs/viewing-and-interacting-with-explores#the_explore_actions_gear_menu). If you edited a Look or a dashboard, click **Save**."]]