Using JSON in Highcharts: Customizing Border and Label Colors

Currently using Highcharts in JSON format with the following syntax:

var neutral_color = '#c4c4c4',
    medium_grey = '#929292';

lineChartJSON['chart']['plotBorderColor'] = medium_grey;
lineChartJSON['chart']['plotBorderWidth'] = 1;
lineChartJSON['chart']['zoomType'] = 'xy';

lineChartJSON['yAxis']['gridLineColor'] = medium_grey;
lineChartJSON['yAxis']['gridLineWidth'] = 1;
lineChartJSON['yAxis']['labels'] = { style: { color: neutral_color} };

lineChartJSON['xAxis']['lineColor'] = medium_grey;
lineChartJSON['xAxis']['lineWidth'] = 1;
lineChartJSON['xAxis']['tickColor'] = medium_grey;
lineChartJSON['xAxis']['labels']['style'] = { color: neutral_color };
lineChartJSON['xAxis']['title']['style'] = { color: neutral_color };

Seeking to change the border style around the columns to null or the same color as the background. Currently, they default to white. Additionally, looking to customize the colors of the xAxis and yAxis labels, currently defaulted to #666.

Struggling with the correct syntax as the documentation refers to a different data format. The format 

lineChartJSON['yAxis']['labels'] = { style: { color: neutral_color} };
does not work without error, but 
lineChartJSON['yAxis']['labels']['style'] = { color: neutral_color};
does throw an "element not defined" error.

Noting that 'lineColor and tickColor functions properly.

Any recommendations or resources for better understanding the Highcharts array syntax in JSON versus JS?

javascriptjsonhighcharts

Answer №1

Oh man… I decided to tackle the styling using CSS for the sections that were tricky to access via the API. It was a bit challenging due to the heavy inline styling by Highcharts on the SVG elements, but I managed to achieve the desired outcome with the help of numerous !important declarations.

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

Is it possible for us to perform an addition operation on two or more items that belong to the same

