I'm trying to do a Highcharts chart using the datetime x-axis label to have my main labels at 1 month intervals. I would then like to use a minorTick on the week intervals. My data is 1 point per day. The problem I'm facing is my minorTicks are appearing as grid lines on the chart instead of as sub-ticks. I'd like them to be outside, or at least very small. How can I actually have these minor ticks as ticks, and not grid lines? I otherwise do not want any grid lines at all.
http://jsfiddle.net/590ktt7j/
$('#container').highcharts({
yAxis: {
gridLineWidth:0
},
xAxis: {
minorTickInterval: 7 * 24 * 3600 * 1000,
minorTickPosition:'outside',
minorTickLength:10,
type:'datetime',
min: Date.UTC(2014, 0, 1),
max: Date.UTC(2014, 11, 31),
labels: {
step: 1,
},
dateTimeLabelFormats: {
month: '%b',
year: '%Y'
}
},
// sample data, in reality goes 365 days of year
series: [{
data: [[1388984399000,100], [1388973600000,200],[1389060000000,300],[1389146400000,400],[1389232800000,500],[1389319200000,400],[1389405600000,200]]
}]
});
The grid lines are independent of the ticks. Add these 2 options to your xAxis config:
xAxis: {
minorTickWidth: 1, // this is by default 0 and is why you don't see ticks
minorGridLineWidth: 0, // this disables the grid lines
Fixed fiddle.
Related
I have two nvd3 graph on my site.
First graph with mouseover:
Code for first graph:
var chart = nv.models.multiBarChart()
.reduceXTicks(true) //If 'false', every single x-axis tick label will be rendered.
.rotateLabels(0) //Angle to rotate x-axis labels.
.showControls(true) //Allow user to switch between 'Grouped' and 'Stacked' mode.
.groupSpacing(0.1) //Distance between each group of bars.
;
d3.select('#chartSumme svg').datum([{ key: 'Row1', values:
[{ x:'2019', y: 328500},{ x:'2020', y: 8236000},{ x:'2021', y: 3162500},{ x:'2022', y: 2814500},{ x:'2023', y: 13377000},{ x:'2024', y: 17098500}]
}, { key: 'row2', values:
[{ x:'2019', y: 335550}...and so on]}
]).transition().duration(500).call(chart);
Second graph with mouseover:
Code for second graph:
var chart = nv.models.multiBarChart()
.reduceXTicks(true) //If 'false', every single x-axis tick label will be rendered.
.rotateLabels(0) //Angle to rotate x-axis labels.
.showControls(true) //Allow user to switch between 'Grouped' and 'Stacked' mode.
.groupSpacing(0.1) //Distance between each group of bars.
;
d3.select('#chart svg').datum([{ key: 'Row1', values:
[{ x:'2019', y: 0},{ x:'2020', y: 5000000},{ x:'2021', y: 0},{ x:'2022', y: 0},{ x:'2023', y: 0},{ x:'2024', y: 0}]
}, { key: 'row2', values:
[{ x:'2019', y: 2000}...and so on
},]).transition().duration(500).call(chart);
Question
As you can see no label is shown on the second graph with mouseover. First I thought there is an error in my code but then I found out that the label moved the position outside the graph:
Top is the first graph, then comes text (black box) and then the second graph with mouseover. The label from the second graph is shown on the first graph. How can I fix this that every label is shown in his graph?
Seems to be a bug, found this post and solution:
Line 742 add +window.scrollY
var positionTooltip = function() {
nv.dom.read(function() {
var pos = position(),
gravityOffset = calcGravityOffset(pos),
left = pos.left + gravityOffset.left,
top = pos.top + gravityOffset.top+window.scrollY;
I'd like to plot progress versus timeline on a 2 x-axis bullet chart.
See this JSFiddle for what I currently have: http://jsfiddle.net/ejhnnbk0/
Highcharts.chart('container3', {
xAxis: [{
type: 'linear',
},{
type: 'datetime',
opposite: true
}],
yAxis: {
plotBands: [{
from: 0,
to: 14,
color: '#f00'
}, {
from: 14,
to: 20,
color: '#ff0'
}, {
from: 20,
to: 29,
color: '#0f0'
}],
labels: {
format: '{value}'
},
title: null
},
series: [{
data: [{
y: 16,
target: 21
}]
}],
tooltip: {
pointFormat: '<b>{point.y}</b> (with target at {point.target})'
}
});
What I am looking to implement is something like this, where a date range is on the top x-axis, and a numeric range is on the bottom x-axis. I'd like the bullet to represent progress (in this case, 16 out of 24), and I'd like the target line to indicate the current date in the date range (in this case, somewhere before 02/12/2018).
Any thoughts would be appreciated.
Yes, it's possible.
Fist of all notice that your chart is inverted so you need to add another y axis (not x).
There're going to be 2 series: first that displays column (associated with first y axis) and second that displays target (associated with second y axis). In this case grouping has to be disabled (otherwise column and target won't be aligned properly).
Since there's no need to show target for the first series it's type can be changed to column:
series: [{
type: 'column',
data: [{
y: 16,
}]
}, {
yAxis: 1,
data: [{
target: Date.UTC(2018, 0, 7)
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/e847jztb/
I need to set time range for my hAxis to have minValue of 09:00 and maxValue 17:00 with increment of 1 hour (i.e. 9, 10, 11, 12, 13, 14, ... , 17)
Currently my data is formatted as H:m (for example: 09:35, 10:20)
var formatter3 = new google.visualization.DateFormat({pattern: 'H:m'});
formatter3.format(data,0);
And below are my options:
var options = {
curveType: "function",
title : '',
hAxis:{slantedTextAngle: 90,textStyle:{fontSize:8}},
colors : ['red','#3366CC', '#999999'],
vAxes: {
0: {logScale: false, format:'0.0000'},
1: {logScale: false}
},
hAxis: {
format: 'H:m',
minValue: new Date(null, null, null, 9, 0, 0),
maxValue: new Date(null, null, null, 17, 0, 0),
viewWindow:{min: new Date(null, null, null, 9, 0, 0),
max: new Date(null, null, null, 17, 0, 0)},
series: {
0: {targetAxisIndex:0, type: "line"},
1: {targetAxisIndex:0, type: "line"},
2: {targetAxisIndex:1, type: "bars"}
}
};
However , it is still not working. Please advise. Thanks!
Unfortunately, the minValue, maxValue, and baseline value are ignored for date and time values. I am not sure that this is a recent bug but I just noticed it a week ago. You might try to experiment with the viewWindow min and max, and the gridlines.count option to get the desired result. Or you might be able to convert all your date values to strings, if the values are evenly spaced, in which case axes will use your explicit values.
Another new feature that could work for you is that you can provide an explicit array of tick values, with a ticks: [...] option. In the current release of gviz, the formatting is done using your format option, and that should be enough for your needs. In an upcoming release, you can also specify the formatting of each tick value.
So it might be best to specify the times in your example using timeofday values like so:
hAxis: {
ticks: [[9, 0, 0], [10, 0, 0], [11, 0, 0], [12, 0, 0], ...]
}
I think you could do the same kind of thing with datetime values instead, if that's what your data values are.
Is it possible to have labels on datetime xAxis that correspond to dataGrouping?
For example I have dataGrouping such that data are grouped into days / weeks / months / year:
dataGrouping : {
groupPixelWidth: 250,
units : [
['day', [1]], ['week', [1]], ['month', [1]], ['year', [1]]
]
}
http://jsfiddle.net/CHR7F/2/
There is plenty of options in the highcharts api, but no one seems to achieve the same result as dataGrouping.
The most promising was:
xAxis: {
labels: {
step: 1
}
}
but still there are two weeks between ticks while data is grouped by months.
I found a solution with tickPositioner. It is still a workaround, but at least it works.
xAxis: {
tickPositioner: function(){
ticks = this.series[0].processedXData;
ticks.info = this.series[0].currentDataGrouping;
return ticks;
}
}
http://jsfiddle.net/CHR7F/3/
On thesame level as setting units you cna set datetimeLebelFormats, see: http://api.highcharts.com/highstock#plotOptions.area.dataGrouping.dateTimeLabelFormats
I am trying to create a column highchart that is stacked and grouped, but I only want the last few x-values to have multiple groups/stacks. The first x-values only have one group/stack.
To explain, I am charting historical values and then comparing optimistic and conservative forecast scenarios.
Here is my jsFiddle. A better way to do this?
series: [{
name: 'Thermal',
data: [5, 3, 4, 5],
stack: 'conservative',
color:'blue'
}, {
name: 'PV',
data: [3, 4, 4, 6],
stack: 'conservative',
color: 'red'
}, {
name: 'Thermal',
data: [0, 0, 0, 10],
stack: 'optimistic',
color: 'blue',
showInLegend: false
}, {
name: 'PV',
data: [0,0,0, 12],
stack: 'optimistic',
color: 'red',
showInLegend: false
}]
Basically highcharts is awesome and you can stack bars and give them relevant data on a point basis. I passed the following for my series array, with additional attrs to passs to the tooltip. See jsFiddle here:
series:[
{name:'Apples', color:'green', data:[{x:0, y:10, year: '2009', scenario: 'historic'}, {x:1, y:11,year: '2010', scenario: 'historic'} ]},
{name:'Oranges', color:'orange', data:[{x:0, y:2, year: '2009', scenario:'historic'}, {x:1, y:5, year: '2010', scenario:'historic'}]},
{name:'Apples',color:'green', data:[{x:1.75, y:12, year:'2011',scenario:'optimistic'}], showInLegend: false },
{name:'Apples', color:'green',data:[{x:2.25, y:3,year:'2011', scenario:'conservative'}], showInLegend: false },
{name:'Oranges',color:'orange', data:[{x:1.75, y:11, year:'2011',scenario:'optimistic'}], showInLegend: false},
{name:'Oranges',color:'orange', data:[{x:2.25, y:6, year:'2011',scenario:'conservative'}], showInLegend: false},
]