I've finally got my step-chart showing some results, but now I want to style it to my needs.
My code is as follow:
$(function () {
$('#urvalResultIntervalDevelopmentGraf').highcharts('StockChart',{
title: {
text: 'Chart'
},
rangeSelector : {
enabled: false
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
xAxis: {
type: 'datetime',
categories: ['2012-08-10', '2012-09-17', '2013-09-26', '2014-07-01', '2014-09-01', '2014-09-23'],
gridLineWidth:0
},
yAxis: {
title: {
text: 'Loss'
},
opposite: false,
gridLineWidth:0
},
tooltip: {
valueSuffix: ':-'
},
series: [
{name:'Gustafsson',step:true,data:[[1344549600,-119],[1347832800,-99],[1380146400,-48],[1404165600,-3],[1409522400,-74],[1411423200,-25]]},
],
});
});
How do I get my categories to show on the xAxis?
I'm guessing it cant match my dates (yyyy-mm-dd) to the ones in the data (timestamp), but I dont know how to handle it.
My jsfiddle is here:
http://jsfiddle.net/skorpion/akkxmke8/61/
You can't, like in docs: you can use categories or datetime xAxis. If you want specific format, then simply use xAxis.labels.formatter.
Related
I'm using react-highcharts to draw a relatively simple column chart for some work data. The bosses wanted it set up so that hiding an item on the legend will adjust the scale, even if the element is in the middle of the chart. I followed this fiddle from the highcharts forum to make my data vanish and reappear. Great, everything works! But I have a bug I can't pin down in my code.
Whenever I remove and then return the rightmost visible element, the second-from-the-right element loses its data label.
I'm reasonably certain that the issue lies in my HighCharts options object. Here it is below:
const highChartsOptionsObject= {
chart: {
type: "column",
style: {
fontFamily: "helvetica",
},
height: 300,
},
title: {
text: null,
},
xAxis: {
allowDecimals: true,
type: "category",
crosshair: true,
},
yAxis: {
min: 0,
title: {
text: getLabel(),
},
labels: {
formatter: getLabelString()
},
},
},
credits: {
enabled: false,
},
legend: {
enabled: true,
},
tooltip: {
formatter: function () {
return `
<b>${this.point.name}</b><br />
${
getTooltip();
}
`;
},
},
plotOptions: {
column: {
stacking: "normal",
pointPadding: 0.3,
borderWidth: 0,
dataLabels: {
enabled: true,
crop: false,
overflow: "none",
formatter: function () {
const labelString = "hard coded test";
return labelString;
},
},
},
series: {
cursor: "pointer",
events: {
legendItemClick: function () {
if (this.visible) {
this.setData([], false);
} else {
let elementData = getSeries()[this.index].data[0];
this.setData([{ ...elementData }], false);
}
},
},
},
},
series: getSeries(),
};
For reference, my other highcharts options are: immutable: true and allowChartUpdate: true
Happy to provide more information if someone thinks that something else is relevant, I just need to sanitize it somewhat to go on SO.
I did some googling, and I identified my issue finally. During transitions, the data labels on the columns overlap. If you have not set allowOverlap to true for data labels, then it will default to false. Since the transition causes overlap, highcharts will set one of the datalabels to be invisible/not show up.
This can be fixed easily enough by just setting:
dataLabels:{
allowOverlap: true
}
I am using Highcharts (Highstock) to render a chart on my page.
I am specifying a max and min value for my axis, but despite this I end up with blank space above my graph:
This is what my options look like currently:
var myChart = new Highcharts.Chart('container', {
rangeSelector:{
enabled: false
},
credits: {
enabled: false
},
legend: {
enabled: true,
},
yAxis: [{
opposite: false,
title: {
text: 'Gravity'
},
min: 1,
max: items.options.gravity_max + 0.01
},
{
opposite: true,
title: {
text: 'Temperature (C)'
},
min: items.options.temperature_min - 1,
max: items.options.temperature_max + 1
}],
navigator: {
enabled: false,
},
scrollbar: {
enabled: false
},
series: [{
name: 'Temperature',
data: items.temperature,
dataGrouping: {
enabled: true
},
yAxis: 1,
}, {
name: 'Gravity',
data: items.specific_gravity,
dataGrouping: {
enabled: true
}
},
{
name: 'OG',
data: items.original_gravity,
dataGrouping: {
enabled: true
},
dashStyle: 'dot',
color: '#000'
},
{
name: 'FG',
data: items.final_gravity,
dataGrouping: {
enabled: true
},
dashStyle: 'dot',
color: '#000'
}]
});
Here is a link to a fiddle with a simplified version of the data; http://jsfiddle.net/3eLrn61w/
What is causing that blank space above, and how do I get rid of it?
This is because Highcharts by default will try to start and end an axis on a label. Your current max is 1.071+0.01 (1.081). This is more than the label checkpoint of 1.075, which causes another label to be made.
You can fix this by doing (JSFiddle example):
yAxis: [{
// ...
endOnTick: false
}]
A few other options you might want to evaluate is the matching axis.startOnTick: false, possibly axis.maxPadding: 0 to avoid creating labels that are marginally needed and chart.alignTicks: false to free up the connection between the axis.
An alternative approach will also be to alter the tick positions (axis.tickPositions or axis.tickPositioner) so that they line up better with your min and max values.
Or your third option is to alter your handcoded maximum of the axis (max: items.options.gravity_max + 0.01), so that it does not create such a label gap, f.x. by being max: 1.074.
However, I think your best bet may be with the startOnTick and endOnTick options.
We are using Highcharts in our application using Angular JS. I want to set the formatting of amounts in a user culture specific formats which I am receiving from $locale service. After refering a link i got know that we can set values in below property for Highcharts:
Highcharts.setOptions({
lang: {
thousandsSep: ','
}
});
But while writing it in my code I am getting error that Highcharts is not defined, and also not working even if I set only lang property in the config object:
function extendBaseConfiguration(config) {
// these options are the default for all the charts. Pass in an object to override these values (or just change them once they're returned)
return $.extend(true, {
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false,
borderWidth: 0
},
plotOptions: {
column: {
grouping: false,
pointPadding: 0.2,
borderWidth: 0
}
},
lang: {
decimalPoint: $locale.NUMBER_FORMATS.DECIMAL_SEP,
thousandsSep: $locale.NUMBER_FORMATS.GROUP_SEP
},
tooltip: { pointFormat: '{series.name}: {point.y}'},
exporting: {enabled: true},
credits: {enabled: false}
}, config);
}
So how or where could I inject this Highcharts so that I can set it's value. Or is there any other technique by which i can make the amount user culture specific formatted.
Try to use a setOptions inside a controller, seems that options are applied.
Highcharts.setOptions({
lang: {
printChart: 'Aaaa',
thousandsSep: ','
}
});
$scope.chartConfig = {
options: {
chart: {
type: 'bar'
}
},
series: [{
data: [1000, 1500, 1200, 8000, 7000]
}],
title: {
text: 'Hello'
},
loading: false
}
Example: http://jsfiddle.net/Hjdnw/1426/
I cannot get highcharts to recognize my timestamps, they are in javascript date format.
Tried many different approaches, but cannot get it to work when both the data and time array's are seperate.
Fiddle: http://jsfiddle.net/SjL6F/
$(function () {
Highcharts.setOptions({
lang: {
thousandsSep: ''
}
});
$('#container').highcharts({
title: {
text: 'Temperature - Last 24 hours',
},
credits: {
enabled: false
},
subtitle: {
text: "Test Site",
x: -20
},
xAxis: {
type: 'datetime',
labels: {
enabled: true
},
categories: time,
tickInterval: 3600 * 1000,
dateTimeLabelFormats: {
day: '%e of %b'
}
},
yAxis: [{
title: {
text: 'Temperature (\u00b0C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
}],
tooltip: {
shared: true
},
series: [{
name: 'Temperature',
data: temp,
type: 'line',
tooltip: {
valueSuffix: ' C'
},
marker: {
enabled: false
}
}]
});
});
Highcharts just shows the raw javascript date value.
You are setting categories, which isn't datetime type for xAxis. Remove them, then concat time and temp arrays.
For example:
var concatenatedData = [];
$.each(time, function(i, e){
concatenatedData.push([parseInt(e), temp[i]]);
});
Demo:
http://jsfiddle.net/SjL6F/1/
Note: I have added parseInt, because Highcharts requires timestamps to be numbers, not strings.
I have a really simple spline chart and I'm trying to show on each tooltip the variation between the selected point and the previous point's value, measured in percentage variation. Basically this is the tooltip format I want to show
I've been looking for a solution but the only thing I came up with was this.
Hope it helps.
This are my chart options:
GeneralChartOptions = {
chart: {
renderTo: 'dummycontainer',
type: 'spline',
zoomType: 'x',
spacingRight: 20
},
credits: {
enabled: false
},
title: {
text: ''
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%b \'%y',
year: '%b'
}
},
yAxis: {
title: {
text: ''
},
plotLines: []
},
tooltip: {
xDateFormat: '%m-%Y',
shared: true,
crosshairs: true,
},
exporting: {
enabled: false
},
labels: {
formatter: function() {
return Highcharts.numberFormat(this.value, 2,".",",");
}
},
series: []
}
Thanks for the help, I really appreciate it.
How about look how they do and then try ?
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2
},
plotOptions: {
series: {
compare: 'percent'
}
}
demo