Exciting Funnel Design with Highcharts

As someone new to the world of Highcharts library, I am eager to create a horizontal funnel. I noticed there is an example of a vertical funnel on http://www.highcharts.com/demo/funnel but I couldn't find any options to make it appear horizontal. I've been going through the documentation in an attempt to figure out how to customize Highcharts, but so far, I haven't been able to find a solution. Do you think it's possible to accomplish this horizontal funnel design using Highcharts? https://i.sstatic.net/tmXPU.png

Answer №1

We regret to inform you that this feature is not currently supported.

You can find more information about this issue here.

Answer №2

The visualization in the image you shared may not align exactly with the chart, but you can achieve an inverted pyramid or funnel effect using a stacked area series.

For an illustration, refer to this example: http://jsfiddle.net/2e3uh4xy/

$(function() {
  var dataset = [5, 9, 12, 8, 6],
    dataPoints = [
      [0, 100]
    ],
    overPoints = [
      [0, 0]
    ],
    underPoints = [
      [0, 0]
    ],
    segments = [],
    length = dataset.length,
    colors = Highcharts.getOptions().colors,
    maxColorIndex = colors.length,
    index, value, total = 0,
    position = 0;

  for (index = 0; index < length; index++) {
    total += dataset[index];
  }

  for (index = 0; index < length; index++) {
    position += dataset[index];
    value = (total - position) / total * 100;
    dataPoints.push([position, value]);
    overPoints.push([position, (100 - value) / 2]);
    underPoints.push([position, (100 - value) / 2]);
    segments.push({
      value: position,
      color: colors[index % maxColorIndex]
    });
  }

  $('#graph-container').highcharts({
    chart: {
      type: 'area'
    },
    yAxis: {
      title: {
        text: 'Percentage'
      }
    },
    plotOptions: {
      area: {
        enableMouseTracking: false,
        showInLegend: false,
        stacking: 'percent',
        lineWidth: 0,
        marker: {
          enabled: false
        }
      }
    },
    series: [{
      name: 'over',
      color: 'none',
      data: overPoints
    }, {
      id: 'data-series',
      name: 'Data Series',
      data: dataPoints,
      showInLegend: true,
      zoneAxis: 'x',
      zones: segments
    }, {
      name: 'under',
      color: 'none',
      data: underPoints
    }]
  });
});

While your desired chart may not be an exact match in Highcharts, it is possible to adjust your data and settings to achieve a similar effect. Dotted lines, for example, can be implemented using line with a specified dash style.

See this example for reference: http://jsfiddle.net/2e3uh4xy/17/

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

How can I customize the styling of an SVG pseudo element using Font Awesome 5?

I've implemented font awesome 5 pseudo elements to attach an :after tag to my element as shown below: &:after { content: "\f068"; font-weight:400; color:$brandRed; float:right; font-family: "Font Awesome 5 Pro"; } The c ...

Enhancing Plotly Graphs with Custom Node Values

