So I&#39;m creating a page with tabbed content using Twitter&#39;s Bootstrap, yet the content of my starting active div is always different than that of my other tabs. For example, I am putting in charts using highcharts.js in my different tabs, yet the active one always shows correctly while the others have an incorrect width.

Check out the example below:

    		&lt;div class = &quot;row-fluid&quot;&gt;
			&lt;div class = &quot;span9&quot;&gt;
				&lt;div class = &quot;row-fluid&quot;&gt;
					&lt;h3&gt;Test&lt;/h3&gt;
						
						&lt;ul class=&quot;nav nav-tabs&quot;&gt;
							&lt;li class = &quot;active&quot;&gt;
								&lt;a data-toggle = &quot;tab&quot; href = &quot;#one&quot;&gt;One&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;&lt;a data-toggle = &quot;tab&quot; href = &quot;#two&quot;&gt;Two&lt;/a&gt;&lt;/li&gt;
							&lt;li&gt;&lt;a data-toggle = &quot;tab&quot; href = &quot;#three&quot;&gt;Three&lt;/a&gt;&lt;/li&gt;
						&lt;/ul&gt;
						
						&lt;div class=&quot;tab-content&quot;&gt;
							
							&lt;div class=&quot;tab-pane active&quot; id=&quot;one&quot; &gt;
								&lt;h4&gt;One&lt;/h4&gt;
								&lt;div id = &quot;container1&quot;&gt;&lt;/div&gt;
								&lt;script type = &quot;text/javascript&quot;&gt;
									$(function () {
										$(&#39;#container1&#39;).highcharts({
											chart: {
											},
											xAxis: {
												categories: [&#39;Jan&#39;, &#39;Feb&#39;, &#39;Mar&#39;, &#39;Apr&#39;, &#39;May&#39;, &#39;Jun&#39;, &#39;Jul&#39;, &#39;Aug&#39;, &#39;Sep&#39;, &#39;Oct&#39;, &#39;Nov&#39;, &#39;Dec&#39;]
											},
											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]        
											}]
										});
									});
								&lt;/script&gt;
							&lt;/div&gt;
							
							&lt;div class=&quot;tab-pane&quot; id=&quot;two&quot; &gt;
							&lt;h4&gt;Two&lt;/h4&gt;
							&lt;div id = &quot;container2&quot;&gt;&lt;/div&gt;
							&lt;script type = &quot;text/javascript&quot;&gt;
								$(function () {
									$(&#39;#container2&#39;).highcharts({
										chart: {
										},
										xAxis: {
											categories: [&#39;Jan&#39;, &#39;Feb&#39;, &#39;Mar&#39;, &#39;Apr&#39;, &#39;May&#39;, &#39;Jun&#39;, &#39;Jul&#39;, &#39;Aug&#39;, &#39;Sep&#39;, &#39;Oct&#39;, &#39;Nov&#39;, &#39;Dec&#39;]
										},
										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]        
										}]
									});
								});
								&lt;/script&gt;
							&lt;/div&gt;
							
							&lt;div class=&quot;tab-pane&quot; id=&quot;three&quot; &gt;
							&lt;h4&gt;Three&lt;/h4&gt;
							&lt;div id = &quot;container3&quot;&gt;&lt;/div&gt;
							&lt;script type = &quot;text/javascript&quot;&gt;
								$(function () {
									$(&#39;#container3&#39;).highcharts({
										chart: {
										},
										xAxis: {
											categories: [&#39;Jan&#39;, &#39;Feb&#39;, &#39;Mar&#39;, &#39;Apr&#39;, &#39;May&#39;, &#39;Jun&#39;, &#39;Jul&#39;, &#39;Aug&#39;, &#39;Sep&#39;, &#39;Oct&#39;, &#39;Nov&#39;, &#39;Dec&#39;]
										},
										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]        
										}]
									});
								});
								&lt;/script&gt;
							&lt;/div&gt;
							
						&lt;/div&gt; 
				&lt;/div&gt;
			&lt;/div&gt;
			&lt;div class = &quot;span3&quot;&gt;
				&lt;p&gt;Here is the content on my sidebar&lt;/p&gt;
			&lt;/div&gt;
		&lt;/div&gt;

In this case, switching the active tab on page load makes that chart look correct for me, but the rest always extend all the way to the edge (In the case of my data, which I want to only fill up the space of the span9 div. I just used dummy charts in this case, but it&#39;s the same idea. 

Here&#39;s a JSFiddle: http://jsfiddle.net/dw9tn/


My questions for you all are:


1.) Is this just me?

2.) What exactly is going on when tabs are made active? Looking at the bootstrap css, this seems to deal with display: none and display: block, but I don&#39;t have a good understanding of how that works in this case.

3.) Is this a highcharts issue or a bootstrap issue? I noticed this happened to me with non-highchart elements (like showing tweets in the sidebar), so I&#39;m leaning toward bootstrap.

4.) Is there any solution you can find to make everything consistent? 


