Highcharts JS

New and returning users may sign in

Sign in
prestine
(thinking…)
Password icon
Sign in with: Facebook Google
Forgot password?
Create a password
Signed in as (Sign out)
Close
Close
  • Sign in
  • Sign up

Highcharts Javascript API

Feedback

20 20 votes

Highcharts Javascript API

Categories

  • CATEGORIES
  • All ideas
  • My feedback

JUMP TO ANOTHER FORUM

(thinking…)

  • Searching…

    No results.

    Clear search results
    • Highcharts .NET 7 ideas
    • Highcharts Cloud 19 ideas
    • Highcharts Editor 3 ideas
    • Highcharts Javascript API 1,092 ideas

  • Highcharts JS

I suggest you ...

You've used all your votes and won't be able to post a new idea, but you can still search and comment on existing ideas.

There are two ways to get more votes:

  • When an admin closes an idea you've voted on, you'll get your votes back from that idea.
  • You can remove your votes from an open idea you support.
  • To see ideas you have already voted on, select the "My feedback" filter and select "My open ideas".
(thinking…)

Enter your idea and we'll search to see if someone has already suggested it.

If a similar idea already exists, you can support and comment on it.

If it doesn't exist, you can post your idea so others can support it.

Enter your idea and we'll search to see if someone has already suggested it.

