Adding Custom Icons to everviz Charts

While everviz provides many standard styling options, you can enhance your visualizations by adding bespoke logos or icons directly to the chart axes. This is effective for election results or company performance charts.

Example: Election Results The following example shows a column chart where the standard text labels have been replaced by a combination of a brand logo and the party name. This makes the data instantly recognizable at a glance.

This guide explains how to use Highcharts Custom Code to pull logo URLs directly from your data sheet and display them as X-axis labels.

1. Preparing Your Data

To use custom icons, you must include the image URLs directly in your everviz data sheet.

1. Go to the Data tab for your chart.
2. Add a new column. You can name it something like logo_url. Note - The name here is important because we're using it in the custom code below. 
3. Add the URL: For each of your data points, add the full URL to the image you want to display (e.g., a .png or .svg hosted on your CMS or an image hosting service).

2. Implementation: The X-Axis Logo Script

To display these logos, we override the standard X-axis labels. This requires a "Safety Check" in the code to ensure the chart renders correctly even before the data is fully loaded.

How to apply:

1. Open your chart in everviz.
2. Go to Customize > Advanced.
3. Locate the Custom Code section and paste the following:

Highcharts.merge(true, options, {
    chart: {
        marginBottom: 130 // Adds room for the logo + party name
    },
    xAxis: {
        labels: {
            useHTML: true,
            padding: 0,
            formatter: function() {
                var chart = this.chart;
                var labelName = this.value; 
                var logoUrl = '';

                // Safety Check: Ensure chart and data are initialized
                if (chart && chart.series && chart.series[0] && chart.series[0].points) {
                    var point = chart.series[0].points[this.pos];
                    if (point) {
                        // Matches the column header 'logo_url' in your data
                        logoUrl = point.logo_url || point.options.logo_url;
                    }
                }

                // Fallback: If logo is missing, show plain text
                if (!logoUrl) {
                    return '<div style="text-align:center;">' + labelName + '</div>';
                }

                return '<div style="text-align: center; width: 60px;">' +
                       '<img src="' + logoUrl + '" style="width: 40px; height: 40px; display: block; margin: 0 auto 5px auto; object-fit: contain;" />' +
                       '<span style="font-size: 11px; color: #333; font-weight: bold; display: block;">' + labelName + '</span>' +
                       '</div>';
            }
        }
    }
});