We Keep Coding

highchart stock : graph disappear when containing weekend data point

Recently I met a very strange problem when using highchart stock(highstock.js). I load some data points which containing Saturday data point. When application runs, at first it looks like this:
No graph appear, only the navigator and the time axis label. However, when I drag the navigator to the full size, the graph appear, but the x-axis time label disappear, it looks like this:
I have built a plunker here: graph disappear when met weekend data point link
some main configuration codes are as below:
scrollbar : {
barBackgroundColor : 'gray',
barBorderRadius : 7,
barBorderWidth : 0,
buttonBackgroundColor : 'gray',
buttonBorderWidth : 0,
buttonArrowColor : 'yellow',
buttonBorderRadius : 7,
rifleColor : 'yellow',
trackBackgroundColor : 'white',
trackBorderWidth : 1,
trackBorderColor : 'silver',
trackBorderRadius : 7,
// enabled: false,
liveRedraw : false
},
navigator : {
xAxis : {
labels : {
formatter : function(e) {
console.log("value : " + this.value);
console.log("value :" + typeof this.value)
return Highcharts.dateFormat('%Y-%m-%d', this.value);
}
}
},
handles : {
backgroundColor : '#808080'
},
//margin : -10
},
xAxis : {
type : 'datetime',
tickLength : 0
},
Can anyone tell me why?

I have found the true reason. It is not because the weekend data point, but because the data is not sorted in time ascending order.

Highcharts legend is cutting off

I am trying to plot a heatmap using highcharts api using the following chart options:
{
chart : {
renderTo : 'chartContainer',
type : 'heatmap'
},
title : {
text : "abcd"
},
xAxis : {
categories : []//categories,
tickWidth : 0,
title : {
text : "Months"
},
},
yAxis : {
categories : []//categories,
lineWidth : 1,
title : {
text : "xyz"
}
},
colorAxis : {
min : minValue,
max : maxValue,
gridLineWidth : 2,
marker : null,
tickWidth : 0,
tickInterval : tickInterval
},
legend : {
align : 'right',
layout : 'vertical',
verticalAlign: 'middle',
symbolHeight : 250
},
tooltip : {
enabled : false
},
navigation : {
buttonOptions : {
verticalAlign : 'top',
y : -10
}
},
series : [] //series data
};
But legend is somehow cutting at the top. Please check the following snapshot:
Chart Screenshot
I tried the different combinations of legend options mentioned in http://api.highcharts.com/highcharts#legend
Also, tried increasing the height of the chart container.
Still, the legend is still cutting at the top.
Any help/suggestions?

Finally, the issue got resolved. It was occurring because of the 'symbolHeight' property of the legend. I reduced it to 150 and the legend stopped cutting off.

for me, the answer was to increase the legend:itemMarginTop to 20;

For me, it worked by slightly reducing the font-size.
legend:{
itemStyle: {
fontSize: "10px"
},
}
For this, I also had to change the symbolHeight to adjust it according to my font size.
Font size defaults to 12px.
Ref: https://api.highcharts.com/highcharts/legend.itemStyle
Hope this helps. Peace.

Chart.js remove border from x/y Axis

I'm using Chart.js for one of my projects. In which I want to remove border from x/y axis. Any help would be really helpful. Refer Attached Image
Please not that I'm not referring to the GridLines(Which I already turned off using scaleShowGridLines : false)
Chart Script
var topVideos = {
labels : ["","","","",""],
datasets : [
{
fillColor : "rgba(2,137,203,1)",
strokeColor : "rgba(220,220,220,0)",
highlightFill: "rgba(2,137,203,0.8)",
highlightStroke: "rgba(220,220,220,0)",
data : [90000, 200000, 70000, 100000, 180000 ]
}
]
}
window.onload = function(){
var ctx = $("#topvideos").get(0).getContext("2d");
window.myBar = new Chart(ctx).HorizontalBar(topVideos, {
responsive : true,
barShowStroke: false,
scaleShowGridLines : false,
barValueSpacing : 7,
barDatasetSpacing : 30,
});
}
Thanks in Advance.

