Highcharts Javascript API

  1. Surface Pyramid Chart

    Originally described here: https://forum.highcharts.com/highcharts-usage/surface-pyramid-chart-t39503/

    What you have is just a Linear Pyramid: http://jsfiddle.net/cristiscu/sbt6bbfh/6/. Top segment's height is 15% of the full pyramid height.

    Surface Pyramid: http://jsfiddle.net/cristiscu/sbt6bbfh/7/. The only change was in the pyramidMode value. Top segment's area was made bigger, to show 15% of the whole pyramid surface.

    Reference:
    pyramidMode (Syncfusion ejChart): https://help.syncfusion.com/api/js/ejchart#members:commonseriesoptions-pyramidmode
    valueRepresents (amCharts): https://docs.amcharts.com/3/javascriptcharts/AmFunnelChart
    PyramidValueType (Microsoft ASP.NET Chart): https://msdn.microsoft.com/en-us/library/dd456634.aspx

    9 votes
    Vote
    Sign in
    (thinking…)
    Sign in with: Facebook Google
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    1 comment  ·  Flag idea as inappropriate…  ·  Admin →
  2. Add borderDashStyle to bar and column plotOptions

    In addition to the current capability of setting borderColor, borderWidth and borderRadius on bar and column plotOptions, it would be helpful to be able to configure a dashStyle for the border.

    In our use case, we're drawing a stacked bar chart, and we'd like to display the final stack series as a empty bar (white background) bordered by a red dashed line.

    9 votes
    Vote
    Sign in
    (thinking…)
    Sign in with: Facebook Google
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    7 comments  ·  Flag idea as inappropriate…  ·  Admin →
  3. Add 508 compliance

    Add support for section 508 .....

    8 votes
    Vote
    Sign in
    (thinking…)
    Sign in with: Facebook Google
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    8 comments  ·  Flag idea as inappropriate…  ·  Admin →
  4. Allow disable date input without hide

    Allow do disable date input of rangeSelector without hide one

    7 votes
    Vote
    Sign in
    (thinking…)
    Sign in with: Facebook Google
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    1 comment  ·  Flag idea as inappropriate…  ·  Admin →
  5. callback for 'noData'

    When there is no data to display, the message shows up on the chart. But there are things users might want to do in such a situation. For example, I have custom navigation buttons which lose meaning when there is no data. Some might even want to remove the context menu button. It would be great if there'd a callback where you could add/remove elements to/from the chart.

    7 votes
    Vote
    Sign in
    (thinking…)
    Sign in with: Facebook Google
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    2 comments  ·  Flag idea as inappropriate…  ·  Admin →
  6. useUTC as a configuration per chart

    I have an application that uses UTC in some graphs and non UTC time in other. It would be great to have is as a configuration.

    7 votes
    Vote
    Sign in
    (thinking…)
    Sign in with: Facebook Google
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    2 comments  ·  Flag idea as inappropriate…  ·  Admin →
  7. Support 3d line charts with multiple series

    At the moment there is no support for 3d line charts with multiple series. Something like this
    https://habrastorage.org/getpro/habr/post_images/c82/1f8/8fe/c821f88fe784e852dab621227f2d1c52.png

    7 votes
    Vote
    Sign in
    (thinking…)
    Sign in with: Facebook Google
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    2 comments  ·  Flag idea as inappropriate…  ·  Admin →
  8. Set <svg> shape rendering property

    http://www.w3.org/TR/SVG/painting.html#ShapeRenderingProperty

    Allow setting of shape-rendering attribute in order to enable speed optimising.

    Code modification example:

    SVGRenderer.prototype = {
    /**
    * Initialize the SVGRenderer
    * @param {Object} container
    * @param {Number} width
    * @param {Number} height
    */
    init: function(container, width, height) {
    var box = doc.createElementNS('http://www.w3.org/2000/svg', 'svg'),
    loc = location;
    attr(box, {
    width: width,
    height: height,
    'shape-rendering': 'crispEdges', //suggest to add this by config

    7 votes
    Vote
    Sign in
    (thinking…)
    Sign in with: Facebook Google
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    1 comment  ·  Flag idea as inappropriate…  ·  Admin →
  9. Using custom shapes like callout box for tooltips

    Please provide facility in Api to use shapes like callout box other than the default rectangle shape for tooltips.

    7 votes
    Vote
    Sign in
    (thinking…)
    Sign in with: Facebook Google
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    1 comment  ·  Flag idea as inappropriate…  ·  Admin →
  10. Rangeselector with numerical x-axis

    Rangeselector is great, but I have only seen it with dates on the x-axis. Is it also possible to have numerical values instead?

    I would expect it to be relatively straight-forward. If not, is there a reason for not supporting it?

    Thanks!

    6 votes
    Vote
    Sign in
    (thinking…)
    Sign in with: Facebook Google
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    1 comment  ·  Flag idea as inappropriate…  ·  Admin →
  11. Gantt + Boost

    Gantt chart is really cool but performance limits you to maybe 10-20 rows. We need to support over 1000, with interaction. Animation is not important. Currently the boost module doesn't work with gantt, but if it did it would be truly awesome.

    6 votes
    Vote
    Sign in
    (thinking…)
    Sign in with: Facebook Google
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    1 comment  ·  Flag idea as inappropriate…  ·  Admin →

    Thanks for writing! The Boost module deals with the data points, in this case it would rendering the rectangles for the tasks.

    I don’t think enabling Boost for Gantt would make a very big difference. Rendering 1000 rectangles in SVG should’t be a problem in the first place. I suspect the performance bottleneck is something else, like the grid axis or something.

    Can you share a demo of your problematic chart, where we can do some profiling?

  12. Avoiding series overlap

    Let's say I have a chart similar to http://jsfiddle.net/k7n8cf8m/
    There are two lines with almost same data.

    I've got a question if is there a possibility, to present those lines joined together, one above, second right below (without padding or anything, just 2 glued together lines). I mean it shouldn't overlap each other, but display like a rainbow instead.

    Something like that: http://jsfiddle.net/BlackLabel/3goqaqfj/
    But without changing data values.

    Is there a chance to introduce something like that in near future?

    6 votes
    Vote
    Sign in
    (thinking…)
    Sign in with: Facebook Google
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    1 comment  ·  Flag idea as inappropriate…  ·  Admin →

    This is a bit similar to the minPointLength option – https://api.highcharts.com/highcharts/series.column.minPointLength, which aims to ease readability when points overlap. It also has the same logical problem: If a small offset is added for multiple series or points after each other, eventually the points will be drawn off scale.

    Here’s a small plugin I wrote that offsets the series by an optional amount of pixels per the series index: http://jsfiddle.net/highcharts/vgdga7vw/1/. As you see, it doesn’t actually consider if any offset is necessary, plus when you have a lot of series it will be off scale.

  13. Ability to specify the minimum gap size in seconds

    Please, add the possibility of specifying the gapSize in seconds (eg gapTime). It will be very-very useful for timeline charts for Highstocks and Highcharts.

    6 votes
    Vote
    Sign in
    (thinking…)
    Sign in with: Facebook Google
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    2 comments  ·  Flag idea as inappropriate…  ·  Admin →
  14. dragging the dependencies on run-time by user like nodes can be dragged at run-time by user in interactive-gantt

    Steps to replicate –
    Click on the following URL -https://www.highcharts.com/gantt/demo/interactive-gantt
    Click on “Edit in JSFiddle”.
    Try dragging “prototype” or any other node.
    Unlike nodes which can be dragged by user at run-time, (dependencies) dependency arrows cannot be dragged by user at run-time.

    4 votes
    Vote
    Sign in
    (thinking…)
    Sign in with: Facebook Google
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    2 comments  ·  Flag idea as inappropriate…  ·  Admin →
  15. Accept chart settings and data and return a PNG of the chart

    Create a service similar to https://pdfcrowd.com/.

    Create an API endpoint that can convert settings into a file format (PNG) that is charged either per conversion or annually.

    The API would take our chart settings and chart data, plot the chart on your server side and return to the client a PNG (or other supported file types) of the chart we requested.

    4 votes
    Vote
    Sign in
    (thinking…)
    Sign in with: Facebook Google
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    1 comment  ·  Flag idea as inappropriate…  ·  Admin →
  16. 4 votes
    Vote
    Sign in
    (thinking…)
    Sign in with: Facebook Google
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    0 comments  ·  Flag idea as inappropriate…  ·  Admin →
  17. Auto-Calculated Bar Width

    It would be interesting to have the width of the bars adjusted automatically. Something similar like this: https://js.devexpress.com/Demos/WidgetsGallery/Demo/Charts/AutoCalculatedBarWidth/AngularJS/Light/

    4 votes
    Vote
    Sign in
    (thinking…)
    Sign in with: Facebook Google
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    0 comments  ·  Flag idea as inappropriate…  ·  Admin →
  18. redraw chart on mobile orientation change

    With Highchart version 3.0, the chart does not get rendered on mobile orientation change. I am not sure if this is available with Hightchart ?

    4 votes
    Vote
    Sign in
    (thinking…)
    Sign in with: Facebook Google
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    1 comment  ·  Flag idea as inappropriate…  ·  Admin →

    Highcharts doesn’t do anything internally on orientation change, except it reflows if the window.resize event fires.

    You can add your own listeners to orientation change though.

    What does the case look like? Is there a problem?

  19. StyledMode + dynamic series colour

    Styled mode is great but often with dynamically generated charts (i.e. when a user can customise a chart live) it would useful to be able to allow colours to be set on series. In our case we have a common look for all charts but also a colour picker.

    Has the option of being able to set series colour in the same way as you would with styled mode turned off been considered? There's an argument that setting the series colour is data not presentation and therefore should be permissible with styled mode is enabled.

    3 votes
    Vote
    Sign in
    (thinking…)
    Sign in with: Facebook Google
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    0 comments  ·  Flag idea as inappropriate…  ·  Admin →

    Yes I follow the argument – there are also series where the color is crucial, like heatmaps with a color axis.

    In styled mode the idea is that you set the colorIndex instead of a color on the series, so you should be able to set individual series colors by linking the result of the color picker to the colorIndex of the series.

  20. Link a PlotLine to a Series

    I cannot find a way to link a PlotLine (an average line, for example) to a specific series. I would like to be able to toggle the visibility of such a line with the visibility of a series. There's currently no way to do that easily, and I think that this would be a useful feature for a lot of scenarios.

    3 votes
    Vote
    Sign in
    (thinking…)
    Sign in with: Facebook Google
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    1 comment  ·  Flag idea as inappropriate…  ·  Admin →
  • Don't see your idea?

Highcharts Javascript API

Feedback and Knowledge Base