How to Programming with Highcharts

Not a perfect solution, but should be good starting point: (function(H) { H.wrap(H.seriesTypes.columnrange.prototype, 'drawPoints', function(p) { var s = this, chart = s.chart, xAxis = s.xAxis, yAxis = s.yAxis, path, x, y, r = chart.renderer, radius = s.barW / 2; p.call(this); H.each(this.points, function(p) { if(p.options.avg) { y = yAxis.toPixels(p.options.avg *...

Highchart Treemap: forcing layout on 3 lines

javascript,highcharts,datatable

That's not really how treemaps are intended to work. I would try a heatmap instead. Example: http://jsfiddle.net/jlbriggs/vk6sfdLs/ ...

highcharts datatable - function parameters

Call drawTable function in load function, instead of reference. load: function(){ Highcharts.drawTable(this, 310, 100, 0, '', 20, 20, 2.5) } Example: http://jsfiddle.net/z9zXM/1035/...

Format data to be used in Highcharts series

javascript,json,angularjs,highcharts

interesting question, I normally use either angular.forEach or a library called underscore to handle data processing in angularJS. Here is the forEach version. data = $http.get(); // suppose you have the data result = []; angular.forEach(data.models, function(item) { // simple way is to take item as the original form result.push(item);...

Highcharts Gauge chart is rounding down max number

javascript,math,highcharts

Add endOnTick:false (http://api.highcharts.com/highcharts#yAxis.endOnTick) to your axis. For example yAxis: { min: 0, max: 666772, title: { text: 'Quarter 1' }, endOnTick:false } Here's the working sample http://plnkr.co/edit/Vbn1lpMIv8qvSfs65jL4...

x Axis Labels are cut off from Highcharts Column Chart

The "make the div height of the chart an absurd size" is why the truncated view was added. If you hover over the xAxis labels the full text is shown. If you want to increase the available size for the xAxis labels you can. Another recommendation would be to use...

Highcharts custom export hidding on Reset

javascript,highcharts,boxplot

That line is the culprit: Highcharts.getOptions().exporting.buttons.contextButton.menuItems.splice(2) splice modifies array. So after first call, menuItems isn't the same. So use slice() instead: Highcharts.getOptions().exporting.buttons.contextButton.menuItems.slice(2) ...

Highcharts Boxplots How to get five point summary?

Although you have a solution for doing it server side, I took a few minutes to convert my PHP solution to a Javascript solution, to address the initial question. step 1) function to calculate percentiles: //get any percentile from an array function getPercentile(data, percentile) { data.sort(numSort); var index = (percentile/100)...

How to Hide rest of the region when user clicks pie chart?

javascript,jquery,html,css,highcharts

You can use plotOptions.series.point.events.click function to tell the chart exactly what to do after the click of a slice: series: { point: { events: { click: function () { var index = this.x; $('.highcharts-series-group g path').toggle(); $('.highcharts-series-group g path:nth-child(' + (index+1) + ')').toggle(); $('.highcharts-data-labels path').toggle(); $('.highcharts-data-labels path:nth-child(' + (index+1) +...

Easier way to draw a bar chart using highcharts?

jquery,highcharts,highstock

Yes, there is one thing which is redundant in your case - it's about filling up zeros. Instead provide index category and change data format a bit. For example: name: 'S2', data: [0, 5, 0] Can be changed into: name: 'S2', data: [ [1, 5] ] And number 5 will...

How to add custom message in Highchart's printed image?

I see two options, both are based on load event. One is to check chart.options.chart.forExport flag. When flag is set to true, then add extra elements on the chart using chart.renderer. See demo and more info about the Renderer. Second option, is to do the same, but in exporting.chartOptions.chart.events.load callback....

Format categories (x-axis) for highcharts

javascript,jquery,angularjs,highcharts

To do this on your xAxis use the labels.formatter function: labels: { formatter: function() { return Highcharts.dateFormat('%H:%M:%S', parseInt(this.value, 10)); } } You can use this same formatting in your tooltip as well using tooltip.formatter....

Changing highcharts options with buttons

javascript,charts,highcharts

Since this is a broad question and there are multiple API calls I will just point you to the series options changes you can do via series\[N\].update(). It depends on what you are trying to update. Your issue with the marker on the line not showing is a syntax error:...

Show only some series in HighCharts spline chart

I would just manipulate the JSON data before injecting it into Highcharts. Assuming your JSON API returns the array of series data... // var series = getSeriesDataViaAjax(); var showTheseIndexes = [0,2,4]; for (var i = 0; i < series.length; i++) { if (showTheseIndexes.indexOf(i) === -1) { series[i].visible = false; }...

Legend same colour as bullet

You can use the legend labelFormatter function to accomplish this. legend: { labelFormatter: function () { return '<span style="color:'+this.color+';">'+this.name+'</span>'; } } Reference: http://api.highcharts.com/highcharts#legend.labelFormatter Example: http://jsfiddle.net/jlbriggs/mcffqo1x/ ...

How can I combine highcharts with different but similar x-axis categories?

javascript,jquery,highcharts,highstock

I don't think there is an easy way to do it. Or rather easier than: making unique array of categories manually filling up array with 0 values, when category is missing For example: // union without diplicates: // taken from: // http://stackoverflow.com/questions/1584370/how-to-merge-two-arrays-in-javascript-and-de-duplicate-items Array.prototype.unique = function() { var a = this.concat();...

how can i add popup to flags in highchart?

Just add click events to your flag series, for example: point: { events: { click: function() { alert("clicked!"); } } } And example here. Just click on any "B" flag....

How do I catch a click event on a polygon in HighCharts without having the tooltip popping up

events,highcharts,polygon

Polygon series can be accessed via event.currentTarget. Example: http://jsfiddle.net/ow72qjaw/ Tooltip can be disabled by setting: tooltip: { enabled: false } Hover effects can be disabled for series by using proper settings: states: { hover: { enabled: false } } If you want to disable tooltip for selected series only you...

Highcharts Density Dot Map Support?

highcharts,data-visualization

mappoint series doesn't work with colorAxis, but well, it's Highcharts so it's possible to extend default functionalities: (function (H) { // add colorAxis H.seriesTypes.mappoint.prototype.axisTypes = ['xAxis', 'yAxis', 'colorAxis']; // draw points and add setting colors H.wrap(H.seriesTypes.mappoint.prototype, "translate", function (p) { p.call(this); H.seriesTypes.mappoint.prototype.translateColors.call(this); }); // copy method from heatmap for color...

Prevent y-zoom for specific series/y-axis on highcharts

It's not a part of the API, but you can use yAxis.zoomEnabled option: http://jsfiddle.net/0zczvLr9/ - just set for these axes which you don't want to enable zooming.

The data is not completely displayed in the stack bar Highcharts

variables,highcharts,threshold,adaptive-threshold

Check this fiddle: http://jsfiddle.net/vwmcuvwd/1/ Combination of these 3 properties can help you: crop: false, overflow: 'none', allowOverlap: 'true' ...

Highcharts variable threshold

You can try to mix line serie and areasplinerange, then set proper colors. series: [{ type: 'spline', data: [3, 2, 3, 5, 4, 10, 12] }, { fillColor: 'green', marker: { enabled: true }, data: [ [3, 3], [2, 5], [3, 3] ] }, { fillColor: 'red', marker: { enabled:...

Change color of different points in same series Highcharts

javascript,jquery,angularjs,charts,highcharts

All you need to do is to replace array form of your data to object. This case you can set your color explicitly for (x = 0; x < 5; x++) { var item = $scope.jsondata[x]; newdata.push({name:setName(item.name), y:item.data, color: getColor(item.data)}); } Here's my update to your plunker http://plnkr.co/edit/UaW6RqM4PsGoy5IdpXDR...

limit Highcharts x-Axis grouped categories and labels style

css,highcharts

Are m and l params constant? Or can you change them? If yes, then see: http://jsfiddle.net/TFhd7/373/ In short: Categories reserves a place from -0.5 to 0.5 with category index. For example Year7 -> 4 means x-values from 3.5 to 4.5. So according to this information let's change that values: var...

Highchart - Changing label text of the yaxis programatically

javascript,jquery,highcharts,highmaps

Have a look at axis.update(). This will let you modify just about anything about an axis. To get which axis to update you can specify by the index (the order in which you added he axis starting at 0).

Highcharts error loading maps plugin

Use following libraries in the following order <script type='text/javascript' src='https://code.jquery.com/jquery-1.11.2.min.js'></script> <script src="http://code.highcharts.com/highcharts.js"></script> <script type='text/javascript' src='https://code.highcharts.com/maps/1.1.6/modules/map.js'></script> ...

Removing and re-adding series while keeping the same markers

You need to store symbol property. For example: options.marker.symbol = this.symbol; Demo: http://jsfiddle.net/ax3o8uf3/22/...

Legend title position in

highcharts,legend

Wouldn't be easier to control that title using $(".highcharts-legend-title text") ? Then set new transform attribute. But be careful with IE8 - it's using VML, not SVG. Or in a Highcharts way: var title = chart.legend.title; title.translate(x, y); // translate legend's title Demo: http://jsfiddle.net/rum1rcum/...

Adding call outs to a Highcharts - Stacked Bar

css,highcharts

Live demo: http://jsfiddle.net/5joufkwa/9/ Solution is to use series.dataLabels and generate there callouts: plotOptions: { series: { stacking: 'normal', dataLabels: { align: "right", // right align for label enabled: true, useHTML: true, allowOverlap: true, overflow: "none", crop: false, y: -50, x: 145, formatter: function () { return '<div class="callout top" data-name="Jane">I...

How to display no data found in highcharts

You can use no-data module which allows do that. Ref: http://code.highcharts.com/modules/no-data-to-display.js Example: http://jsfiddle.net/6o8o03fe/1/...

rCharts HighCharts X-axs grouping

javascript,jquery,r,highcharts,rcharts

This forum seems not really many active users. : ) I managed to solve my own problem after did some further study on the behavior of the rcharts and highcharts for both method above. Here is the approach for the benefits of everyone who interested to do the same thing....

Angular Highcharts 10 $digest() iterations reached when object is replaced

angularjs,highcharts

It's the filter in the markup that is causing your $digest() errors.You can work around it by e.g. filtering the data in your controller. So you could have the following template. <select data-ng-model="gender" ng-change="genderChanged()" class="form-control"> <option value=""> - Select all -</option> <option value="m">Male</option> <option value="f">Female</option> </select> <salary-chart data="filtered"></salary-chart> And in...

Show more data on Gauge chart with Highcharts

javascript,ios,swift,highcharts,uiwebview

You are trying to use features of two Highcharts type of charts - solidgauge and gauge. It is possible to place both of them in one chart and set same (or almost the same) values for both series. Example: http://jsfiddle.net/2L1bmhb5/ $(function () { $('#container').highcharts({ chart: { plotBackgroundColor: null, plotBackgroundImage: null,...

Trying to inject datapoints into iOS webView using highcharts

UIWebView has a method called stringByEvaluatingJavaScriptFromString that you can use to run a script. I think that you can also use it to just pass and initialize any variable that you like.

Library duplication issue using Highcharts in Jaspersoft Studio

javascript,highcharts,requirejs

Finally, I have solved the problem by merging all Highcharts files I needed to draw my Bubble map chart, as suggested by @PawełFus, and enclosed the code with a condition on Highcharts variable : if (typeof Highcharts == 'undefined') { /* Optimized merge files containing both highstock.js, highcharts-more.js and map.js...

Highcharts GANTT Chart Tooltip Mouse-over Tracking Issue

It should be already fixed on the master branch: http://jsfiddle.net/2xkfm87e/14/ And fix will be included in the next release. URL to the branch's CDN: <script src="http://github.highcharts.com/highstock.js"></script> ...

Highcharts context menu hidden behind series

javascript,css,charts,highcharts,typescript

I see two solutions for your case: display button in front of the series: http://jsfiddle.net/uy05zby3/7/ events: { load: function() { if(!this.options.chart.forExport) { this.exportSVGElements[0].toFront(); } } } make space for the button: http://jsfiddle.net/uy05zby3/5/ "chart": { "type": "bar", "zoomType": "x", "marginTop": 30 // make more space on top edge }, ...

Center of chart(pieChart)

Pie center can be calculated using pie series center array (x and y coordinates), plotLeft and plotTop. Using renderer.text it is possible to add text. In redraw event additionally rendered text should be adjusted to stay in the center of pie. Example: http://jsfiddle.net/1917s4pL/ $(function () { var chart = new...

Unable to set xAxis min for Highstock (Highcharts)

javascript,highcharts,highstock

Three things to mention: rangeSelector.selected option prevents min, remove that one xAxis.min is not enough, add also xAxis.max to see the change it won't work until you will set xAxis.ordinal to false. Ordinal option displays points equally on the available space, so there is no place for "empty space" And...

Highcharts multiple charts, each with live data

javascript,jquery,highcharts,live

In Highcharts-land, each chart needs to be its own object. It's certainly possible to have multiple charts on the same page, but you'd have to make sure that: Each chart is instantiated separately (in this case, if you're just copying/pasting the $(document).ready part, you're probably stepping on your chart variable....

EmberJS Component With Graph

javascript,jquery,ember.js,highcharts

Just go ahead and initialize the graph when you load the component: component.js import Ember from "ember"; export default Ember.Component.extend({ confirmed: false, actions: { confirm: function() { var component = this; component.set("confirmed", true); } }, initializeGraph: function() { var component = this; // code to initialize highcharts graph here }.on('didInsertElement')...

Highcharts failing to display data

php,html,ajax,json,highcharts

To answer my own question, I found that I needed the code: header("Content-type: text/json"); At the top of my .php file....

How to find the width of single cell in xaxis ? ( Refer screenshot )

javascript,jquery,css,charts,highcharts

You can extract that information from xAxis object, by translationSlope param. chart.xAxis[0].translationSlope Example: http://jsfiddle.net/y5Lob9f3/...

How to use a 'plotWidth' calculation to position a highcharts pie

I ended up doing this by editing the SVG object and calling the redraw() method on the pies. function ChartLoad() { var chart = this, centerX = chart.plotWidth * 0.5, Pie1CenterX = centerX * 1.5; var Pie1 = chart.get('Pie1'); Pie1['chart']['plotLeft'] = Pie1CenterX; Pie1.redraw(); var Pie2 = chart.get('Pie2'); Pie2['chart']['plotLeft'] = Pie1CenterX+90;...

Is there a way to disable a legend item by default?

javascript,highcharts,scatter

Yes, you can do this. In the series options for the data element you do not want to show set the visible property to false. series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], visible: false }, { data: [144.0, 176.0, 135.6, 148.5, 216.4,...

Highcharts (grouped_category styling) and tooltip formatter not working

1) There's not such option like series.tooltip.formatter. Only series.tooltip.pointFormat or other formats. For example: tooltip: { pointFormat: "{point.value}" } Example: http://jsfiddle.net/TFhd7/367/ 2) I think this is connected to the design changes between Highcharts 2.x and 4.x. See more in this ticket. And example after setting labels.x to -5: http://jsfiddle.net/TFhd7/368/ Regarding...

How to connect js array to highcharts

javascript,html,highcharts

try this, you can change the time interval of setTimeout function based on the number of for loops or iteration. <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> </head> <body> Diameter: <input type="number" id="TreeDiameter" value=""> <button onclick="myFunction()">Calculate</button> <p id="demo"></p> <div...

Highchart Z-Index practice not functioning

javascript,jquery,arrays,highcharts

You can disable events for dataLabels in CSS: .highcharts-data-labels { pointer-events: none; } And demo: http://jsfiddle.net/gdkazb9q/4/ Full solution for the above case by @Gags : events:{ mouseover: function() { $(".highcharts-data-labels").css("pointer-events","none") }, mouseout: function() { $(".highcharts-data-labels").css("pointer-events","visibleStroke") } } } ...

combine and merge two array into set of arrays for Highchart Pie

Set your arr3 var as an array and push elements into it : var expense_name = amounts.expense_name; var expense_amount = amounts.expense_amt; var arr3 = []; $.each(expense_name, function(i, value){ arr3.push([value,expense_amount[i]]); }); ...

How to show legend like Maps' in Line diagram in Highcharts?

javascript,highcharts,highstock

In general, it's not supported, but you can try to add such functionality from maps to the standard charts: http://jsfiddle.net/w9nuha8n/ (function (H) { // add colorAxis H.seriesTypes.line.prototype.axisTypes = ['xAxis', 'yAxis', 'colorAxis']; H.seriesTypes.line.prototype.optionalAxis = 'colorAxis'; // draw points and add setting colors H.wrap(H.seriesTypes.line.prototype, "translate", function (p) { p.call(this); H.seriesTypes.heatmap.prototype.translateColors.call(this); }); //...

Update Stockchart yAxis Labels Changes Positions and Label Precision

Looks like default options are lost when updating axis. Simple workaround: http://jsfiddle.net/33cu0o9c/3/ chart.yAxis[0].update({ labels: { align: "right", x: 0, formatter: function () { return this.value; } } }); And bug is reported here....

Highcharts & jQuery: add a mark by clicking with Shift key pressed, then process on release

jquery,javascript-events,highcharts

You could try this: you create an event to catch keydown. If it is shift key code, you set a reactive variable to true. Don't use a session variable, get reactive dict if you can. (you add var pageSession = new ReactiveDict(); at the beginning of your js file) you...

Highcharts (highstock) anyway to detect maximum value in a series

jquery,highcharts,highstock

This can be done by scanning you data in the events.load: events: { load: function () { var points = [] this.series.forEach(function (entry) { entry.data.forEach(function (theData) { points.push(theData.y); }); }); this.yAxis[0].update({ max: Math.max.apply(Math, points) }); } } This is a very verbose way to do it and you could probably...

Spline chart drawn on the xaxis in case of single value or constant values - highchart

javascript,html,charts,highcharts

I would set yAxis.minRange option, demo. It won't place line exactly in the middle, but will make some extra space on top and bottom.

How to set Month In Highchart same to database

php,jquery,html,mysql,highcharts

Look at this example: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/spline-symbols/ with 12 column names categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] and 12 points of data data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, { y: 26.5, marker: { symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)' } }, 23.3, 18.3, 13.9, 9.6] if you...

Highcharts scatter set markers

javascript,jquery,python,ajax,highcharts

They may be selected randomly by default, but to set them explicitly, try something like this: series: [{ name: 'Predefined symbol', data: [316.4, 294.1, 195.6, 154.4], marker: { symbol: 'triangle' } }], Where the symbol attribute can specify a shape or link to an icon. There are some pretty cool...

multiple Highcharts using PHP include command

php,highcharts

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> Try to make id value different for each include, e.g. $divId = 'container_' . mt_rand( 1, 1000 ); $('#<?php echo $divId;?>').highcharts... <div id="<?php echo $divId;?>" style="min-width: 310px; height: 400px; margin: 0 auto"></div>...

Return Highcharts using Ajax and Python

Now sure how but changing the return method helped and also the some changes with the JSON format. Every (, ' "") matters. The corrected code is bleow: @app.get('/getmyname/<jsonstring>') def getmyname(db, jsonstring): ret = """{ "chart": { "type": "column" }, "colors": [ "#00B7DE", "#00539E" ], "title": { "text": "SALES -...

Highcharts solid gauge with multiple series

Now simply add radius option: http://jsfiddle.net/gc323yu6/2/ series: [{ data: [83], innerRadius:'120%', radius: '110%' }, { data: [50], innerRadius:'110%', radius: '100%' }, { data: [19 ], innerRadius:'90%', radius: '80%' }] ...

Highcharts Control Basic DrilDown Using Dom

Well, this is not part of the API, but as you noticed, to drill up, you need to call chart.drillUp(). To drilldown, it's a bit different and depends where you want drilldown. In short call method: chart.xAxis[0].drilldownCategory(category_index);, see: http://jsfiddle.net/vncnwd66/2/ However, there is one limitation: you can't drilldown from second level...

Highcharts GANTT chart - need to allow category with no data

javascript,highcharts,heatmap

Highcharts default behavior will show the category even if there is no data, unless it is the first or last category. You can just change your input array to have an empty intervals array in your case: http://jsfiddle.net/jlbriggs/2xkfm87e/1/ If you need the first or last category to be empty, you'll...

Highcharts Heatmap Legend Max

It's another option to colorAxis. Documentation Make your colorAxis object in options like this: colorAxis: { min: 0, max: 100, minColor: '#FFFFFF', maxColor: Highcharts.getOptions().colors[0] }, Full fiddle...

Full width arearange

javascript,highcharts,visualization

You can manage your x-values for arearange series: data: [ [-0.5, min, max], // 0 = index for the first category, so start before [2.5, min, max] // 2 = index for the last category, so end after ], Now just set min and max for xAxis: xAxis: { type:...

HighCharts JS - Getting multiple linear underlays on a scatter plot

Basically, you can combine any kind of chart type. See their demo of a scatter plot with a regression line. As an example of a scatter plot combined with a stacked area chart, see the following code and fiddle: var Y_MAX = 6; var X_MAX = 5; $(function () {...

Tooltip is not hidden after formatting in highchart

javascript,jquery,css,highcharts

Figured it out. Returning false instead of null is working tooltip: { formatter:function() { if(this.y != 0) { return this.point.name + ':' + this.point.sizeText; } else { return false; } } } ...

Highcharts inverted line where dates go upwards, not downwards (reversed series)?

highcharts,highstock

Got it working. Here is a demo of dates going upwards and the dataset is timestamped data, dateformat is weekday and no categories used: http://jsfiddle.net/ryfssm1u/ $('#container').highcharts({ chart: { type: 'spline', inverted: true }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', x: -150, y: 100, floating: true, borderWidth: 1 },...

dragging cannot get to the beginning of chart highcharts

highcharts,highstock

I set ordinal:false in xAsix and the problem was resolve

How to programmatically set navigator handles in highstock?

css,angularjs,highcharts,highstock

It's possible to set extremes without rangeSelector using xAxis.setExtremes() method: http://plnkr.co/edit/bRnV1lyJHmmx7YURTggq?p=preview chart: { renderTo: 'container', height: 600, events: { load: function() { var max = this.xAxis[0].max, range = 24 * 3600 * 1000; // one day this.xAxis[0].setExtremes(max - range, max); } } }, ...

Prevent strtotime being encoded as string by json_encode

php,json,highcharts

http://json.org/ From Objects An object structure is represented as a pair of curly brackets surrounding zero or more name/value pairs (or members). A name is a string. and from Strings A string begins and ends with quotation marks. So I would say that according to the standard: yes, you should...

Add dataLables to pie Highchart

javascript,angularjs,highcharts

All you need is to place your dataLabels in correct plotOptions and use point plotOptions: { pie: { dataLabels: { enabled: true, format: '{point.name}:{point.y}', } } } You can see a working sample here http://plnkr.co/edit/5VI6cAqVoIibhAJ8pYfP UPDATE Formatting can also work with {y} format: '{y}', but if you want more advanced...

How can I have same hover point color in highcharts?

well as a roundabout to your problem you could try something like this plotOptions: { .... series: { cursor: 'pointer', dataGrouping: { enabled: false }, marker: { radius: 4, states: { hover: { fillColor: function(){ return true; } } } }, turboThreshold: 1000000 } }, ...

Add a gap between the second and third series in a Highcharts column plot with four series displayed

javascript,plot,highcharts

You need to use pointPlacement option with number value. For example: http://jsfiddle.net/9phfzewj/34/ Play around with values, which in my case are -0.1 for lefts and 0.1 for rights. As long as series.grouping is enabled, pointPlacement refers to the previous series position....

Highcharts issue updating chart type: not recognizing highcharts functions

javascript,highcharts,ordinal

http://jsfiddle.net/2j1g200g/29/ var options = { chart: { type: 'line', renderTo: 'chart_example' }, title: { text: 'Traffic' }, xAxis: { categories: ['November', 'December', 'January'] }, yAxis: { title: { text: 'Views' } }, series: [{ name: 'Hello', data: [50, 30, 60] }] }; chart = new Highcharts.Chart(options); options.chart.type = 'bar'; chart...

How to make a Highstocks x-axis even and regular?

The relevant code isn't included in the question, but I'll address the issue. You are using a baseSettings object and a custom settings object (lets call them customSettings) to form a chart. These two separate settings are merged using the jQuery extend function. Your problem here is that when both...

Increment x axis value by 10 instead of 1

javascript,html,charts,highcharts

I was looking for pointInterval, which not only set the value of the tick but also of the value.

How to remove year from Highchart

javascript,colors,highcharts

you can use xAxis-> labels -> formatter function to foramt the date as you want. Here in your case since you have not mentioned the start of the time and interval for those value , Library started the plotting from its default values. now the same way as you did...

Is it possible to have different colored graphs in a single series in HighCharts?

Try out the following plotOptions: { column: { colorByPoint: true } }, colors: [ '#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9', '#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1' ], Fiddle link :) Update 1: Dynamic series fiddle:) Update 2: Use the following code to have specific color for specific bar chart.series[0].addPoint({y: Math.random() * 100,...

Highcharts X-Axis value on top of stacked column

The stack is a separate entity from the series or the point, so doesn't have direct access to the same properties. But with a little digging, you can make the link from the stack to the x axis categories (I always just do a console.log(this) within the formatter to see...

Get all points in Highcharts scatter plot?

javascript,angularjs,highcharts,boxplot

in the chart object which you got i.e var chart = new Highcharts.Chart(options); you have every aspect about the chart in it Here is the part where you can find the plotted data chart.series[0].data ...

Multiple Boxplots in one HighCharts chart

okay, problem was related to declaring the chart-type as a boxplot. in native highcharts it's done like this (as can be seen in the fiddle): chart: { type: 'boxplot' }, However, when using angularjs highcharts-ng module, we need to use the following code: options: { chart: {type: 'boxplot'} }, That's...

Highchart Polar chart multiple background colors to SVG

javascript,jquery,canvas,svg,highcharts

The problem is you that created backgrounds are not part of the chart. In fact, add them in the chart.events.load event, and will be included in the exported SVG: http://jsfiddle.net/9eqh0xrj/5/ chart: { polar: true, renderTo: 'container', events: { load: modelMe } }, And example for function: function modelMe() { var...

How to instruct highcharts scatter chart to print all dataLabels

javascript,charts,highcharts,overlap

You can set allowOverlap: true, like this: plotOptions: { series: { dataLabels: { allowOverlap: true } } } See this updated JSFiddle demonstration....

Highcharts Bar Chart - Labels Not Appearing in Bar

javascript,php,highcharts,phantomjs

Set allowOverlap to true. When you have longer xAxis labels, then you have less horizontal space. Labels have padding which can overlap and hide some of them. Anyway, your demo works for me exactly the same way with or without long xAxis category. Demo with all labels: https://jsfiddle.net/p55t0bmf/1/...

PHP in Javascript for PhantomJS + Highcharts

So I've figured it out. To anyone having the same issue here's the answer: in php file calling myscript.js use the following format for passing arguments through exec(): exec('/usr/bin/phantomjs myscript.js param1 param2',$op,$er); Then in the js file do the below to get the parameters passed: var args = require('system').args; var...

PHP + mysql + highcharts

php,mysql,highcharts

Look to documentation of jQuery.get() : https://api.jquery.com/jquery.get/ First parameter of this function is URL for GET request. In Your code is data from method: MysqlDatabase->find_all_for_charts() In HighCharts package, You can find examples how to use it. Just download it from http://www.highcharts.com/download, and look for: "Ajax loaded data, clickable points" demo....

Extending Highmaps Side Effect

javascript,jquery,highcharts,geojson

Use setVisible method from default map series. Like this: http://jsfiddle.net/4mabw6zr/3 (function (H) { H.seriesTypes.mappoint.prototype.axisTypes = ['xAxis', 'yAxis', 'colorAxis']; H.seriesTypes.mappoint.prototype.pointClass.prototype.setVisible = H.seriesTypes.map.prototype.pointClass.prototype.setVisible; // use the same setVisible method as map type. H.wrap(H.seriesTypes.mappoint.prototype, "translate", function (p) { p.call(this); H.seriesTypes.mappoint.prototype.translateColors.call(this); });...

Highcharts ColumnRange - Display time range on yAxsis instead of Date

I resolved the issue . All I changed is I assigned "from": 1 for all the varialbes data in arraylist and it starts from bottom of the chart till to reach to the end point to:... Here is jsfiddle Thanks...

Issue on Drilling Down and Up in Highcharts.js Using External Dom Buttons