I think you are using a fork of Chart.js and not the actual chart.js (since the current stable version doesn't have horizontal bars)
In Chart.js, you can set the scale line color to a transparent value, like so
window.myBar = new Chart(ctx).HorizontalBar(topVideos, {
scaleLineColor: "rgba(0,0,0,0)",
...
If the fork is from a version after this, the same options should work in your forked library as well.

options : {
scales: {
yAxes: [{
gridLines: {
drawBorder: false,
}
}]
}
};

In Chart.js 3.5.1 there is a drawBorder property which accepts boolean value. If true, the border is drawn at the edge between the axis and the chart area.
options: {
scales: {
x: {
...
grid: {
drawBorder: false,
},
},
y: {
...
grid: {
drawBorder: false,
},
},
},
}

How to specify bar colors in a jqPlot stacked bar chart?

How do I specify my own colors for the bars in a jqPlot stacked bar chart? I am talking about setting different colors for single bars. I have gone through a couple of examples, but all of them use the default colors. Is there a way to explicitly set the colors for the bars in a stacked bar chart?
Here is the code I have now:
var s1=[11,28,22,47,11,11];
var s2=[0,6,3,0,0,0];
var s3=[1,0,3,0,0,0 ];
var dataArray = [s1, s2, s3];
var ticks = bcdarr;
var options = {
title: ' STATUS',
stackSeries: true,
seriesDefaults: {
renderer:$.jqplot.BarRenderer,
pointLabels: {
show: true
},
rendererOptions: {
barWidth: 25,
varyBarColor: true,
},
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks,
},
yaxis: {
//autoscale: true,
//label: 'Application Count',
min : 0,
tickInterval : 5,
max:50
}
},
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
tickOptions: {
angle: -30,
fontSize: '10pt'
}
}
};

The best place to look for documentation on how to do things is the API Documentation. It has documentation on each component and plugin and the options available for each.
As almas shaikh implied, the setting which changes the colors of the sections of the bars in a stacked barchart is the seriesColors attribute. This is an array with the colors defined as text strings as you would provide for CSS, or a style.
In the example from which you took the above image to get (working JSFiddle):
You can add:
//Define colors for the stacked bars:
seriesColors: ["#FDF396", "#ABFD96", "#96A0FD"],
The complete function call would be:
$(document).ready(function(){
var s1 = [2, 6, 7, 10];
var s2 = [7, 5, 3, 4];
var s3 = [14, 9, 3, 8];
plot3 = $.jqplot('chart3', [s1, s2, s3], {
//Define colors for the stacked bars:
seriesColors: ["#FDF396", "#ABFD96", "#96A0FD"],
// Tell the plot to stack the bars.
stackSeries: true,
captureRightClick: true,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
// Put a 30 pixel margin between bars.
barMargin: 30,
// Highlight bars when mouse button pressed.
// Disables default highlighting on mouse over.
highlightMouseDown: true
},
pointLabels: {show: true}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer
},
yaxis: {
// Don't pad out the bottom of the data range. By default,
// axes scaled as if data extended 10% above and below the
// actual range to prevent data points right on grid boundaries.
// Don't want to do that here.
padMin: 0
}
},
legend: {
show: true,
location: 'e',
placement: 'outside'
}
});
// Bind a listener to the "jqplotDataClick" event. Here, simply change
// the text of the info3 element to show what series and ponit were
// clicked along with the data for that point.
$('#chart3').bind('jqplotDataClick',
function (ev, seriesIndex, pointIndex, data) {
$('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
}
);
});
Additional (point labels):
The best place to look for documentation on how to do things is the API Documentation. It has documentation on each component and plugin and the options available for each. [Restated here and at the top of the answer because I only just added the link.]
Documentation for the point labels is in the plugin API documentation for : PointLabels (plugins/jqplot.pointLabels.js).
Specifically, the options to show the point labels are specified in
{
seriesDefaults:{
pointLabels: {show: true}
}
}
To show the labels, but not those that are zero, you would use:
{
seriesDefaults:{
pointLabels: {
show: true,
hideZeros: true
}
}
}

Try this:
Within your jqplot you are missing seriesColors. Use it something like below:
$.jqplot('chart3', [s1, s2, s3], {
seriesColors:['#000000', '#ffffff', '#000000'],
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
blah blah

How to create a line to show threshold in bar graph

I am using flot to create bar charts like
I need to specify a threshold like a line at 750(y axis) for example, to show the limit...
there is one jquery.flot.threshold.js file in flot package, but i dont know how to use it on bar charts.How to do it ?

Seems there was some issues with using the threshold plugin with the current flot release version. If you just want to mark a threshold, it might be easier to use the grid markings option:
$.plot($("#placeholder"), [ d1, d2, d3 ], {
series: {
stack: true,
bars: { show: true, barWidth: 0.6 }
},
grid: {
markings: [ { xaxis: { from: 0, to: 12 }, yaxis: { from: 0, to: 20 }, color: "#6D7B8D" }]
}
});
Produces (fiddle here):