Thanks guys!

Why are Bootstrap tabs displaying tab-pane divs with incorrect widths when using highcharts?

I&#39;m new to highCharts and want to know how I can turn off the animation for line charts.

I&#39;ve tried setting it to false in plotlines but no success.

        

HighCharts turn animation false for line chart

I&#39;m using Highcharts within Zurb&#39;s Foundation framework for a class project. I have three charts within a section tab. One is within a 12-column div, the other two are on the same row within 6-column divs.

When the page loads, the featured chart does not take up the available width of the 12 columns, and the two smaller charts overflow their 6 columns. However, when the window is resized or I try to investigate using Inspect element, the charts immediately snap into the correct dimensions. This behavior occurs in Chrome, FF, and IE.

I realize I could set a specific width, but I&#39;d really like to take advantage of Foundation and keep them responsive.

I&#39;ve tweaked the CSS and Highcharts initializations, but I&#39;m stumped. Has anyone else experienced this issue? Can anyone see what I&#39;m missing?

Here&#39;s an excerpt from my HTML:

    &lt;div class=&quot;row&quot;&gt;
	&lt;div class=&quot;twelve columns&quot;&gt;
        &lt;!--begin tabs below--&gt;	
        &lt;div class=&quot;section-container tabs&quot; data-section=&quot;tabs&quot;&gt;
          &lt;section&gt;
            &lt;p class=&quot;title&quot; data-section-title&gt;&lt;a href=&quot;#&quot;&gt;Heart Disease&lt;/a&gt;&lt;/p&gt;
            &lt;div class=&quot;content&quot; data-section-content id=&quot;heart&quot;&gt;
            
            	&lt;div class=&quot;row feature-chart&quot;&gt;
            		&lt;div class=&quot;large-12 columns&quot;&gt;
                    	&lt;div id=&quot;heartTimeline-container&quot;&gt;
               			&lt;div id=&quot;heartTimeline&quot;&gt;&lt;/div&gt;
                        &lt;/div&gt;
               		&lt;/div&gt; &lt;!--close 12 columns--&gt;
               	&lt;/div&gt; &lt;!--close row--&gt;
                &lt;div class=&quot;row small-charts&quot;&gt;
            		&lt;div class=&quot;large-6 columns&quot;&gt;
                		&lt;div id=&quot;heartDemo&quot;&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;!--close 6--&gt;
            		&lt;div class=&quot;large-6 columns&quot;&gt;
              			&lt;div id=&quot;heartStages&quot;&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;!--close 6--&gt;
                &lt;/div&gt;
                &lt;!--end row--&gt;
            &lt;/div&gt;
          &lt;/section&gt;
       &lt;/div&gt;
       &lt;/div&gt;
       &lt;!--end twelve columns--&gt;
   &lt;/div&gt;
   &lt;!--end row--&gt;

