Bordering the limits with Highcharts

Can I enhance the plot area with a border, similar to the black border shown in the image?

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

-- UPDATE -- I am encountering some unwanted white space between the plot area and the border. Is it possible to eliminate this white space?

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

Answer №1

Update Utilize plotBorder width to create internal border. Check out the revised fiddle here

Here is an example:

 chart: {
        borderColor: '#EBBA95',// customize as needed
        borderWidth: 3 

    } 

For a black border, use:

borderColor:'#000000'

Experiment with different borders in this demo

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

Comparing a hexadecimal string from a buffer in JavaScript with Python

I am looking to output a hex escaped sequence string from a Buffer. For example: buffer = .... // => <Buffer d3 e9 52 18 4c e7 77 f7 d7> If I use the following: console.log(buffer.toString('hex')); The result is: d3e952184ce777f7d7 ...

Tips for inserting a rotated image using CSS

I've created the following code snippet. However, there is a new requirement stating that the image needs to be rotated by 180 degrees. How can I make this happen? #cell { background-image: url("../images/logo.PNG"); background-attachment: fixed; b ...

Increasing variable in angular template (nested ng-repeat)

I am facing a similar situation as described in the example below, and I need to generate a serial number for each row independently for each mark record. Here is the Java script Object structure: $scope.childsList = [ { id:12346, ...

Attach to dynamically generated elements by event listeners that bind on mouseover or hover

I am looking to implement a hover effect for dynamically generated items in JavaScript. Specifically, when I hover over an icon element, I want a unique text to appear related to that icon: for (var i = 0; i < items.length; i++) { $('.items&ap ...

Issues arise when the sub-menu does not function properly and overlaps with other elements of

I've been working with a client on their website and encountered an issue. On the mobile version of our menu, when I hover over a menu item that has several sub-menu items, those items display properly, but there is an element below them showing thro ...

What is the best way to ensure that the search box automatically adjusts its position and size regardless of the screen resolution?

I'm currently working on a responsive website project and facing an issue with the absolute positioning of the search bar on the main page, which is crucial for me. Below is the code snippet: <div class="span4"> <form class="well form ...

Exploring the potential of Framework7 in Single Page Applications: optimizing performance by preloading

I'm currently working on developing a web application using Framework7. Framework7 offers routing APIs for navigating between HTML pages. It seems that the pages are loaded dynamically through AJAX requests. I am curious if it is possible to preload ...

How to keep your vue-router up-to-date

As a newcomer to vuejs, I am using vue cli 3 for my project which consists of various components. One of the components is a menu component where I retrieve all the menu items from an API (code provided below). I have integrated vue-router for routing purp ...

Troubleshooting IE8 Problem with CSS Table Cell

Wondering if this is an easy fix :) I have a website with the following CSS styles: .gameboard-table { border: solid 3px black; padding: 0px; border-collapse: collapse; } .gameboard-table tr { padding: 0px; margin: 0px; } .gameboard- ...

I am unable to display the content even after setting `display: block` using the `.show()`

Hello there, I have attached my javascript and html code. While in debug mode, I can see that the CSS property 'display: none' changes to 'display: block', but for some reason, the popupEventForm does not open up. Any suggestions on why ...

Is it possible to implement CSS code from a server request into a React application?

With a single React app that hosts numerous customer websites which can be customized in various ways, I want to enable users to apply their own CSS code to their respective sites. Since users typically don't switch directly between websites, applying ...

Icon for local system displayed on browser tab

I am currently trying to set a Browser Tab icon for the local system, but it is not working. However, when using an HTTP static icon, it works perfectly. Can someone please help me understand what the issue might be? PAGE 1 : Icon Not Showing <link re ...

Using jQuery to search for corresponding JSON keys in the PokéAPI

Currently, in my development of an app, I am searching for and implementing an English translation of a language JSON endpoint using the PokéAPI. The challenge lies in identifying the correct location of the English language key within the array response, ...

Transferring a zipped file between a Node.js server and a Node.js client

I am facing an issue with sending a zip file from a node.js server to a node.js client. The problem is that when I try to save the zip file, it becomes corrupted and cannot be opened. To create and send the zip file to the client, I am using the adm-zip l ...

Using a promise inside an Angular custom filter

I am attempting to implement a filter that will provide either a success or error response from the ret() function. The current code is returning {}, which I believe is its promise. .filter('postcode', ['$cordovaSQLite', '$q' ...

iOS 10's autofocus feature experiencing difficulties in focusing on input

While using an application on my desktop or Android device, I have noticed that the input focus works perfectly fine. However, when I try to run the same application on iOS 10 Safari, the input focus does not seem to be working. It is worth noting that I ...

Can @keyframes be iterated through CSS (particularly Stylus)?

Here is some Stylus code I'm working with: for i in (1..3) .l:nth-child({i}) opacity (i / 5) When executed, the output looks like this: .l:nth-child(1) { opacity: 0.2; } .l:nth-child(2) { opacity: 0.4; } .l:nth-child(3) { opacity: 0.6; } ...

I am in need of eliminating repetitive comments from each post

data structure can you help figure out what is causing the issue in this code that seems to be removing old comments? mutations:{ getPosts(state) { let unique = [...new Set(state.posts)]; for (let i = 0; i < uniq ...

What could be causing the lack of change in direction for the initial function call?

There appears to be an issue with image(0) and image(1) in this array that I can't quite understand. The console output shows: i=5; div class="five" id="slides" i=0; div class="one" id="slides" i=1; div class= ...

Unable to retrieve the .attr() from a button that was created using handlebars

I am currently working on developing a web scraper as part of a homework task that involves using Express, Mongoose, Cheerio/axios, and Handlebars. In my "/" route, I retrieve the Mongoose objects and use Handlebars to display them on the page in individua ...