HighCharts API And Looker Chart Config Editor Tips & tricks

Make your data story more comprehensive by using personalized Looker charts and visualizations with HighCharts API.

Looker Chart Config Editor Tips And tricks

A collection of numbers is all that data is unless it can be used to tell a story and obtain further information. Google Cloud is always working to enhance Looker’s features so you can work together with reliable metrics and share your data stories. It has added the capability to add bullet chart, sunburst, venn, and treemap visualizations to Looker Explores and dashboards by utilizing the Chart Config Editor to previously available Looker visualizations. It wanted to offer some best practices on how to use the Chart Config Editor to enrich your visualizations and make meaningful data experiences so that you can make the most of these new Looker visuals.

HighCharts API

For those who are unfamiliar with the Chart Config Editor, Looker visualizations show your data using the Highcharts interactive charting library. You may customize your visualizations by utilizing the editor, which exposes portions of the Highcharts library API. In order to enhance your visualizations, it will explore the Highcharts API and discover some useful Chart Config Editor tips and tricks in this post. You need have access to Chart Config Editor and be familiar with the JSON format in order to fully comprehend its examples in order to get the most out of this post.

HighCharts API reference

In a line chart, set the labels and look of each line

Consider a representation of a line chart that shows several time series, each represented by a single line. You might find it difficult to distinguish between the lines in the dashboard viewer, or you might want to highlight a certain line more than others. Highchart offers several `series} properties that you can use to modify how each line is presented and styled. Among the qualities are:

• {dashStyle} to alter the pattern of each line
• To alter the thickness of every line, use {lineWidth}.
• {opacity} to alter the opacity of each line
• Use dataLabels to add labels to the values or data on a line.

You can apply each {series} property in any combination to make the data in your line visualization easier for your stakeholders to grasp.

By setting the default styling across all lines using Highchart’s plotOptions attribute, you can further simplify the settings shown in the above sample. Afterwards, you may use the {series} element, which changes the default styling, to further modify individual lines. The following Chart Config Editor setting sample shows both the overriding and default styling:

Allowing visuals to scroll inline

Imagine a column chart visualization where each column represents a month and the date time x-axis spans several decades. The width of your dashboard limits the visualization you may use, so as time goes on, the widths of each column get smaller and the monthly or annual trends are compressed, making them difficult to grasp.

To enable horizontal scrolling for your stakeholders through a column or line-chart visualization, try defining the width of your visualization using Highchart’s chart.scrollablePlotArea} attribute. TheminWidthattribute allows you to establish the minimum width of your visualization, while thescrollPositionX` attribute allows you to specify the visualization’s starting scrolling position. The visualization’s minimum width of 2,000 pixels and its initial scrolling position to the right are established in the Chart Config Editor configuration sample below.

chart: {
scrollablePlotArea: {
minWidth: 2000,
scrollPositionX: 1
}
},

Try experimenting with the scrollPositionY} andminHeight` attributes as well to allow scrolling vertically in your visualizations.

Complete control over the data labels for additional chart visualizations, such as pie charts

You can name each pie slice using the plot menu options in a pie chart visualization, but usually you can just display the slice’s value or percentage. To fully comprehend all of the data, the observer must perform a double take, glancing between the legend and the data labels. Additionally, all of the data will not be accessible in a scheduled PDF delivery of the dashboard containing the visualization, even if users might mouseover each pie slice to view it.

To help your stakeholders quickly extract information from your charts, you can use the Chart Config Editor to display any information that is available on the HighCharts PointLabelObject on the data labels. This includes the percentage and value displayed simultaneously. You can also further customize the labels with HTML. To modify the format and style of a chart’s data labels, you must set up the previously stated Highchart {dataLabels} attribute from its first example. The following {dataLabels` attributes need to be configured:

• {enabled}, as demonstrated in our first example, to enable data labels on the chart
• To enable HTML styling of data labels, use useHTML.
• To apply CSS styles to every data label, use {style}.
• Use {format} to specify the piece and format.

The data labels of the pie chart are shown in the Chart Config Editor configuration sample below with a font size of 12 pixels. If the property name for the format} attribute is enclosed in curly braces, then all of the PointLabelObject's properties can be shown in the data label. The example assigns the following string to theformat` attribute}:

• The pie slice name bolded with the key attribute of the PointLabelObject within an HTML Draw Focus On This Aspect
• The value of the data point with the `y} property of the PointLabelObject
• Specifies the percentage of the data point with one decimal place formatting using the PointLabelObject’s percentage property

The format of the final data label is as follows: Category: 11.5%, 596524.

Keep in mind that the tooltip.format} attribute and thedataLabels.format} attribute function similarly; the documentation has more information on this. Also take note that for pie charts, it need the plotOptions.pie.dataLabels} attribute. You must override theplotOptions.line.dataLabelsattribute if you wish to format a line chart with the same data-label style. The interface and functionality of many chart kinds are mostly shared via thedataLabels` element.

Make your charts more insightful and powerful

We hope that these illustrations will work as a springboard for you as you investigate the HighCharts API and discover how to set up your Looker visualizations to convey useful and compelling narratives. You now know how to enable inline scrolling of visualizations, edit data labels, and change the appearance of each series of your data using the Looker Chart Config Editor and HighCharts API.