Here&#39;s the Highcharts js:
    
    $(function () {
		Highcharts.setOptions({
			colors: [&#39;#1A1A1A&#39;, &#39;#455D78&#39;, &#39;#BDCCD4&#39;, &#39;#999999&#39;, &#39;#B3B3B3&#39;, &#39;#F2F2F2&#39;]
		});
		$(&#39;#heartTimeline&#39;).highcharts({
			chart: {
				type: &#39;area&#39;
			},
			title: {
				text: &#39;Heart Disease Death Rates in the U.S.from 1980-2010&#39;
			},
			subtitle: {
				text: &#39;Source: &lt;a href=&quot;http://www.mdch.state.mi.us/pha/osr/deaths/Heartdx.asp&quot;&gt;&#39;+ 
							&#39;Michigan Department of Community Health&lt;/a&gt;&#39;
			},
			xAxis: {
				labels: {
					formatter: function() {
						return this.value; // clean, unformatted number for year
					}
				}
			},
			yAxis: {
				title: {
					text: &#39;Heart Disease Death Rate Per 100,000 People&#39;
				},
				labels: {
					formatter: function() {
						return this.value / 1 +&#39;k&#39;;
					}
				}
			},
			tooltip: {
				pointFormat: &#39;{series.name} produced &lt;b&gt;{point.y:,.0f}&lt;/b&gt;&lt;br/&gt;deaths per hundred thousand people in {point.x}&#39;
			},
			plotOptions: {
				area: {
					pointStart: 1980,
					marker: {
						enabled: false,
						symbol: &#39;circle&#39;,
						radius: 2,
						states: {
							hover: {
								enabled: true
							}
						}
					}
				}
			},
			series: [{
				name: &#39;Heart Disease&#39;,
				data: [412.1, 397, 389, 388, 378, 375, 365.1, 355.9, 352.5, 332, 321.8, 313.8, 306.1, 309.9, 299.7, 296.3, 288.3, 280.4, 272.4, 267.8, 257.9, 247.8, 240.8, 232.3, 217, 211.1, 200.2, 190.9, 186.5, 180.1, 178.5]
			}, ]
		});
	});
    $(function () {
		$(&#39;#heartDemo&#39;).highcharts({
			chart: {
				zoomType: &#39;xy&#39;
			},
			title: {
				text: &#39;Most Prevelant Causes and Effects of Heart Disease 2013&#39;
			},
			subtitle: {
				text: &#39;Source: http://circ.ahajournals.org (The American Heart Association)&#39;
			},
			xAxis: [{
				categories: [&#39;Smoking&#39;, &#39;Obesity (BMI &gt; 25 kg) &#39;, &#39;Total cholesterol &gt; 200 mg)&#39;, &#39;High Blood Pressure&#39;, &#39;Diabetes Mellitus&#39;, &#39;Prediabetes&#39;, &#39;Total Cardiovascular Disease&#39;, &#39;Stroke&#39;, &#39;Coronary Heart Disease&#39;, &#39;Heart Failure&#39;],
				labels: {
					rotation: -90,
					align:&#39;right&#39;
				}
			}],
			yAxis: [{ // Primary yAxis
				labels: {
					formatter: function() {
						return this.value +&#39;%&#39;;
					},
					style: {
						color: &#39;#000000&#39;
					}
				},
				title: {
					text: &#39;Men&#39;,
					style: {
						color: &#39;#BDCCD4&#39;
					}
				},
				opposite: true
			
			}, { // Secondary yAxis
				gridLineWidth: 0,
				title: {
					text: &#39;Both Sexes&#39;,
					style: {
						color: &#39;#455D78&#39;
					}
				},
				labels: {
					formatter: function() {
						return this.value +&#39; %&#39;;
					},
					style: {
						color: &#39;#4572A7&#39;
					}
				}
			
			}, { // Tertiary yAxis
				gridLineWidth: 0,
				title: {
					text: &#39;Women&#39;,
					style: {
						color: &#39;#AA4643&#39;
					}
				},
				labels: {
					formatter: function() {
						return this.value +&#39; %&#39;;
					},
					style: {
						color: &#39;#AA4643&#39;
					}
				},
				opposite: true
			}],
			tooltip: {
				shared: true
			},
			legend: {
				layout: &#39;vertical&#39;,
				align: &#39;left&#39;,
				x: 120,
				verticalAlign: &#39;top&#39;,
				y: 80,
				floating: true,
				backgroundColor: &#39;#FFFFFF&#39;
			},
			series: [{
				name: &#39;Both Sexes&#39;,
				color: &#39;#455D78&#39;,
				type: &#39;column&#39;,
				yAxis: 1,
				data: [19, 68.2, 43.4, 33, 8.3, 38.2, 35.3, 2.8, 6.4, 2.1],
				tooltip: {
					valueSuffix: &#39; %&#39;
				}
			}, {
				name: &#39;Women&#39;,
				type: &#39;spline&#39;,
				color: &#39;#AA4643&#39;,
				yAxis: 2,
				data: [16.7, 63.7, 44.9, 32.2, 7.9, 30.5, 34, 3, 5.1, 1.8],
				marker: {
					enabled: false
				},
				dashStyle: &#39;shortdot&#39;,
				tooltip: {
					valueSuffix: &#39; %&#39;
				}
			}, {
				name: &#39;Men&#39;,
				color: &#39;#BDCCD4&#39;,
				type: &#39;spline&#39;,
				data: [21.3, 72.9, 41.3, 33.6, 8.7, 46, 36.7, 2.6, 7.9, 2.5],
				tooltip: {
					valueSuffix: &#39; %&#39;
				}
			}]
		});
	});
			
	$(function () {
		$(&#39;#heartStages&#39;).highcharts({
			chart: {
				type: &#39;column&#39;
			},
			title: {
				text: &#39;Number of Deaths for Different Types of Heart Diseases in the U.S. for 2008&#39;
			},
			subtitle: {
				text: &#39;Source: &lt;a href=&quot;http://www.nhlbi.nih.gov/resources/docs/2012_ChartBook_508.pdf&quot;&gt;&#39;+ 
					&#39;Morbitity &amp; Mortality: 2012 Chart Book on Cardiovascular, Lung and Blood Disease&lt;/a&gt;&#39;
			},
			xAxis: {
				categories: [
					&#39;Coronary Heart Disease&#39;,
					&#39;Heart Attack&#39;,
					&#39;Cardiomyopathy&#39;,
					&#39;Stroke&#39;,
					&#39;Atrial Fibrillation and Flutter&#39;,
					&#39;Heart Failure&#39;,
					&#39;Diseases of Pulmonary Circulation&#39;,
					&#39;Pulmonary Embolism&#39;,
				],
				labels: {
					rotation: -90,
					align:&#39;right&#39;
				}
			},
			yAxis: {
				min: 0,
				title: {
					text: &#39;Heart Disease Diagnostic Category (thousands)&#39;
				}
			},
			tooltip: {
				headerFormat: &#39;&lt;span style=&quot;font-size:10px&quot;&gt;{point.key}&lt;/span&gt;&lt;table&gt;&#39;,
				pointFormat: &#39;&lt;tr&gt;&lt;td style=&quot;color:{series.color};padding:0&quot;&gt;{series.name}: &lt;/td&gt;&#39; +
					&#39;&lt;td style=&quot;padding:0&quot;&gt;&lt;b&gt;{point.y:.1f} &lt;/b&gt;&lt;/td&gt;&lt;/tr&gt;&#39;,
				footerFormat: &#39;&lt;/table&gt;&#39;,
				shared: true,
				useHTML: true
			},
			plotOptions: {
				column: {
					pointPadding: 0.2,
					borderWidth: 0
				}
			},
			series: [{
				name: &#39;Heart Disease Related Deaths for 2008&#39;,
				data: [405.309, 133.958, 23.932, 134.148, 15.383, 56.830, 12.927, 7.158]
			
			}]
		});
	});

