I'm looking for a way to set the background color of a group of columns in a stacked bar chart.
Our x-axis is showing all months of the past 2 years, but I need a way to visualise the months of 2015 a bit differently than the months of 2016. Instead of having a second x-axis I'd like to set the background colors of the first 12 months to a specific color and the remaining months in another color.
So in the following image everything to the left of the red bar should get a color.
Thanks in advance,
Yannick
Ok, I was actually already aware of the x-axis its plotbands property, but I never got it to work because I am displaying string values ( Januari, February, etc ).
What does work is the following:
xAxis: {
plotBands:[{
color: '#FCFFC5',
from: -1, // 0 isn't correctly filling up the most left column
to: 11.5 // 11 isn't correctly filling up the december column
}]
}
With the following result:
Hope it helps somebody in the future.
Related
I am putting together a barchart that shows 24 bars and how much production is done in each hour of the day.
Pretty simple.
I am using Highcharts.js version 4.0.1
However, I want to make this extra cool and make the current hour's bar have a different color (so you can see which bar you should look at for what hour).
So lets say:
you have 24 bars from left to right
It is 3PM in the afternoon
Therefore you want the "15th" bar in the series to be highlighted a certain color
Can anybody direct on this as I could not find this easily in the documentation.
Thank you.
You can just add a 'color' property to the series data. For example, the following has multiple points defining different colors, and a few that use the default bar color:
series: [{
data: [{y:10, color:'red'}, {y:20, color:'blue'}, {y:30, color:'#A84646'},
{y:40, color:'rgba(253, 134, 9, 0.7)'}, 50, 60]
}]
My xAxis is displaying the years with decimals depending on the width of the screen, so if its small it will display(2012,2013,2014...) but when I increase the width of the screen it will display (2012, 2012.1, 2012.2, 2012.3 ...) and the decimal places change depending of the width(2012, 2012.5, 2013 ...)
I know that tickPixelInterval has some effect on that but I don't know what value to use, I`ve tried:
xAxis: {
tickPixelInterval: 100, //also tried 10 and 1 and 1000 even null
crosshair: true
}
What can I do so the chart only displays the whole number of the years (2012, 2013, 2014) not depending on the screen size and NOT giving an specific width to the div that renders the chart?
http://jsfiddle.net/antonioj1015/ff2m2bsx/7/
tickPixelInterval will give a setting of how far apart ticks should be - that won't help in your situation, and will in fact make sure the problem persists.
What you want is just tickInterval, and set it to 1, since your year numbers are in increments of 1:
http://jsfiddle.net/ff2m2bsx/8/
if you won't always have increments of 1, another option is the allowDecimals property:
http://jsfiddle.net/ff2m2bsx/9/
References:
http://api.highcharts.com/highcharts#xAxis.tickInterval
http://api.highcharts.com/highcharts#xAxis.allowDecimals
A 3rd option is using a datetime x axis type, and setting the dates as your x axis values, and setting your tickInterval to one year.
http://api.highcharts.com/highcharts#xAxis.type
I have a Highstock chart that is populated dynamically. The chart is based on this example. One of the series is "column" series. When I call series.addPoint, the point object contains the color property, which is set to either red or green.
When there are just a few data points, the column colors are red or green, but when there is a lot of data, the colors of all bars switch to blue. Do you know how to prevent the color from switching to blue?
The other issue is the date in the tooltip shows Week of [Date] instead of just stating the Date. Not sure if the root cause of this issue is the same.
Thanks.
Probably it is relted with fact that in Highstock, dataGrouping is enabled, so data is grouped and have "no knowledge" which color should be. So I advice to disable dataGrouping.
http://api.highcharts.com/highstock#plotOptions.series.dataGrouping.enabled
In a candlestick graph i am building, the latest bar is cut-off partially such that even the bar is not visible. Thus it's difficult to judge the high and low by seeing the bar.
I'm unable to post a pic now but it's like the last rectangle being cut in half.
I'm tried a lot of options in the api but can't figure out why this is not showing correctly. The chart margin and axis offset options havent' helped. Is there a way i can set the series margin from the plot area so that it displays right.
For this problem, the best solution is to insert a dummy series which should be hidden from every aspect of the chart. So try this, insert a dummy series from the last point of the data series to some extra buffer(as per need). Then remove this series from the chart by explicitly removing it from the legends (using showinlegend),chart(setting linewidth to 0) and from tooltip by having a check in formatter. Hope this solves your problem.
I had the same problem and couldn't figure it out, because no matter how I changed the xAxis.maxPadding or changed the xAxis.max, it would always cut off the last candlestick when I clicked on the range selector.
To solve it, (hack) I just added an extra data point in my series and set it 1 day past the last day and set all values to null.
Without any code or a pic, it's hard to tell the problem, but it sounds like you need to use the max padding option. http://api.highcharts.com/highcharts#xAxis.maxPadding. You may also want to look at endOnTick as well as whether you are setting max on the axis.
long shot question here!
My chart has 3 views, in one of the views it shows the days of the month (1-31 etc)
My client wants to the highlight the Y-axis gridLines of days that are weekends, to be a darker color.
The other caveat is, I can't specify the stylistically different gridLines when creating the graph, only when I redraw the graph.
(Because this view isn't the initially view and I am redrawing me graph as the user navigates through the views.
ATM between redraws I am removing the old series, adding a new one, changing the chart title etc
Does anyone know how to do this?
While I think that #mg1075's solution of using the plot bands is the best way of doing this, if you wanted to get really crazy you can modify the gridlines through the dom. For example, make every other line red:
$.each($('.highcharts-grid path'),
function(i, elem) {
if (i % 2 != 0)
{
$(elem).attr('stroke','red');
}
});
});
Fiddle here.