Place additional text above the export button within Highcharts

Presently, I'm utilizing the Highcharts API here and here to customize the export button for Highcharts. I am attempting to position an ellipsis inside the export button in order to adhere to certain style guidelines. However, due to the limitations of the API options, the closest I can achieve is placing it next to the symbol.

Current settings used:

exportButton: {
    text: '...',
    symbolFill: 'rgb(250, 168, 0)',
    symbolStroke: 'transparent',
    symbol: 'circle'
},

This is the current outcome: JsFiddle

Essentially, my desired end result looks something like this:

https://i.sstatic.net/D8Mne.png

Does anyone have a method to achieve this without resorting to using an image?

javascriptcsshighcharts

Answer №1

Utilizing the Renderer feature allows you to create a precise shape and integrate it into the exporting button group.

Highcharts.Chart.prototype.callbacks.push(function(chart) {
var exportElements = chart.exportSVGElements,
  exportButton = exportElements[0],
  cx = exportButton.width / 2,
  cy = exportButton.height / 2,
  r = cx,
  renderer = chart.renderer;

    exportElements.push(renderer.circle({
      cx: cx,
      cy: cy,
      r: r,
      fill: '#ADD8E6'
    }).add(exportButton));

    [0.65, 1, 1.35].forEach(scx => {
      exportElements.push(renderer.circle({
        cx: scx * cx,
        cy: cy,
        r: r * 0.12,
        fill: 'white'
      }).add(exportButton));
    });
});

Next, set the dimensions for exporting width and height and specify the symbol as null

    exporting: {
  buttons: {
    contextButton: {
      symbol: null,
      height: 50,
      width: 50,
    }
  }
},

For a visual example, check out: http://jsfiddle.net/0wd08pjw/

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

Executing JavaScript code within a class object using ASP-VB

I'm looking to create a function that will show a Javascript-based notification. I already have the code for the notification, but I'm trying to encapsulate it in a class library as a function. However, I am unsure about what to return from the f ...

javascriptasp.netajaxvb.netregisterstartupscript

Having trouble getting the Node.JS Express Server to function properly on Enide?

My webserver is built using Node.JS with express and has multiple route commands. While everything works fine when running Node from the command line, I encounter an issue when running it within the Enide environment. Each request triggers an error messa ...

javascriptnode.jsexpressnodeclipseenide

Discover an Easy Way to Scroll to the Bottom of Modal Content with Bootstrap 5 on Your Razor Page

Currently, I am developing a web application that utilizes Razor Pages and Bootstrap 5 modals to showcase dynamic content. The challenge I am facing is ensuring that the content inside the modal automatically scrolls to the bottom when the modal opens or w ...

javascripthtmlbootstrap-5razor-pages

Looking for a way to dynamically adjust the height based on window resizing

I am trying to figure out how to adjust the height of a scrollable grid dynamically. I came across a solution on this website However, the provided solution is not suitable for me as it has: styles: [` html, body, my-app { height: 100%; } '] ...

javascriptangularkendo-ui

Redirecting a CSS link on a website

I have a webpage with a "read more" option that redirects to the About Us page. When I click on "read more", the About Us page opens at the top, but I want it to redirect to the bottom of the About Us page. How can I achieve this? ...

css

`Save user edits on the webpage using Electron`

I am encountering an issue with my electron app. I use the window.loadUrl() method to navigate between pages. Some of these pages require users to input data that needs to be saved. The problem arises when a user enters information, moves to another page ...

javascriptnode.jsangularjselectron

Trigger a pop-up alert box when the jQuery event $(document).ready is fired within a Smarty template

I'm currently attempting to make a popup message display when the document is fully loaded. Although I have successfully integrated Google Maps on another page, this task seems to be more challenging. Below is the code snippet: <html> < ...

javascriptjquerysmarty

Tips for incorporating a dynamic CSS style sheet into a standalone xhtml document

I am faced with the task of incorporating two CSS classes into a single xhtml. For instance: Take, for example, display.xhtml, which will be utilized by two different applications, each requiring its own CSS styling. This means that if display.xhtml is ...

htmlcssxhtml

Adding text to a horizontal scrolling element causes the parent div to be pushed downwards

Can anyone help me understand why inserting text into one of the divs in a horizontally scrolling div causes the parent div to move downward? Looking for suggestions! @import url('https://fonts.googleapis.com/css?family=Hind:300,400,500,600,700&apo ...

htmlcss

Ways to format a C# string outcome showcased in HTML (ASP.NET)

I'm facing an issue with formatting the output (string) retrieved from a C# database connected to ASP.NET. I want to style the row["Grens"] differently from row["Sanctie"], for instance. The result is displayed in a basic div: <div id="resultaat" ...

c#htmlcssasp.net

Utilizing the OrientDB HTTP API within an Angular platform - a comprehensive guide

When trying to query OrientDB from an Angular service method, authentication-related errors are encountered. It appears that two GET requests are required for successful querying of OrientDB. An Authentication call: Requesting http://localhost:2480/conne ...

javascriptangularjsajaxorientdb

VeeValidate fails to validate input fields in a form that is constantly changing

My goal is to create dynamic forms with validations using veeValidate in Vue.js. I am attempting to achieve this by storing an array of objects within the component's data. For instance: data(){ return{ inputs: [ { id: 1, lab ...

javascriptvue.jsbootstrap-vuevee-validate

Retrieving a MongoDB collection using its unique ID

Here's a query that may seem straightforward. I have two collections in MongoDB - one named "users" with an objectId, and the other named "listings" which has the userId. I am looking to retrieve documents from the listings collection by searching fo ...

javascriptmongodbangularmeanjs

Creating images or PDFs from HTML with CSS filters: a guide

Looking for someone who has experience creating images or PDFs from HTML code. The HTML contains images with CSS filters such as sepia and grayscale. If you have worked on this type of project before, I would love to hear about your experience. <img cl ...

javascriptphpcsspdf-generation

Utilizing eval properly in JavaScript

One method I am using is to load a different audio file by clicking on different texts within a web page. The jQuery function I have implemented for this purpose is as follows: var audio = document.createElement('audio'); $(".text_sample ...

javascriptjqueryaudioeval

Vue.js component is failing to display on the page

I am struggling with a component that should use axios to fetch some data for my page, but the request is not being made. Below is the code snippet: Snippet from App.vue: <template> <div id="app"> <Prices/> </div> </tem ...

javascriptvue.jsvuejs2vue-component

The findOne method in Mongoose JS consistently yields a null value every time

Struggling to fetch data from my local MongoDB using Mongoose. The command works in the MongoDB shell, but not getting results in Mongoose. Came across a helpful post on stackoverflow addressing the same issue here. Followed the solutions provided in the p ...

javascriptnode.jsmongodbmongoose

Having difficulty incorporating a video into the background

After searching online and attempting two different methods, I am still unable to achieve the desired result. I want a video to cover the entire background of my webpage. Here is what I have tried: CSS - video#bgvid { position: fixed; top: 50%; ...

htmlcssvideobackground

Ways to use string functions in JavaScript to substitute with /

Here is the image path I am working with: var str = "D:\Poc\testProject\DataPush\public\unzip\cust\AccountData\2.jpg" When I included "unzip" in the path, it threw an error as shown in this image, but when ...

javascriptnode.jsreplace

What is the process for turning off bootstrap form validation?

I am facing an issue with utilizing the default input email validation in my development project. It seems that Bootstrap, which is being used for the website, has its own validation mechanism. Whenever I begin typing in a Bootstrap input field, an error m ...

htmlcssformstwitter-bootstrapvalidation