I am faced with a challenge involving 3 objects of the same type, each having different values for their properties. My goal is to add them together as illustrated below: Consider this scenario: objA = { data: { SH: { propertyA: 0, propertyB: ...

javascripttypescriptobject-type

Transform PowerShell objects into JSON format, specifically focusing on extracting IP addresses

Looking to gather information about network interfaces: > Get-NetIPConfiguration | select IPv4Address, InterfaceAlias, InterfaceDescription | ConvertTo-Json Response [ { "IPv4Address": [ "MSFT_NetIPAddress (Na ...

jsonpowershellnetworkingipv4

React Resize Detection: Handling Window Resize Events

Is there a more efficient way to listen for the window resize event in react.js without causing multiple callbacks? Perhaps a React-oriented approach (like using a hook) to achieve this? const resizeQuery = () => { console.log("check"); if ( ...

javascriptreactjsmaterial-ui

Add the useState hook from React to an array

Hey there, I need some help with my code. I am trying to add an element to my array, but it's not working as expected. Can you take a look at what I have written below? const [datesState, setDisabledData] = useState([ format(new Date(2021, 4, 1) ...

javascriptarraysreactjsreact-native

What is the best way to import an external file from the project's root directory using webpack?

I am currently working on a unique npm package that will allow for the integration of custom rules from the project root. This functionality is similar to how prettier searches for a .prettierrc file in the project root. For this particular package, I am ...

javascriptreactjsnpmwebpackwebpack-2

Exploring the wonders of LoopBack querying

Discovering loopback has been an enlightening experience for me. However, as I delve deeper into its functionalities, I've stumbled upon something unexpected. I noticed that when executing queries, such as using the updateAll method, if a parameter i ...

javascriptloopbackjs

Removing a JSON child node in C# with Newtonsoft.Json

Currently, I am in the process of developing an application using c# WPF in .NET 3.5, and I am utilizing the newtonsoft library to parse JSON strings. My current inquiry involves the removal of a child node in JSON format. Let's consider the followi ...

c#jsonwpfjson.net

State of the Browser - JavaScript/jQuery

Looking for a method to identify when my browser is loading and display a loading icon. Is this approach appropriate, or should I follow a more common practice to achieve the same goal? Edit: This feature will be implemented on one of my websites during ...

javascriptjquery

Implementing a dynamic table filter for every column using AngularJS

I have been working on a project to create a custom directive that generates a table with dynamic data and allows for sorting of columns. While the sorting function works as intended, I now want to implement filtering on all columns without specifying a sp ...

javascriptangularjsangularjs-directiveangularjs-ng-repeat

Transforming a JSON data string into a DataTable using Newtonsoft.Json in VB

Here is the string I am working with: [{'Column1': 'c1r1', 'Column2': 'c2r1'},{'Column1': 'c1r2', 'Column2': 'c2r2'}] In Visual Basic, I am trying to convert this string into ...

vb.netjsonserializationdatatablejson.net

GSON ensures that JsonSyntaxException is avoided by returning a partially mapped result

Encountering an issue, I'm not looking to resolve it but rather trying to figure out a way to instruct GSON to "skip errors and continue" parsing : Error message: Can't parse json : java.lang.IllegalStateException: Expected a string but was ...

javaandroidjsonparsinggson

What steps can be taken to receive an alternative result when selecting a checkbox?

Currently, I am tackling the issue with checkboxes in Vuetify. The challenge lies in achieving a different output for the second {{ selected.join() }}. For example, when I select the checkbox labeled "Social Media," I receive the text "On our social medi ...

javascriptarraysvue.jscheckboxvuetify.js

Is it necessary to include a back button when navigating through paginated tables?

Within my AngularJS application, I have implemented pagination on the user list page. This allows me to retrieve ten users at a time from the server, with each click loading another set of ten users on a new page. The user details are presented in a tabl ...

javascriptangularjspagination

comprehending the concept of express and mastering its usage

Can you confirm if my understanding is correct? 1) So, when I write this line of code... const express = require(“express”) I am assigning a "Class" to the variable express. 2) And then, when I call this function... express.jason() Am I correctly ...

javascriptnode.jsexpress

What are the best ways to conceptualize the benefits of WebRTC?

I encountered a peculiar issue with the abstraction of the WebRTC offer generation process. It appears that the incoming ice candidates fail to reach the null candidate. While I have been able to generate offers successfully using similar code in the past, ...

javascriptsocketsstreamwebrtcgetusermedia

Can VueJS Computed handle multiple filters at once?

I am encountering an issue with this code - when I attempt to add another filter inside the computed section, it doesn't work. However, if I remove the additional filter, the code functions correctly. My goal is to have both company and product searc ...

javascriptvue.jsfiltervuejs2vue-component

Display HTML content using JavaScript only when a checkbox is selected

Currently, I am updating an HTML form to show additional subsets of questions based on the selection of a "parent" checkbox. The current implementation works well, but I am wondering if there is a more efficient way to achieve this without having to rewrit ...

javascripthtmlformsconditional-formatting

Creating a promise class in JavaScript

I am in the process of creating a simple promise class with chainable .then() functionality in javascript. Here is my progress so far: class APromise { constructor(Fn) { this.value = null; Fn(resolved => { this.value = resolved; }); ...

javascriptnode.jsecmascript-6promise

When the "open" prop is set to "true", the DRAWER component from @material-ui/core fails to display

Help Needed: I'm struggling to make the drawer component open when the variant prop is set to "temporary". Material-UI Package Used: @material-ui/core I have integrated Material UI's drawer component into my custom Nav component. However, I am ...

javascriptreactjsbabeljsmaterial-uijsx

retrieving JSON data from the request body

I have been struggling to send a JSON String from an AJAX call to a Jersey web service. Despite researching various related questions and articles, I have not been successful in getting it to work. When monitoring my calls through Fiddler, I can see the ...

javaajaxjsonjersey