I have a product where our customers can choose a date range. For one of our tools, we make them an area chart with highcharts of their data.
I've noticed that when the area chart has one data point on the x axis, no graph is shown. Here's an example in JSFiddle:
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/area-basic/
Code below for posterity:
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
text: 'US and USSR nuclear stockpiles'
},
subtitle: {
text: 'Source: <a href="http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">'+
'thebulletin.metapress.com</a>'
},
xAxis: {
allowDecimals: false,
labels: {
formatter: function() {
return this.value; // clean, unformatted number for year
}
}
},
yAxis: {
title: {
text: 'Nuclear weapon states'
},
labels: {
formatter: function() {
return this.value / 1000 +'k';
}
}
},
tooltip: {
pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
},
plotOptions: {
area: {
pointStart: 1940,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
series: [{
name: 'USA',
data: [10104 ]
}, {
name: 'USSR/Russia',
data: [16000]
}]
});
});
The weird part about this: the chart is empty, but when you hover over the chart, you can see the data points. Is there any way to make the points visible without hovering over them? Perhaps an option that gives ticks a width?
Thanks!
In your example when I remove all but the last datapoint I see what you are talking about. This is because in this example the marker was not enabled. To do this change it to true:
plotOptions: {
area: {
pointStart: 1940,
marker: {
enabled: true, //this was false.
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
Related
Is it possible to make the outliers color transition from light to dark? I am using box plot chart from Highcharts and want my outliers to render from light red to dark red. Any outliers above 100k needs to display in a darker red.
https://jsfiddle.net/samwhite/9amz3y7x/1/
Highcharts.chart('container', {
chart: {
type: 'boxplot',
zoomType: 'xy'
},
title: {
text: 'Boxplots for Buzz'
},
credits: {enabled: false},
legend: {
enabled: false
},
xAxis: {
categories: categories,
title: {
text: 'Stock Symbol'
}
},
yAxis: {
title: {
text: 'Buzz'
},
},
plotOptions: {
boxplot: {
fillColor: 'red',
// medianColor: '',
// stemColor: '',
// whiskerColor: ''
}
},
series: [{
name: 'Buzz',
data: box_dat,
color: 'red',
}, {
name: 'Outliers',
color: 'red',
type: 'scatter',
data: outliers,
marker: {
fillColor: 'white',
lineWidth: 1,
lineColor: 'red'
},
tooltip: {
pointFormat: 'Observation: {point.y}'
}
}]
});
You should use zones or color axis, but they only change point.color, which, in your case is replaced by marker.lineColor. Add the below plugin to allow changing line color by zones.
(function(H) {
H.wrap(H.Point.prototype, 'getZone', function(proceed) {
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
this.options.marker = {
lineColor: this.color
};
});
}(Highcharts));
Live demo: https://jsfiddle.net/BlackLabel/sc2hk1b9/
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
I have a Highstock chart displaying 3 data series. The series have the correct values but the line with higher values is not displayed above the other two, but between them, and this changes randomly.
Here you can see three spots of the same chart:
spot one spot two spot three
I've tried changing the data series, changing the period. This only happens when I have three data series. I have charts with two and four data series and they work well.
This is the chart config that I'm using.
Highcharts.stockChart(container, {
chart:{
zoomType: 'x',
events: {
load: updateLegendLabel
}
},
title: {
text: graficoData.nombre
},
credits: {
enabled: false
},
exporting: {
buttons: {
contextButton: {
menuItems: buttons
}
}
},
rangeSelector: {
enabled: showRangeSelectors,
buttons: [
{
type: 'day',
count: 1,
text: '1d'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 3,
text: '3m'
}, {
type: 'all',
text: 'Todo'
}],
buttonTheme: {
width: 60
},
selected: 2
},
xAxis: {
events: {
afterSetExtremes: updateLegendLabel
}
},
yAxis: {
resize: {
enabled: true
},
},
plotOptions: {
series: {
compare: 'percent',
showInNavigator: true
}
},
navigator: {
height: 30,
margin: 2
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> <br/>',
valueDecimals: 2,
split: true,
valueSuffix:' ' + unidad
},
responsive: {
rules: [{
condition: {
maxHeight: '100%'
},
chartOptions: {
rangeSelector: {
inputEnabled: false
}
}
}]
},
series: series
});
I expect that when the yAxis value is higher, the line get displayed above, and when the value is lower the line get displayed below, since they share the same scale.
Thanks in advance for your help.
I have multiple series in a chart! This series are added according to user needs.
The tooltip tool shows the label of a series even though my mouse is closer to another series.
here is an image showing the problem:
https://i.imgur.com/eXeVtH7.png
Highcharts.chart('container', {
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime'
},
tooltip: {
snap: 2,
shared: true
}
yAxis: yAxis,
navigator: {
adaptToUpdatedData: false,
enabled: true,
series: {
type: 'areaspline',
fillOpacity: 0.5,
dataGrouping: {
enabled: false
}
}
},
chart: {
type: 'spline'
},
legend: {
enabled: false
},
plotOptions: {
series: {
showInNavigator: true,
stickyTracking: false
},
spline: {
marker: {
enabled: false
}
}
},
series: dataFrame
});
Highcharts.chart('container', {
title: {
text: null
},
legend: {
enabled: false
},
xAxis: [{
title: {
text: null
},
visible: false
}, {
title: {
text: '5 Meter Sprint'
},
opposite: false,
visible: true
}],
yAxis: [{
title: {
text: null
},
visible: false
}, {
title: {
text: null
},
opposite: true,
visible: false
}],
series: [{
name: null,
type: 'bellcurve',
xAxis: 1,
yAxis: 1,
intervals: 4,
baseSeries: 1,
enableMouseTracking: false,
}, {
name: 'Data',
data: data,
visible: false,
}]
});
jsfiddle: https://jsfiddle.net/0b24mwfs/40/
So I've been try to do a highly customized bell curve chart with HighCharts, right now I'm able to disable most of the stuff expect the xAxis and the bell curve itself, but How to render a point on the curve by passing it a specific value?
Update:
Seems like it called marker on highcharts, by default it is rendering all the markers along the curve, is there a way to let it render only one by specifying the value?
You can update generated points in load event: https://jsfiddle.net/BlackLabel/g1qhj8bv/1/
chart: {
events: {
load: function () {
this.series[0].points[10].update({
marker: {
enabled: true,
fillColor: 'white',
radius: 6,
lineWidth: 2,
lineColor: 'red'
}
});
}
}
},
The only problem is to find index of a point you need: points[10]. I think you can simply loop over them, until you find the needed one, then update.
I have a Highchart in my web application. In the browser it displays normally which is as follows:
But when I export the chart it flips the axis and I end up with the following image:
Following are the options I am using for my Highchart.
var options = ({
chart: {
renderTo: 'chartDiv'
},
credits: {
enabled: false
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
tickInterval: 7200 * 10000,
allowDecimals:false,
labels: {
format: '{value}',
rotation: 30,
align: 'left',
},
title: {
text: 'Date'
}
},
yAxis: [{
title: {
text: 'No. of rings'
},
min: 0
},
{ // Secondary yAxis
gridLineWidth: 0,
min: 0,
title: {
text: 'Accumulative Rings',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} Ring',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true,
}
],
tooltip: {
shared: true
},
legend: { backgroundColor: 'rgba(211,223,181,0.6)', layout: 'vertical', align: 'left', verticalAlign: 'top', floating: true, borderWidth: 0, x: 70 },
plotOptions: {
spline: {
marker: {
enabled: false
},
}
}
});
I have three series in my chart, the bar chart can have 0 values.
The data is coming from an ajax service, which I put in an array and then add to chart as follows:
chart.addSeries({
type: 'bar',
name: 'Rings per day ',
data: barData,
pointInterval: mainInterval
});
chart.addSeries({
type: 'spline',
name: 'Accumilative rings ',
data: spline1Data,
yAxis: 1,
});
chart.addSeries({
type: 'spline',
name: 'Planned Progress ',
data: spline2Data,
yAxis: 1,
color: "#FF0000"
});
What's wrong with my chart?
bar series is the key part. bar series forces chart to be rendered flipped. In your case use column. It displays differently on your browser because, most probably, you have an old version of Highcharts.