Encountering an issue while attempting to assign values to nodes on a plotly graph. Code: <html> <head> <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> <style> .graph-container { ...

Adapt the stylesheet for mobile devices using CSS

I am struggling with updating file paths in CSS depending on whether the end user is accessing my site from a PC or mobile device. Below is my CSS code, where I attempted to redirect users if they are on a handheld device: <link rel="stylesheet" type=" ...

"Effortlessly emptying the text field with material-ui in React

I need assistance with clearing the content of two text fields and a button using Material-UI in React-JS. I am new to React and unsure how to achieve this. Below is the code I currently have: import React from 'react'; import RaisedButton from ...

JsDoc presents the complete code instead of the commented block

I have a VUE.JS application that needs to be documented. For .VUE components, we are using Vuese. However, when it comes to regular JS files like modules, we decided to use JsDoc. I have installed JsDoc and everything seems fine, but when I generate the HT ...

Utilizing Vue.js and Webpack to Handle Requests for Multiple Incorrect Resource Links

After utilizing Vue.js single file components to construct a website and appreciating the modular approach, I've encountered an issue. The browser appears to be requesting multiple versions of resources instead of just one URL for each. HeaderBar.vue ...

Troubleshooting the installation error for 'react-router-dom

I encountered an issue during the installation of react-router-dom. D:\react\routeingreact>npm i react-router-dom npm ERR! Cannot read property 'match' of undefined npm ERR! A complete log of this run can be found in: npm ERR! ...

transferring information between two ajax calls upon completion of the first ajax request

Attempting to pass data to jvectormap from an ajax call, using a when function to ensure the code runs after the ajax call has finished loading. The issue I'm facing is that the map appears empty and I encounter an error. Uncaught ReferenceError: ...

I find myself a little mixed up with this syntax in JavaScript: `arr.indexOf(searchElement[, fromIndex])`

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison']; console.log(beasts.indexOf('bison')); // expected output: 1 // start from index 2 console.log(beasts.indexOf('bison', 2)); // ...

Contrasting actions observed when employing drag functionality with arrays of numbers versus arrays of objects

Being a newcomer to D3 and JavaScript, I'm hoping someone can help me clarify this simple point. I am creating a scatter graph with draggable points using code that closely resembles the solution provided in this Stack Overflow question. When I const ...

What is the reason behind 'continue' not functioning properly in an Angular forEach loop?

I have a particular issue with my Angular app. I am using an angular.forEach function and trying to skip some values by using the continue keyword, but for some reason it's not working as expected. <div ng-app="app"> <div ng-controller="te ...

Eliminate a descendant of a juvenile by using the identification of that specific juvenile

Here is the current structure I'm working with: https://i.sstatic.net/TejbU.png I want to figure out how to eliminate any field that has the id 3Q41X2tKUMUmiDjXL1BJon70l8n2 from all subjects. Is there a way to achieve this efficiently? admin.databa ...

Change the content inside a div depending on the value of a button

I am currently exploring how to change the content of a div based on button values, utilizing angular2+. Below is my implementation in HTML and js export class TestComponent implements OnInit { title:string = "provas"; constructor() { } popula ...

Only validate the nested object if the parent object is already present

In my scenario, I have a request body structured as follows: { "folder": { "value": "testFolder", "operator": "=" }, "name": { "value": "5456", "operator": "contains" } } While the presence of the request body is optional, I want to ensure that b ...

Tips for updating Angular HTML with data received from Socket.IO

I am currently working on a socket program that is listening and providing log data. The socket is sending the correct data as I can see it in the console. Below is a snippet of my code: export class RoboLogComponent implements OnInit { dataToShow:any @V ...

Encountering challenges when trying to incorporate error-handling functionality into Highcharts

I've been attempting to incorporate custom error handling in Highcharts by utilizing the Highcharts.error function within my Angular 7 application, but it's resulting in an error. Highcharts.error = function (code: string): void { }; Error T ...

How about placing a particle on the top layer of a mesh at a random location?

I am struggling to place a particle on the top side of a custom mesh using Three.js. Most tutorials I've come across only demonstrate adding particles to cubes or spheres, leaving me with no solution for my unique shape. How can I successfully positio ...

Transmitting JSON information to a Spring Controller

I am experiencing an issue while attempting to transmit JSON data from an Angular POST request to a Spring controller. The console shows a 404 error: POST http://localhost:8080/app/orderDetails/saveOrder/[object%20Object],[object%20Object] 404 (Not ...

Merge the properties of two class instances deeply

What is the best method for deep merging two instances of ES6 classes similar to lodash? The end result should be an instance of the same class with a deep merge of both instances' properties. ...

A nifty little JavaScript tool

Recently, I created a bookmarklet that opens a new window with a specified URL and passes variables to a PHP script using the GET method. However, I now require it to load the same PHP script and pass the same variables but within a div element this time. ...