votes
Sign in
prestine
(thinking…)
Password icon
Sign in with: Facebook Google
Forgot password?
Create a password
Signed in as (Sign out)
Close
Close
Cancel Submitting...
  • or
  • Hot ideas
  • Top ideas
  • New ideas
  • My feedback

  1. Add more compatible fonts for exporting SVGs

    At least Impact, Arial Black and Georgia seem to be missing.

    1 vote
    Vote
    Sign in
    prestine
    (thinking…)
    Password icon
    Sign in with: Facebook Google
    Forgot password?
    Create a password
    Signed in as (Sign out)
    Close
    Close
    You have left! (?) (thinking…)
    0 comments  ·  Flag idea as inappropriate…  ·  Edit…  ·  Delete…  ·  Admin →

  2. Make plotLines work without explicit width or color

    Most things in HighCharts have smart defaults, so unset options will do something reasonable. But plotLines is not this way: if the user does not explicitly specify a width and color, no line will be drawn (and sometimes a JS error will happen).

    Example which works but includes comments on how to easily break it: http://jsfiddle.net/LKayp/

    I think plotLines (and addPlotLines) should default to a reasonable width and color, just as regular series lines do.

    1 vote
    Vote
    Sign in
    prestine
    (thinking…)
    Password icon
    Sign in with: Facebook Google
    Forgot password?
    Create a password
    Signed in as (Sign out)
    Close
    Close
    You have left! (?) (thinking…)
    0 comments  ·  Flag idea as inappropriate…  ·  Delete…  ·  Admin →
    under review  ·  AdminTorstein Hønsi (CPO, Founder, Highcharts JS) responded

    Thank you for the request.

  3. Property for donut chart to show the aggregated total exactly at the center of donut

    Provide a property for donut chart to show the aggregated total exactly at the center of donut

    var colors = Highcharts.getOptions().colors,

    categories = [

        "Chrome",

        "Firefox",

        "Internet Explorer",

        "Safari",

        "Edge",

        "Opera",

        "Other"

    ],

    data = [

        {

            "y": 62.74,

            "color": colors[2],

            "drilldown": {

                "name": "Chrome",

                "categories": [

                    "Chrome v65.0",

                    "Chrome v64.0",

                    "Chrome v63.0",

                    "Chrome v62.0",

                    "Chrome v61.0",

                    "Chrome v60.0",

                    "Chrome v59.0",

                    "Chrome v58.0",

                    "Chrome v57.0",

                    "Chrome v56.0",

                    "Chrome v55.0",

                    "Chrome v54.0",

                    "Chrome v51.0",

                    "Chrome v49.0",

                    "Chrome v48.0",

                    "Chrome v47.0",

                    "Chrome v43.0",

                    "Chrome v29.0"

                ],

                "data": [

                    0.1,

                    1.3,

                    53.02,

                    1.4,

                    0.88,

                    0.56,

                    0.45,

                    0.49,

                    0.32,

                    0.29,

                    0.79,

                    0.18,

                    0.13,

                    2.16,

                    0.13,

                    0.11,

                    0.17,

                    0.26

                ]

            }

        },

        {

            "y": 10.57,

            "color": colors[1],

            "drilldown": {

                "name": "Firefox",

                "categories": [

                    "Firefox v58.0",

                    "Firefox v57.0",

                    "Firefox v56.0",

                    "Firefox v55.0",

                    "Firefox v54.0",

                    "Firefox v52.0",

                    "Firefox v51.0",

                    "Firefox v50.0",

                    "Firefox v48.0",

                    "Firefox v47.0"

                ],

                "data": [

                    1.02,

                    7.36,

                    0.35,

                    0.11,

                    0.1,

                    0.95,

                    0.15,

                    0.1,

                    0.31,

                    0.12

                ]

            }

        },

        {

            "y": 7.23,

            "color": colors[0],

            "drilldown": {

                "name": "Internet Explorer",

                "categories": [

                    "Internet Explorer v11.0",

                    "Internet Explorer v10.0",

                    "Internet Explorer v9.0",

                    "Internet Explorer v8.0"

                ],

                "data": [

                    6.2,

                    0.29,

                    0.27,

                    0.47

                ]

            }

        },

        {

            "y": 5.58,

            "color": colors[3],

            "drilldown": {

                "name": "Safari",

                "categories": [

                    "Safari v11.0",

                    "Safari v10.1",

                    "Safari v10.0",

                    "Safari v9.1",

                    "Safari v9.0",

                    "Safari v5.1"

                ],

                "data": [

                    3.39,

                    0.96,

                    0.36,

                    0.54,

                    0.13,

                    0.2

                ]

            }

        },

        {

            "y": 4.02,

            "color": colors[5],

            "drilldown": {

                "name": "Edge",

                "categories": [

                    "Edge v16",

                    "Edge v15",

                    "Edge v14",

                    "Edge v13"

                ],

                "data": [

                    2.6,

                    0.92,

                    0.4,

                    0.1

                ]

            }

        },

        {

            "y": 1.92,

            "color": colors[4],

            "drilldown": {

                "name": "Opera",

                "categories": [

                    "Opera v50.0",

                    "Opera v49.0",

                    "Opera v12.1"

                ],

                "data": [

                    0.96,

                    0.82,

                    0.14

                ]

            }

        },

        {

            "y": 7.62,

            "color": colors[6],

            "drilldown": {

                "name": 'Other',

                "categories": [

                    'Other'

                ],

                "data": [

                    7.62

                ]

            }

        }

    ],

    browserData = [],

    versionsData = [],

    i,

    j,

    dataLen = data.length,

    drillDataLen,

    brightness;

    // Build the data arrays
    for (i = 0; i < dataLen; i += 1) {

    // add browser data

    browserData.push({

        name: categories[i],

        y: data[i].y,

        color: data[i].color

    });
    


    // add version data

    drillDataLen = data[i].drilldown.data.length;

    for (j = 0; j &lt; drillDataLen; j += 1) {

        brightness = 0.2 - (j / drillDataLen) / 5;

        versionsData.push({

            name: data[i].drilldown.categories[j],

            y: data[i].drilldown.data[j],

            color: Highcharts.Color(data[i].color).brighten(brightness).get()

        });

    }

    }

    // Create the chart
    Highcharts.chart('container', {

    chart: {

        type: &#39;pie&#39;

    },

    title: {

        text: &#39;Browser market share,&lt;br&gt; January, 2018&#39;,

        align: &#39;center&#39;,

        verticalAlign: &#39;middle&#39;,        

        y: 30

    },

    subtitle: {

        text: &#39;Source: &lt;a href=&quot;<a rel="nofollow noreferrer" href="http://statcounter.com&quot">http://statcounter.com&quot</a>; target=&quot;_blank&quot;&gt;statcounter.com&lt;/a&gt;&#39;

    },

    yAxis: {

        title: {

            text: &#39;Total percent market share&#39;

        }

    },

    plotOptions: {

        pie: {

            shadow: false,

            center: [&#39;50%&#39;, &#39;50%&#39;]

        }

    },

    tooltip: {

        valueSuffix: &#39;%&#39;

    },

    series: [{
    


        size: &#39;0%&#39;
    


    }, {

        name: &#39;Versions&#39;,

        data: versionsData,

        size: &#39;100%&#39;,

        innerSize: &#39;70%&#39;,

        dataLabels: {

            formatter: function () {

                // display only if larger than 1

                return this.y &gt; 1 ? &#39;&lt;b&gt;&#39; + this.point.name + &#39;:&lt;/b&gt; &#39; +

                    this.y + &#39;%&#39; : null;

            }

        },

        id: &#39;versions&#39;

    }],

    responsive: {

        rules: [{

            condition: {

                maxWidth: 400

            },

            chartOptions: {

                series: [{

                    id: &#39;versions&#39;,

                    dataLabels: {

                        enabled: false

                    }

                }]

            }

        }]

    }

    });

    Provide a property for donut chart to show the aggregated total exactly at the center of donut

    var colors = Highcharts.getOptions().colors,

    categories = [

        &quot;Chrome&quot;,

        &quot;Firefox&quot;,

        &quot;Internet Explorer&quot;,

        &quot;Safari&quot;,

        &quot;Edge&quot;,

        &quot;Opera&quot;,

        &quot;Other&quot;

    ],

    data = [

        {

            &quot;y&quot;: 62.74,

            &quot;color&quot;: colors[2],

            &quot;drilldown&quot;: {

                &quot;name&quot;: &quot;Chrome&quot;,

                &quot;categories&quot;: [

                    &quot;Chrome v65.0&quot;,

                    &quot;Chrome v64.0&quot;,

                    &quot;Chrome v63.0&quot;,

                    &quot;Chrome v62.0&quot;,

                    &quot;Chrome v61.0&quot;,

                    &quot;Chrome v60.0&quot;,

                    &quot;Chrome v59.0&quot;,

                    &quot;Chrome v58.0&quot;,

                    &quot;Chrome v57.0&quot;,

                    &quot;Chrome v56.0&quot;,

                    &quot;Chrome v55.0&quot;,

                    &quot;Chrome v54.0&quot;,

                    &quot;Chrome v51.0&quot;,

                    &quot;Chrome v49.0&quot;,

                    &quot;Chrome v48.0&quot;,

                    &quot;Chrome v47.0&quot;,

                    &quot;Chrome v43.0&quot;,

                    &quot;Chrome v29.0&quot;

                ],

                &quot;data&quot;: [

                    0.1,

                    1.3,

                    53.02,

                    1.4,

                    0.88,

                    0.56,

                    0.45,

                    0.49,

                    0.32,

                    0.29,

                    0.79,

                    0.18,

                    0.13,

                    2.16,
    …
    1 vote
    Vote
    Sign in
    prestine
    (thinking…)
    Password icon
    Sign in with: Facebook Google
    Forgot password?
    Create a password
    Signed in as (Sign out)
    Close
    Close
    You have left! (?) (thinking…)
    3 comments  ·  Flag idea as inappropriate…  ·  Delete…  ·  Admin →
    under review  ·  AdminTorstein Hønsi (CPO, Founder, Highcharts JS) responded

    You can add this to the title dynamically: http://jsfiddle.net/highcharts/h24v71vs/

  4. Events for annotation and indicator changed

    For a StockChart every time the user adds, removes or modifies an annotation or an indicator, either over the annotation-/indicator-popup or by dragging an annotation-control-point directly, an event on the chart instance should be fired, so that you can e.g. automatically save the chart-state every time something has changed.

    Maybe something like:
    Highcharts.Chart#events:annotationChanged
    Highcharts.Chart#events:indicatorChanged

    1 vote
    Vote
    Sign in
    prestine
    (thinking…)
    Password icon
    Sign in with: Facebook Google
    Forgot password?
    Create a password
    Signed in as (Sign out)
    Close
    Close
    You have left! (?) (thinking…)
    0 comments  ·  Flag idea as inappropriate…  ·  Delete…  ·  Admin →
    AdminKacper Madej (Customer Support Agent, Highcharts JS) responded

    Hi,

    Thank you for submitting the idea.

    Basic events are already here: on chart level we have addSeries (https://api.highcharts.com/highcharts/chart.events.addSeries) and series remove – implemented, but not a part of documented API (demo: http://jsfiddle.net/BlackLabel/0cosmk2g/) or similar series destroy (the same situation).

    For series update you could use series render event (not a part of documented API).

    Events for annotation update are not yet implemented.

    How to resolve:
    Generally, this could be implemented through extending Highcharts. Related functions that create, update and destroy annotations could be wrapped to fire additional events. I’ll try to provide a POC later this week.

  5. highchart solid gauge show a default tooltip or series

    many people don't have the idea to move the mouse over the apple watch solid gauge at the first impression, is there anyway to show one tooltip to pretend it's selected by default? or show series around the circle ?

    1 vote
    Vote
    Sign in
    prestine
    (thinking…)
    Password icon
    Sign in with: Facebook Google
    Forgot password?
    Create a password
    Signed in as (Sign out)
    Close
    Close
    You have left! (?) (thinking…)
    0 comments  ·  Flag idea as inappropriate…  ·  Delete…  ·  Admin →
    AdminTorstein Hønsi (CPO, Founder, Highcharts JS) responded

    You can show the tooltip programmatically: http://jsfiddle.net/highcharts/9ydqmou9/

  6. VennDiagram

    I need no default datalabel for venndiagram. Kindly reply with solution as early as possible.

    1 vote
    Vote
    Sign in
    prestine
    (thinking…)
    Password icon
    Sign in with: Facebook Google
    Forgot password?
    Create a password
    Signed in as (Sign out)
    Close
    Close
    You have left! (?) (thinking…)
    1 comment  ·  Flag idea as inappropriate…  ·  Delete…  ·  Admin →

  7. Request for Mexico Cities HighCharts

    https://www.highcharts.com/maps/demo/map-drilldown
    i want like this highcharts for mexico. i have done to implement the mexico states but find no data for mexico cities. can anyone provide js file for mexico cities details.

    thanx.

    1 vote
    Vote
    Sign in
    prestine
    (thinking…)
    Password icon
    Sign in with: Facebook Google
    Forgot password?
    Create a password
    Signed in as (Sign out)
    Close
    Close
    You have left! (?) (thinking…)
    0 comments  ·  Flag idea as inappropriate…  ·  Edit…  ·  Delete…  ·  Admin →

  8. Have a movable marker in line series which will stay on position even if the data is loading dynamically.

    A marker like a tooltip but which will stay all the time and can be moved around on a line series chart. This marker should not disappear even if the line series data is updated.

    1 vote
    Vote
    Sign in
    prestine
    (thinking…)
    Password icon
    Sign in with: Facebook Google
    Forgot password?
    Create a password
    Signed in as (Sign out)
    Close
    Close
    You have left! (?) (thinking…)
    1 comment  ·  Flag idea as inappropriate…  ·  Delete…  ·  Admin →

  9. speed calculation in time graph

    It would be very useful to calculate the speed of change in the y axis at every point in the time series. Something like this:
    chart.series[0].points[0].y.speed(year)

    speed(Year) would calculate the rate of change per year, or month or day of the Yaxis variable,

    you could also implement acceleration
    chart.series[0].points[0].y.acceleration(year)

    1 vote
    Vote
    Sign in
    prestine
    (thinking…)
    Password icon
    Sign in with: Facebook Google
    Forgot password?
    Create a password
    Signed in as (Sign out)
    Close
    Close
    You have left! (?) (thinking…)
    0 comments  ·  Flag idea as inappropriate…  ·  Edit…  ·  Delete…  ·  Admin →

  10. xAxis tick labels overlapping handling

    Hi,
    Now we have automatic xAxis labels rotation or overlapping handling.
    But

    1.When I generate xAxis labels by myself with tickPositions - then auto-positioning(overlap handling) is not working. Can you make labels autopositioning work for custom tickPositions please?


    1. One more approach - if custom labels overlap - then show '...'(or some other filler) but show full labels on zoom In.

    1 vote
    Vote
    Sign in
    prestine
    (thinking…)
    Password icon
    Sign in with: Facebook Google
    Forgot password?
    Create a password
    Signed in as (Sign out)
    Close
    Close
    You have left! (?) (thinking…)
    0 comments  ·  Flag idea as inappropriate…  ·  Edit…  ·  Delete…  ·  Admin →

  11. add support for auto "step" calculation for xAxis labels based on the container width.

    https://stackoverflow.com/questions/44934154/xaxis-auto-label-dropping-has-stopped-working-after-upgrading-to-highcharts-5-0

    1 vote
    Vote
    Sign in
    prestine
    (thinking…)
    Password icon
    Sign in with: Facebook Google
    Forgot password?
    Create a password
    Signed in as (Sign out)
    Close
    Close
    You have left! (?) (thinking…)
    0 comments  ·  Flag idea as inappropriate…  ·  Edit…  ·  Delete…  ·  Admin →

  12. highstock Measure min-max performance

    Hallo team, in highstock you have "measure" feature that give me MIN,MAX,AVERAGE,BINS.
    Would me more interesting for stock chart to have % difference from min to max or max to min if i measure downward.
    is very simple calculation, could you maybe evauate this?

    i ask to have:
    MIN
    MAX
    AVG
    BINS
    %+ (or %-)

    vould be also great if measurement feature will have magnet that can be anchor to min/max.

    Is not possible to load here one picture, but i hope you understood well. I also opened ticket with picture: #2116 Measure GUI

    1 vote
    Vote
    Sign in
    prestine
    (thinking…)
    Password icon
    Sign in with: Facebook Google
    Forgot password?
    Create a password
    Signed in as (Sign out)
    Close
    Close
    You have left! (?) (thinking…)
    3 comments  ·  Flag idea as inappropriate…  ·  Delete…  ·  Admin →

  13. navigator axis position in xAxis array should always be at the end position or removed

    Currently the navigator is positioned at number 2 point in the axis array if new axis are dynamically added otherwise it is the last element. This makes indexing int the axis array unnecessarily complicated and confusing. I want that the navigator array either be taken out of the xAxis array and have its own array or at least have a consistent position

    1 vote
    Vote
    Sign in
    prestine
    (thinking…)
    Password icon
    Sign in with: Facebook Google
    Forgot password?
    Create a password
    Signed in as (Sign out)
    Close
    Close
    You have left! (?) (thinking…)
    0 comments  ·  Flag idea as inappropriate…  ·  Delete…  ·  Admin →
    under review  ·  AdminTorstein Hønsi (CPO, Founder, Highcharts JS) responded

    Use the xAxis.options.className to filter out the navigator axis.

  14. Is there any highchart with c # code?

    Is there any highchart with c # code?

    1 vote
    Vote
    Sign in
    prestine
    (thinking…)
    Password icon
    Sign in with: Facebook Google
    Forgot password?
    Create a password
    Signed in as (Sign out)
    Close
    Close
    You have left! (?) (thinking…)
    0 comments  ·  Flag idea as inappropriate…  ·  Edit…  ·  Delete…  ·  Admin →

  15. Horizontal Stripes algorithm in Treemap

    It would have been great if we had the option to have horizontal, in addition to the vertical, stripes so that examples like this https://jsfiddle.net/dimitrisv/yb2u713m/11/ can make more meaningful use of the available space.

    1 vote
    Vote
    Sign in
    prestine
    (thinking…)
    Password icon
    Sign in with: Facebook Google
    Forgot password?
    Create a password
    Signed in as (Sign out)
    Close
    Close
    You have left! (?) (thinking…)
    0 comments  ·  Flag idea as inappropriate…  ·  Edit…  ·  Delete…  ·  Admin →

  16. Waterfall Chart with Pre-Aggregated Interim / Final Balance

    Currently the Waterfall Chart can create Interim Balances, but those are calculated as part of the chart.
    In case the actual data set already provides those interim balances and Final Balances, those can not be leveraged because as soon as the Interim / Final Balance flag is set, the actual data value is being ignored.
    There should be an option to decide if an existing entry from the data set should be visually represented as Interim / Final Balance.

    1 vote
    Vote
    Sign in
    prestine
    (thinking…)
    Password icon
    Sign in with: Facebook Google
    Forgot password?
    Create a password
    Signed in as (Sign out)
    Close
    Close
    You have left! (?) (thinking…)
    0 comments  ·  Flag idea as inappropriate…  ·  Edit…  ·  Delete…  ·  Admin →

  17. Add a more detailed map for China.

    I would like to request a more detailed map for China. Current map is at provincial level, which is fine for general purposes. But for some finer analyses, a city level resolution is very much desirable.

    1 vote
    Vote
    Sign in
    prestine
    (thinking…)
    Password icon
    Sign in with: Facebook Google
    Forgot password?
    Create a password
    Signed in as (Sign out)
    Close
    Close
    You have left! (?) (thinking…)
    3 comments  ·  Flag idea as inappropriate…  ·  Delete…  ·  Admin →

  18. cursor:'pointer' on every point

    Let specify the cursor:'pointer' on every point, not only on entire series or in the plotOptions object, thanks.

    0 votes
    Vote
    Sign in
    prestine
    (thinking…)
    Password icon
    Sign in with: Facebook Google
    Forgot password?
    Create a password
    Signed in as (Sign out)
    Close
    Close
    You have left! (?) (thinking…)
    0 comments  ·  Flag idea as inappropriate…  ·  Delete…  ·  Admin →
    AdminTorstein Hønsi (CPO, Founder, Highcharts JS) responded

    Thanks for the idea!

  19. highmaps: add examples

    better to use geojson/topojson as an open standard format for encoding collections of simple geographical features

    0 votes
    Vote
    Sign in
    prestine
    (thinking…)
    Password icon
    Sign in with: Facebook Google
    Forgot password?
    Create a password
    Signed in as (Sign out)
    Close
    Close
    You have left! (?) (thinking…)
    2 comments  ·  Flag idea as inappropriate…  ·  Delete…  ·  Admin →
    AdminTorstein Hønsi (CPO, Founder, Highcharts JS) responded

    Implemented natively in Highmaps Beta. See http://api.highcharts.com/highmaps#Highcharts.geojson.

  20. More formats supported by Highmaps or simple converter/plugins.

    Be able to easily get data from PostGIS, import a KML, or a simple MultiLineString.

    0 votes
    Vote
    Sign in
    prestine
    (thinking…)
    Password icon
    Sign in with: Facebook Google
    Forgot password?
    Create a password
    Signed in as (Sign out)
    Close
    Close
    You have left! (?) (thinking…)
    0 comments  ·  Flag idea as inappropriate…  ·  Delete…  ·  Admin →
    under review  ·  AdminTorstein Hønsi (CPO, Founder, Highcharts JS) responded

    Thanks for the feature request.

← Previous 1 2 … 51 52 53 54 55 Next →
  • Don't see your idea?
Highcharts JS
Highcharts JS Terms of Service Powered By UserVoice

Your password has been reset

We have made changes to increase our security and have reset your password.

We've just sent you an email to . Click the link to create a password, then come back here and sign in.