Responsive Highcharts not sizing correctly until window resize

I need to set different colors for each column in Highcharts graph dynamically. My Highcharts graph is:

&lt;!-- language: lang-js --&gt;
 
    options = {
             chart: {
                 renderTo: &#39;chart&#39;,
                 type: &#39;column&#39;,
                 width: 450
             },
             title: {
                 text: &#39;A glance overview at your contest’s status&#39;
             },
             xAxis: {
                 categories: [&#39;Approved Photos&#39;, &#39;Pending Approval Photos&#39;, 
                              &#39;Votes&#39;, &#39;Entrants&#39;],
                 labels: {
                     //rotation: -45,
                     style: {
                         font: &#39;normal 9px Verdana, sans-serif, arial&#39;
                     }
                 }
             },
             yAxis: {
                 allowDecimals: false,
                 min: 0,
                 title: {
                     text: &#39;Amount&#39;
                 }
             },
             legend: {
                 enabled: false
             },
             series: []
         };
         series = {
             name: &quot;Amount&quot;,
             data: [],
             dataLabels: {
                 enabled: true,
                 color: &#39;#000000&#39;,
                 align: &#39;right&#39;,
                 x: -10,
                 y: 20,
                 formatter: function () {
                     return this.y;
                 },
                 style: {
                     font: &#39;normal 13px Verdana, sans-serif&#39;
                 }
         }
     };

The data is set this way:

    for (var i in Data) {
      if (parseInt(Data[i]) != 0) {
        series.data.push(parseInt(Data[i]));
      } else {
        series.data.push(null);
      }
    }
    options.series.push(series);
    chart = new Highcharts.Chart(options);

How can I dynamically set different colors for each data point in this loop?

set different colors for each column in highcharts

I am drawing a bar chart using `highchart.js`

**I do not want to show the x - axis data values.**

Can any one tell me which option does it?
&lt;br /&gt;
full config:

    var chart = new Highcharts.Chart({
                    chart: {
                        renderTo: container,
                        defaultSeriesType: &#39;bar&#39;
                    },
                    title: {
                        text: null
                    },
                    subtitle: {
                        text: null
                    },
                    xAxis: {
                        categories: [&#39;&#39;],
                        title: {
                            text: null
                        },
                        labels: {enabled:true,y : 20, rotation: -45, align: &#39;right&#39; }
    
                    },
                    yAxis: {
                        min: 0,
                        gridLineWidth: 0,
                        title: {
                            text: &#39;&#39;,
                            align: &#39;high&#39;
                        }
                    },
                    tooltip: {
                        formatter: function () {
                            return &#39;&#39;;
                        }
                    },
                    plotOptions: {
                        bar: {
                            dataLabels: {
                                enabled: true
                            },
                            pointWidth: 35,
                            color: &#39;#D9CDC1&#39;
                        }
                    },
                    legend: {
                        enabled: false
                    },
                    credits: {
                        enabled: false
                    },
                    series: [{
                        name: &#39;Year 1800&#39;,
                        data: [107]
                    }]
                });

how to hide highchart x - axis data values

I need to modify click event on highcharts legend items. Highcharts demo  http://www.highcharts.com/demo/line-basic . I want for example: first action will be some alert and second action will be action by default(clean Tokyo line from chart). Thanks. Sorry if question not clean.


How to modify highcharts legend item click event?

I&#39;m using highcharts to make a piechart but I&#39;m having trouble loading a custom color set for my chart.

Here is my code: 
    
         &lt;script type=&quot;text/javascript&quot;&gt;
         $(function () {
         Highcharts.setOptions({
         colors: [&#39;#50B432&#39;, &#39;#ED561B&#39;, &#39;#DDDF00&#39;, &#39;#24CBE5&#39;, &#39;#64E572&#39;, &#39;#FF9655&#39;, &#39;#FFF263&#39;,      &#39;#6AF9C4&#39;]
        });
        return new Highcharts.Chart({
        
       
            chart: {
                renderTo: &#39;trailpiechart&#39;,
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                backgroundColor: &quot;#f8f8f8&quot;,
                margin: [20, 20, 20, 20]
            },
    
    
            credits: {
                enabled: false
            },
    
            title: {
                text: caption
            },
            tooltip: {
                formatter: function () {
                    return this.y + &#39; links&#39;;
                }
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: &#39;pointer&#39;,
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
            legend: {
                layout: &#39;vertical&#39;,
                floating: false,
                borderRadius: 0,
                borderWidth: 0
            },
            series: [{
                type: &#39;pie&#39;,
                name: &#39;Browser share&#39;,
                data: data
            }]
        });
        });
    &lt;/script&gt;

My pie chart works with this code but it only uses the default color pallet.

How do you specify a custom color set?

How can I change the colors of my highcharts piechart?

I have a Highchart containing multiple lines.  I want to disable the tooltip on certain lines, and leave it enabled for others.  Is that possible?  I see how to disable the tooltip globally, but not by series.

For instance, on the [standard line chart example][1] is it possible to disable the tooltip on the red and blue lines but leave it enabled on the other two?

  [1]: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-basic/ &quot;this example&quot;

Disable highcharts tooltip on certain lines, leave it enabled on others?

Short question : Is there a way to set `min/max` in Highcharts AFTER the chart has been created. I am aware of intial setup like `y: {min: 100,max: 200}` at the chart initialization but I want to change max/min later on dynamically.

Highcharts: Set y Axis Max and Min dynamically, and not at creation

I&#39;m just going to hardcode it in using html that is around the graph, I don&#39;t want to use the built in.

I don&#39;t see a &quot;disable: true&quot;       option in the API.

Can anybody help me out here.

How do you disable the title / subtitle in highcharts?

(if you simply leave the text blank it still carves out a whitespace in that spot where the title is, i&#39;d like to not have this happen)

Is there a way to disable the Title and Subtitle in Highcharts?

Is there a standard way to get dates on the x-axis for Highcharts?  Can&#39;t find it in their documentation: https://api.highcharts.com/highcharts/xAxis.type

When my time range is large enough, it shows dates.  However, when the time range isn&#39;t large enough, it just shows hours, like this:

![enter image description here][1]


  [1]: http://i.stack.imgur.com/Iokzi.png

This is less than ideal... if it could show a date and time in this case, that&#39;d be great.  Anyone know how?

How to get highcharts dates in the x axis?

is there any way to pass some additional data to the series object that will use to show in the chart &#39;tooltip&#39;?

for example  

     tooltip: {
         formatter: function() {
                   return &#39;&lt;b&gt;&#39;+ this.series.name +&#39;&lt;/b&gt;&lt;br/&gt;&#39;+
               Highcharts.dateFormat(&#39;%b %e&#39;, this.x) +&#39;: &#39;+ this.y;
         }

here we can only use series.name , this.x &amp; this.y to the series. lets say i need to pass another dynamic value alone with the data set and can access via series object. is this possible? 

Thank you all in advance.

Set Additional Data to highcharts series

I try to solve this problem several times and give up. Now, when I have met him again, I decided to ask for some help.

I have this code for my Legend:

    legend:
    {
        layout: &#39;vertical&#39;,
        align: &#39;right&#39;,
        verticalAlign: &#39;top&#39;,
        x: -10,
        y: 100,
        borderWidth: 0,
        
        
        
        labelFormatter: function() 
        {
            if(this.name!=&#39;Series 1&#39;)
            {
                return this.name;
            }
            else
            {
                return &#39;Legend&#39;;
            }
        }
    }
    
If I change the return from &#39;Legend&#39; to &#39;&#39; the text is not shown but still there is a &#39;dash&#39; on the top of the legend. If I do not use label formater function  I have &#39;Series 1&#39; + &#39;dash&#39; like a first row in my legend. How to hide them?

Please, note my version is : Highcharts-2.0.5

This is a simple view of my legend and the dash I want to remove:

[![Sample Image][1]][1]
&lt;!-- source: http://img72.imageshack.us/img72/8305/45167805.png --&gt;

 [1]: https://i.stack.imgur.com/IubwX.png

HighCharts Hide Series Name from the Legend

I have a requirement to plot **run  history** of a **task** in Highcharts.  It needs to show that run history of the tasks as a horizontal bar.  There are additional requirements which I&#39;ve added as an update below. Recently I found out that `inverted` option is not supported in [StockChart](http://api.highcharts.com/highstock#chart) and that only [navigator](http://api.highcharts.com/highstock#navigator) &amp; [rangeSelector](http://api.highcharts.com/highstock#rangeSelector) are available in StockChart.  Therefore I am using those functions.

So in order to achieve the requirement I created something similar to [this jsfiddle example](http://jsfiddle.net/abhisheksimion/bx2000cb/2/) (found somewhere while browsing don&#39;t remember the source) and ended up with [this plunker link](http://embed.plnkr.co/lK9921/preview) with help from my previous [question](https://stackoverflow.com/questions/27983248/need-help-in-plotting-a-chart-using-highcharts-in-angularjs), thanks to [Pawel Fus](https://stackoverflow.com/users/1451635/pawe%C5%82-fus)

**Updating question to avoid confusion**

Additional requirements:

Show **only those tasks** which **ran** in a particular **date and time range**. In case there are too many runs, such as more than 10 run, then there needs to be a way to display only 10 tasks visibly with a y-axis that is scrollable to show other tasks.
[plunker link to the problem](http://plnkr.co/edit/7GRgqk?p=preview)

Problem explanation of above plunker.

If you check the screenshot below from above plunker, the time range is from `12/12/2014 09:32:26` to `12/12/2014 10:32:26` and there are only 2 tasks that has run `m_ARRAYV_SALES_ZIG1_CALL2_VOD__C_OB` &amp; `m_ZIG2_HCP_MERGE_IB_CN`. However I can see another task in between `LILLY_C` which did not even ran in this date time range. (In actual data there are more than 10 tasks that clutters this chart which does not even fall under this date time range)

Also if you notice at the bottom most right corner time shifted from `09:38` to `19:20`. `19:20` is the end time for `m_ZIG2_HCP_MERGE_IB_CN` task.
![enter image description here][1]
Below is my chart options

		var chart_options = {
	    		chart: {
			        renderTo: &#39;container&#39;,
			        height: 600
			    },
			    title: {
			    },
			    credits: {
			    	enabled: false
			    },
			    xAxis: {
			        type: &#39;datetime&#39;,
			        gridLineWidth: 1,
                    tickInterval: 1 * 3600 * 1000,
			        dateTimeLabelFormats: {
			            month: &#39;%b %e, %Y&#39;
			        }
			    },
			    yAxis: {                    
			        tickInterval: 1,
			        gridLineWidth: 1,
			        labels: {
			            formatter: function() {
			                if (tasks[this.value]) {
			                    return tasks[this.value].name;
			                }
			            }
			        },
			        startOnTick: false,
			        endOnTick: false,
			        title: {
			            text: &#39;Task&#39;
			        }
			    },
			    rangeSelector: {
			        selected: 0,
			        buttons: [ {
			            type: &quot;minute&quot;,
			            count: 60,
			            text: &quot;1h&quot;
			        }, {
			            type: &quot;minute&quot;,
			            count: 180,
			            text: &quot;3h&quot;
			        }, {
			            type: &quot;minute&quot;,
			            count: 300,
			            text: &quot;5h&quot;
			        }],
			        inputDateFormat: &#39;%m/%d/%Y %H:%M:%S&#39;,
            		inputEditDateFormat: &#39;%m/%d/%Y %H:%M:%S&#39;,
                    inputBoxWidth: 120
			    },
			    navigator: {
			        enabled: false
			    },
			    legend: {
			        enabled: false
			    },
			    tooltip: {
			        shared: false,
			        formatter: function() {
			            var str = &#39;&#39;;
			            str += &#39;Task: &#39; + this.series.name + &#39;&lt;br&gt;&#39;;
			            str += &#39;From: &#39; + Highcharts.dateFormat(&#39;%m/%d/%y %H:%M&#39;, this.point.from) + &#39;&lt;br&gt;&#39;;
			            str += &#39;To: &#39; + Highcharts.dateFormat(&#39;%m/%d/%y %H:%M&#39;, this.point.to) + &#39;&lt;br&gt;&#39;;
			            return str;
			        }
			    },
			    plotOptions: {
			        line: {
			            lineWidth: 10,
			            marker: {
			                enabled: true
			            },
			            dataLabels: {
			                enabled: true,
			                align: &#39;left&#39;,
			                formatter: function() {
			                    return this.point.options &amp;&amp; this.point.options.label;
			                }
			            },
			            states:{
			                hover:{
			                    lineWidth:10
			                }
			            }
			        },
			        series: {
			            cursor: &#39;pointer&#39;,
			            point: {
			                events: {
			                    click: function () {
			                        var query = &#39;{ &quot;task_id&quot;: &quot;&#39;+this.task_id+&#39;&quot;,&quot;start_time&quot;: &#39;+this.from+&#39;,&quot;exclude_interval&quot;: &#39;+opExcludeMinutes+&#39;,&quot;size&quot;: 10 }&#39;;
			                        $scope.taskName = this.series.name;
			                        $scope.isTaskSelected = false;
			                        $scope.operationalReportAgentTaskHistoryServiceRequest(query);
			                    }
			                }
			            }
			        }
			    },
			    series: seriesData
			};


  [1]: http://i.stack.imgur.com/hRMsK.png

How to create a column range chart in Highcharts using range and navigator functions?

I&#39;m creating charts with the Highcharts library and I wonder how to remove the 2 little buttons on the right corner which one you can print and download graphs and I&#39;d like to add a new one. 

Maybe someone could help me?

How to remove button from Highcharts

When I render a highcharts-chart to a div container, how can I get access to the chart object through the div-Container?

I don&#39;t want to make the chart variable global.

    		var chart = new Highcharts.Chart({
    			chart: {
    				renderTo: &quot;testDivId&quot;,
                                    ...

I want to access the chart outside of the context above like this (pseudocode), to call functions:

    var chart = Highcharts.Chart(&quot;testDivId&quot;); //access from id
    chart.redraw();

How can I get access to a Highcharts chart through a DOM-Container?

I&#39;m using HighCharts. [Here][1] is the documentation. I would like to turn off those points but at first I do not know how is that called. Therefore I can not turn them off. Do you know how am I able to kill those points?

![I would like to turn of those points][2]


  [1]: http://api.highcharts.com/highcharts#chart
  [2]: http://i.stack.imgur.com/bD0KQ.png

HighCharts - How can I turn off the points?

I am trying to hide the axis and gridlines of my Highcharts chart entirely.
So far I have tried to set the width of the lines to 0, but it didn&#39;t work out.

    
    xAxis: {
      lineWidth: 0,
      minorGridLineWidth: 0,
      lineColor: &#39;transparent&#39;
    }

Is it possible to just globally disable the axis lines/ticks and gridlines to create a &quot;plain&quot; plot?

Hide axis and gridlines Highcharts

`Highcharts` chart option `backgroundColor:&#39;transparent&#39;` showing black on `IE 8`

    histogram = new Highcharts.Chart({
                chart: { renderTo: &#39;histogram&#39;, defaultSeriesType: &#39;bar&#39;,
                         backgroundColor:&#39;transparent&#39;
                }

This works fine on `I.E 9` and others but fails on I.E 8 and Safari anyone has any idea why ?

Highcharts chart option backgroundColor:&#39;transparent&#39; showing black on IE 8

I have have a column chart which has a number of categories, each with a single data point (e.g. [like this one][1]). Is it possible to change the colour of the bar for each category? i.e. so each bar would have its own unique colour rather than all being blue?


  [1]: http://www.highcharts.com/demo/column-rotated-labels

How do you change the colour of each category within a highcharts column chart?

I&#39;m struggling to understand the correct way to update a highcharts chart.  Supposing I have rendered a chart, and then I want to update it in some way.  For instance, I may want to change the values of the data series, or I may want to enable dataLabels.

At the moment the only way I can figure out how to do this is to alter the chart options, and use `new Highcharts.chart` to tell highcharts to redraw.

However, I&#39;m wondering whether this may be overkill and it might be possible to alter the chart &#39;in situ&#39;, without having to start from scratch with `new Highcharts.chart`.  I notice there is a `redraw()` method, but I can&#39;t seem to get it to work.

Any help is very much appreciated.

Thanks,

Robin

Sample code is as follows and at the bottom there is a jsFiddle

    $(document).ready(function() {
    
    chartOptions = {
        chart: {
            renderTo: &#39;container&#39;,
            type: &#39;area&#39;,
        },
        series: [{
            data: [1,2,3]
        }]
    };
    
    chart1 = new Highcharts.Chart(chartOptions);

    
    chartOptions.series[0].data= [10,5,2];
    chart1 = new Highcharts.Chart(chartOptions);
    
    //The following seems to have no effect
    chart1.series[0].data = [2,4,4];
    chart1.redraw();
    
    });​


 http://jsfiddle.net/sUXsu/18/

[edit]:

For any future viewers of this question, it&#39;s worth noting there is no method to hide and show dataLabels.  The following shows how to do it: http://jsfiddle.net/supertrue/tCF8Y/

Highcharts - redraw() vs. new Highcharts.chart

UPDATE: Here&#39;s a jsfiddle that shows the problem: http://jsfiddle.net/pynju/1/

Click on the blue column on Monday. When the detail-view loads, notice that 01-07 have 3 columns (expected 2). Click on the tallest bar to go back to the original view. Notice that the labels on the xAxis aren&#39;t being removed.


===============



I have a bar chart that has 2 series, displayed as pairs of bars, side by side.

    series: [{
             showInLegend: false,
             data: dowChartData
          },{
             showInLegend: false,
             data: avgUserDowChartData
          }],


.

    dowChartData = [                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   {
                    y: 98.74,
                    color: &#39;#0072ff&#39;,
                    drilldown: {
                       name: &#39;Category Engagement - Sunday&#39;,
                       categories: [&#39;00&#39;,&#39;01&#39;,&#39;02&#39;,&#39;03&#39;,&#39;04&#39;,&#39;05&#39;,&#39;06&#39;,&#39;07&#39;,&#39;08&#39;,&#39;09&#39;,&#39;10&#39;,&#39;11&#39;,&#39;12&#39;,&#39;13&#39;,&#39;14&#39;,&#39;15&#39;,&#39;16&#39;,&#39;17&#39;,&#39;18&#39;,&#39;19&#39;,&#39;20&#39;,&#39;21&#39;,&#39;22&#39;,&#39;23&#39;],
                       data: [0,637,0,0,0,173,48.54,48.54,0,0,0,0,0,0,102.24,166.36,706.59,699.18,298.32,184.14,97.08,1539,0,1224.56],
                       color: &#39;#0072ff&#39;,
                       data2: [506.80686467275,354.56354558498,333.25158689567,234.19283190879,234.82132336088,220.03247578171,222.86420797556,218.14034615202,170.42559544164,171.54776353196,249.24788461442,345.14915669555,206.65543589797,243.38811965637,367.02593304906,378.83677778129,467.45739743621,424.26264387522,639.60922934374,679.71299714907,373.26353846375,480.94380626458,551.82326068362,466.77469230724],
                       color2: &#39;#C00&#39;
                    }
                 }
    AND SIMILAR

.

    avgUserDowChartData = [                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         {
                    y: 142.35,
                    color: &#39;#C00&#39;
                 },
    AND SIMILAR



The initial data is day of week data with the X-axis being: Sunday - Monday - Tues - Wed - Thurs - Fri - Saturday

The initial series has a drilldown element with a new data &amp; data2
(see above)


Using the drilldown demo code as an example, I have this code in place:

    column: {
    	          borderWidth: 0,
                cursor: &#39;pointer&#39;,
                point: {
                   events: {
                      click: function(event) {
                         var drilldown = this.drilldown;
                         if (drilldown) { // drill down
                            setChart(dowChart, drilldown.name, drilldown.categories, drilldown.data, drilldown.color, drilldown.data2, drilldown.color2);
                         } else { // restore
                            setChart(dowChart, &#39;&#39;, dowCategories, dowChartData);
                         }
                      }
                   }
                },

Set chart handler:

    function setChart(chart, name, categories, data, color, data2, color2) {
          chart.xAxis[0].setCategories(categories);
    //      chart.series[0].remove();
          for (var i = 0; i &lt; chart.series.length; i++) {
              chart.series[i].remove();
          }
          chart.addSeries({
             showInLegend: false,
             name: name,
             data: data,
             color: color || &#39;white&#39;
          });
          if (typeof(data2) != undefined &amp;&amp; data2.length &gt; 0) {
              chart.addSeries({
                 showInLegend: false,
                 name: name,
                 data: data2,
                 color: color2 || &#39;white&#39;
              });
          }
       }


The initial chart display perfectly fine:
![initial display][1]

When you click on any of the blue bars (the data set that has the drilldown), things get wonky for the first 7 x-axis items:
![drill down - broken display][2]

It&#39;s as if the initial data sets aren&#39;t being removed by the code:

    for (var i = 0; i &lt; chart.series.length; i++) {
              chart.series[i].remove();
          }

When you click on any of the bars with the intention of resetting to the original data set/series:
![reset data to original set - broken display][3]

So... it&#39;s clear that the remove series code I&#39;m using isn&#39;t working. What&#39;s the best way to completely remove the data on the chart and the 2 series I need to display each time depending on what is clicked?


  [1]: http://i.stack.imgur.com/DipQG.png
  [2]: http://i.stack.imgur.com/pbNJg.png
  [3]: http://i.stack.imgur.com/htvk6.png

Proper way to remove all series data from a highcharts chart?

I have just purchased [highcharts][1], but the credits link still appears on my graphs which are quite prominent on my site and it distorts the chart view.

I assumed I would get an option, so how do I remove it?


  [1]: http://www.highcharts.com/

Removing highcharts.com credits link

I&#39;ve been trying for two days to find a way to set the **maximum value** of the yAxis on Highcharts.

  I got a percentage **column graphic**, but the highest value in the series is 60, so it adjusts the axis to **top at 70**, I found a way to **choose the start point**, but no way to **choose the end point**.

  What I really need is to set the **yAxis from 0 to 100**, so the data will be more accurately viewed as percentage

  Thanks in advance,
    Bruno W.G.

How to set Highcharts chart maximum yAxis value

I&#39;m using Highcharts and I want to format all numbers showed anywhere in the chart (tooltips, axis labels...) with comma-separated thousands.

Otherwise, the default tooltips and labels are great, and i want to keep them exactly the same. 

For example, in this chart, the number should be `2,581,326.31` but otherwise exactly the same. 

![enter image description here][1]

How can I do this?

I tried adding:

        tooltip: {
            pointFormat: &quot;{point.y:,.0f}&quot;
        }

But this got rid of the nice circle and series label in the tooltip - I&#39;d like to keep that. And ideally I&#39;d prefer to use a single option to set global number formatting, across the whole chart. 


  [1]: http://i.stack.imgur.com/0MXdO.png

Highcharts: Format all numbers with comma?

I am using HighCharts for a line graph report. In this specific report I have been asked to Customize the colours of each series. The series will always stay the same. So for example:

John series: Blue dashed line
Mary series: Solid Red Line

Does anyone know how to accomplish this?

All Highcharts Solutions on Gang of Coders

Total of 26 Highcharts Solutions