Issues with implementing Callouts CSS in Highcharts are causing complications

Currently, I am attempting to construct a callout, and I aim to format the callouts using CSS. Unfortunately, the CSS implementation seems to be malfunctioning for some unknown reason.

Below is the HTML:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

CSS Implementation:

div.callout {
  height: 20px;
  width: 100px;
  /*float: left;*/
  z-index: 1;
}

div.callout {
  background-color: #444;
  background-image: -moz-linear-gradient(top, #444, #444);
  position: relative;
  color: #ccc;
  padding: 10px;
  border-radius: 3px;
  box-shadow: 0px 0px 20px #999;
  margin: 25px;
  min-height: 20px;
  border: 1px solid #333;
  text-shadow: 0 0 1px #000;
  /*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/
}

.callout::before {
  content: "";
  width: 0px;
  height: 0px;
  border: 0.8em solid transparent;
  position: absolute;
}

.callout.top::before {
  left: 45%;
  bottom: -20px;
  border-top: 11px solid #444;
}

.callout.bottom::before {
  left: 45%;
  top: -20px;
  border-bottom: 10px solid #444;
}

.callout.left::before {
  right: -20px;
  top: 40%;
  border-left: 10px solid #444;
}

.callout.right::before {
  left: -20px;
  top: 40%;
  border-right: 10px solid #444;
}

.callout.top-left::before {
  left: 7px;
  bottom: -20px;
  border-top: 10px solid #444;
}

.callout.top-right::before {
  right: 7px;
  bottom: -20px;
  border-top: 10px solid #444;
}

Below is the JS code:

$(function () {
    $('#container').highcharts({
        title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: WorldClimate.com',
            x: -20
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '°C'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
            dataLabels: {
                enabled: true,
                align: 'left',
                crop: false,
                style: {
                    fontWeight: 'bold'
                },
                x: 3,
                verticalAlign: 'middle',
                formatter: function() {
                    return '<div class="callout" data-name="Jane">This is a test message</div>'; 
                }
            },
        }, {
            name: 'New York',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
        }, {
            name: 'Berlin',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
        }, {
            name: 'London',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]
    });
});

Access the demonstration on JSFiddle: http://jsfiddle.net/n0axohL6/1/

Answer №1

The Highcharts documentation explains that only a limited set of HTML tags can be used for text and labels within the charts:

Highcharts allows for text and labels to be written in HTML, but since it is processed and displayed in SVG format, only a few tags are supported. The supported tags include:

<b>, <strong>, <i>, <em>, <br/>, <span>
. Spans can have CSS styles applied using the style attribute, but only text-related CSS properties shared with SVG will be recognized.

Additionally, any HTML content is converted into SVG elements, meaning that divs and CSS classes cannot be used to style text within the chart.

Highcharts 5 introduces a new feature for styling using CSS classes, more information can be found here: http://www.highcharts.com/docs/chart-design-and-style/style-by-css

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

When attempting to submit information to a database table, I encounter an error in the browser console: "Uncaught (in promise) Error: Request failed with status code 404."

In my React Node project's login page, I am encountering the following issue. Despite thoroughly reviewing my code after each execution, the error persists. My goal is to pass data from the login page into my MySQL database; this marks the initial sta ...

When I apply properties in JavaScript, I find that I am unable to utilize the CSS "hover" feature

For a personal project I am currently working on, I decided to experiment with setting background colors using Javascript. However, I have encountered an issue where my CSS code that changes the hover property does not seem to work after implementing the J ...

How to retrieve a value from ng-options using AngularJS?

I want to display a dropdown in which users can select a specific month. Currently, the dropdown is populated with all 12 months in an array. How can I make sure that only the selected month is fetched from the dropdown? Code Snippet: $scope.Month = [&ap ...

Customize the Position of Icons in Material UI

I am looking for guidance on how to position my components within an image using Material UI. Specifically, I want to move my heart component to the top right corner of the image and place the ratings at the bottom. import image from "../../Assets/pic ...

Modifying CSS Styles using JQuery

I've been attempting to use JQuery to change a CSS property without success, despite trying multiple solutions found on SO. Here's what I've attempted (with numberHours being a previously defined variable): $(".cd-schedule .events .top-inf ...

Remove chosen tags from the options list in Material UI Autocomplete Multiple

When utilizing the Material UI Autocomplete for multiple values, the selected input is shown in the options list with a blue background color. Is there a way to configure the autocomplete to exclude already selected values from appearing in the options li ...

A guide to extracting iFrame information (specifically the referring URL) using JavaScript

Is there a way to retrieve the information from an iFrame (right-click on an iFrame in the browser -> This Frame -> View frame info)? I'm particularly interested in obtaining the referring URL. So far, I managed to retrieve the address using co ...

Building a Dynamic Checkbox Validation Feature in Angular Using Data retrieved from an API

Currently, I have a function that retrieves and displays a list obtained from an API: displayEventTicketDetails() { this.Service .getEventTicketDetails().subscribe((data: any) => { this.eventTicketDetails = data.map(ticket => ticket. ...

Utilizing dual functions within the onChange event handler in React

I have a situation where I need to pass a function from a parent component to a child component through the onChange event, as well as another function in the child component to update its own state. How can I achieve this? Parent export function Fruits() ...

The anchorEl state in Material UI Popper is having trouble updating

I am currently facing an issue with the Material UI popper as the anchorEl state remains stuck at null. Although Material UI provides an example using a functional component, I am working with a class-based component where the logic is quite similar. I w ...

What is the best way to incorporate buttons that trigger PHP scripts within a MySQL database?

I have a MySQL database filled with various records that I've displayed in an HTML table on a webpage. I want to add two buttons next to each record, both of which trigger PHP scripts. For example, let's say the table lists the names of three pe ...

Shopify module is throwing an error stating that React is not defined

I wanted to create my first Shopify module, but I encountered an error in my application page on the shop while using React. https://i.sstatic.net/Q02yM.png Here is my index.js code: import {Page} from "@shopify/polaris"; import {ResourcePicker ...

Add an input element to a form fieldset by employing vue

In my form, I have a staged approach with 3 fieldsets that only appear when the "Next" button is clicked. Now, in the third fieldset, I need to add input elements based on keys extracted from an external json object. Data: data: () => ({ c ...

Omit child DIV element in JavaScript and the Document Object Model

I have a situation with two div elements. One is <div class="card" id="openWebsite"> and the other is a sub-division <div class="card__btn"> Here's the issue: When someone clicks on the main div, they get red ...

Deactivate "When the viewModel attribute holds the phrase 'some text'"

I came across this answer on Stack Overflow regarding checking for a value in Knockout, but it seems to be outdated. I am attempting to achieve something like this: <li> <span data-bind="text: Subject"></span> <!-- ko if: Subjec ...

Removing styling from a table header and specific table data cells with CSS

I am trying to create an HTML table where I only want to select cells that are not part of the thead section and do not have a specific class. I am having trouble with the selector for this particular case. table :not(thead):not(.cell-class) { backgro ...

Is it possible to choose several classes with identical names and then trigger a shared function simultaneously?

Is there a way to make this function target all elements with the class ".stop" and stop the video when any of these elements are clicked? window.addEventListener("load", function(event) { window.addEventListener('scroll', checkScroll, false) ...

How can I extract values from an array stored in an external text file using Jquery?

I'm attempting to retrieve an error message from an external file called errors.txt. The contents of errors.txt are as follows: var data = { 'errors': [{ "code": "9999", "message": { row: 1, ...

Utilize Jsoup to retrieve a specific value from a designated HTML source

I am currently working on a project that involves extracting all currency values and their corresponding names from a specific website. These extracted values need to be stored in two separate arrays. While researching online, I came across some code snip ...

File is indicating a status of 200 ok, however it is not being displayed on the screen (node.js, expressjs)

I'm trying to display a video file in the browser and access it like an API on my front end. My goal is to have my front end call the video using a simple <video> tag. <video> <source ="video/randomfile.mov" type="video/mov"> < ...