Incorporate your own unique logo into Highchart graphs

Can custom logos or images be added to the graphs?

I attempted to modify the credits label, but didn't succeed.

$('#container').highcharts({

    credits: {
        text: 'remisture.no',
        href: 'http://remisture.no',
        position: {
            align: 'right',
            x: -75,
            verticalAlign: 'top',
            y: 25
        },
        style: {
            color: 'red',
            backgroundImage: 'url(https://upload.wikimedia.org/wikipedia/en/thumb/3/3a/Burger_King_Logo.svg/1024px-Burger_King_Logo.svg.png)'
        }
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});

Demo: http://jsfiddle.net/remisture/738bnv0b/

Any suggestions on how to achieve this?

javascriptcsshighcharts

Answer №1

In a recent discussion on the Highcharts support forum, it was suggested to utilize Renderer.image in the following manner:

$('#container').highcharts({

    // customized settings

}, function (chart) { // upon completion

    chart.renderer
         .image('//example.com/example.png', 100, 100, 30, 30)
         .add();
});

An example showcasing this approach with an image can be viewed at: http://jsfiddle.net/738bnv0b/3/

Answer №2

The credits label serves as a text and usually functions as a hyperlink to the original source of the graph data.

Are you considering where to place the logo? You have the option to position it outside the Highcharts element and adjust its placement using CSS.

For instance, you could implement something similar to this example on this jsfiddle

    <script src="http://code.highcharts.com/highcharts.js"></script>
<div style="position:relative;">
    <a style="display: block;" href="http://remisture.no" >
        <img style="position:absolute; top: 0; right: 0; z-index: 1;" width="40" src="https://upload.wikimedia.org/wikipedia/en/thumb/3/3a/Burger_King_Logo.svg/1024px-Burger_King_Logo.svg.png" />
    </a>
    <div id="container" style="height: 400px"></div>

</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What causes discrepancies between jQuery set attributes and .html() output?

In an attempt to set attributes on HTML snippets, I am aiming to repopulate a form with previously entered values. Despite using .attr() to set the attributes, they do not appear after using .html(). For reference, I have provided a simple example here: h ...

javascriptjqueryhtml

AngularJS Accordion Component: A Handy Tool for Organ

I have been trying to implement an Accordion in my angular project by sending HTML structure from a controller. However, despite following the documentation closely, the Accordion is not displaying as expected. Here is a snippet of the code I am using: v ...

javascriptangularjs

Utilize compressed browser javascript files within a Node environment

I am facing a challenge with a large minified JavaScript file that contains several functions I need to utilize, but it does not have any browser-specific calls. Is there a methodical approach to transforming this file so it can be utilized in Node.js? T ...

javascriptnode.js

Achieving CommonJS imports compilation with Typescript

In my TS file, I've included a 3rd party package using import XXX { YYY, ABC, 123 } from 'XXX'; While it compiles to CommonJS without any issues, I'd prefer to have it compiled to an ESModule instead. I tried changing the target and mo ...

javascripttypescriptcommonjsecmascript-2020esmodules

The template in AngularJS route fails to display

I am currently facing an issue with loading multiple pages using AngularJS $routeProvider and two controllers. Whenever I click on a link from the first partial to go to the second one, the second partial fails to render properly, displaying only template ...

javascripthtmlangularjsangularjs-routing

retain focus even after using .blur()

Currently, I am implementing a form submission using AJAX. The form consists of only one input field and the submit button is hidden. My aim is to ensure that when the user hits the enter key, the input field does not lose its focus. Here's the code s ...

javascripthtmlajaxforms

In case the desired property is not detected in the object, opt for an alternative property

Here is an example object: Object -> Content: <h1>some html</h1> Url : A url In the code below, I am checking if a specific URL exists in the given object: var checkURLInArray = function(url, array) { for(var i in array) { ...

javascriptjqueryobject

The div just won't stay the size I want, no matter what

Here is a snippet of HTML code: <div class="pointwrap"> <div class="imgwrap"> <img src="howtoplay1.jpg" height="101" width="177"/> </div> <div class="textwrap"> Tap Anywhere in the Drop zone to release a ball. ...

htmlcss

Using Material UI's onClose as an alternative to disableBackdropClick

I currently have a dialogue box displayed on my webpage. <Dialog open={open} data-testid="myTestDialog" disableEscapeKeyDown={true} disableBackdropClick={true} > After visiting the documentation at https://material-ui.c ...

javascriptreactjsmaterial-uimodal-dialog

jQuery fails to recognize response

Can anyone figure out why my alert isn't functioning correctly? <script type="text/javascript"> function SubmitForm(method) { var login = document.form.login.value; var password = document.form.password.value; ...

javascriptjqueryhtmlajax

Is it possible to verify the authenticity of published npm packages by utilizing hashes/checksums?

As I prepare to release an npm package on behalf of my organization, let's call it Organization A, I want our clients to have a means of verifying that the package they are using was indeed released by us. One method to accomplish this is by computing ...

javascriptnode.jssecuritynpmpackage

Using cURL instead of AJAX for PHP requests

My current situation may seem simple, but it feels like a tough challenge for me right now. I am attempting to scrape a website that utilizes AJAX calls to retrieve data. This website has a form where you can select options and then click the submit butt ...

phpjavascriptajaxcurlhttp-headers

What is the process for using AJAX and PHP to upload an image file?

I'm facing an issue where I want to insert an uploaded image into a database with user details for a profile picture. The output I receive currently shows {"current_field":null,"field_count":null,"lengths":null,"num_rows":null,"type":null}. How can th ...

javascriptphphtmlajax

Updating the checklist status using an ajax request: A step-by-step guide

Is it better to update the checklist status by making individual ajax calls for each checklist item or by making one call and updating it once completed? I have included a template showing how it currently looks and what I am aiming for. Unfortunately, I ...

javascriptjqueryhtmlcssajax

What steps can I take to generate a JSON array with this unique format?

The data I received from my angular form is in the array format: [{"name":"Rose","number":"+919224512555"},{"name":"smith","number":"+91975555224"}]. The data represents a dynamic table with columns for name and number. I need to convert the array above i ...

javascriptangular

Unlock the full potential of Vuejs by implementing HTML5 validation checks for input fields

How can I incorporate html5 form.checkValidity() with a form that includes custom components in vuejs 2? Validation works seamlessly with standard html5 inputs: <form name="myform" ref="formref"> <input type="text" ...

javascripthtmlvue.jsvalidationvuejs2

Clicking activates Semantic UI's dropdown function with the onClick method

I am experiencing an issue with the dropdown functionality on my website. Everything works fine until I add onClick() to the Semantic UI component. It seems like there are some built-in functions for handling onClick() within Semantic UI, so when I impleme ...

javascriptreactjssemantic-ui

Is there a way to reverse the image without physically clicking on it?

I've created a JavaScript code for matching images in a 4x4 grid. The goal is to flip the images when clicked and then flip them back if they don't match. I've managed to flip the images initially, but there's an issue with flipping the ...

javascriptjqueryhtmlcss

Create a new design of a Three.js element

After reviewing this particular example involving three.js for drawing particles with images, I found it to work flawlessly. However, I am interested in replacing the image by toggling it with a switch upon clicking a button. Here is the function for this ...

javascriptthree.jsfrontend

Troubleshooting the z-index issue with CSS checkbox hack

Using the css "checkbox hack" to trigger the display of a form when a label is clicked. The form is styled using a :before pseudo element to create a transparent background, but the z-index is not working as expected. Despite adjusting z-index values, the ...

htmlcssuser-interfacez-index