ChartJS Bar chart painting second bar to the right - javascript

I have a barchart using the latest version of charts.js. Now I need to show the bars and at the right, a bar that actually has nothing to do with the rest. (the first bars are thre monthly values, the last bar is the forecast for this month)
See here to better understand what I mean. https://jsbin.com/diqetaxeqi/edit?js,output
The forecast bar has it's own y axis on the right. I've struggled setting the bar to the right and have solved this by creating a new dataset filling the values with 0 to make sure it is the last bar that is drawn. The problem with this is that the labels are not centered anymore as the bars with 0 value is still painted.
How can I solve this better?
Thanks

Your code requires 2 different datasets ? Or can they be all 4 like:
data: [18739460, 33056135, 36562034, 3234234] ?

Ok. stacking the bars does the trick.
do
stacking:true
at xAxis

Related

how to scrollbar on dynamic chart drilldown in highcharts

hi im very confused for the scroll bar x on drilldown column highcharts,i want if bar more than 3 is scroll if less than 3 no have scroll bar depending on filter,i try to explain with this image
and i try many thing and this my barchart now,the problem if less than 3 labels and labels have 1 until 3 and i will give you example for the js field same like problem like me "http://jsfiddle.net/BlackLabel/xaojun83/"
and this is the code i add from highcharts stock
i hope my explain is clear, I need help on how to make it thankyou

C3JS bar display alignment

Team,
Q1 : I have a bar graph (on x-axis i have timestamps, and on y-axis i have few counts). Now, the bar display is not aligned with x-axis label display, it is misaligned and thus does not show the bar display at correct position of label value.
I tried with tick value as false\true, but still the bar is misaligned. Any idea as where it is going wrong?
Q2: For the same bar graph above, i wish to show the summary\count of all counts inside a legend, are there any examples or which call back function to achieve this?
Regards,
Santhosh

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

while using the older version of highchart - 2.1.6, if a plot had only one value or a series of same values, it would plot at the middle of the screen as below.
But, ever since i have upgraded the version of the highchart to 4.1.5, the line sticks to the bottom, on the xaxis. like this.
I am looking for the option to set it back to normal but, didn't find it yet. Help me out with this please.
I have tried pointPadding on the series and even maxPadding on the yAxis, but no use.
Here is the fiddle where it is replicated -
http://jsfiddle.net/ka4p4sym/2/
var chart = $('#container').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.

Highchart - spline chart - Single value or horizontal line series draws ON the x axis [duplicate]

while using the older version of highchart - 2.1.6, if a plot had only one value or a series of same values, it would plot at the middle of the screen as below.
But, ever since i have upgraded the version of the highchart to 4.1.5, the line sticks to the bottom, on the xaxis. like this.
I am looking for the option to set it back to normal but, didn't find it yet. Help me out with this please.
I have tried pointPadding on the series and even maxPadding on the yAxis, but no use.
Here is the fiddle where it is replicated -
http://jsfiddle.net/ka4p4sym/2/
var chart = $('#container').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.

Highcharts.js combined bar/line chart with timespan bars

What I am trying to achieve is to develop a graph that combines line series with bars. The x axis should be a simple timeline (dates) and the 2 y axes should be linear or logarithmic values. I have no problem creating the line series and the timeline axis.
My problem is when I am trying to implement the "time span bars". It's sort of a gantt chart combined with a line chart I guess. The bars represent data where each bar has a start date, and optionally an end date. I want each bar to start at the start date (aligned with the x axis) and end at the end date if available. If no end date is available, the bar should fill the entire chart until the right edge. I cannot figure out how to combine these time span bars with the line series. I have checked out the jsfiddle /8JhXv/1/ which is pretty close to what I am trying to achieve, except in that example, they are not on top of each other. Anyone who could give me some hints on how to put these on top of each other?
Look at some of the options here:
http://highcharts.uservoice.com/forums/55896-general/suggestions/804783-gantt-chart
Best option is not to use actual bars, but to use line series with lineWidth set to a high enough value to mimic bars visually.
You can try to use line series and columnrange (http://www.highcharts.com/demo/columnrange)

Categories