I have quite a large dataset displaying in a highcharts line chart. Tooltips are enabled but the displaying of the tooltip is quite erratic, especially when zoomed in.
You can see the dataset here: http://jsfiddle.net/ARfcB/2/
$(function () {
$('#container').highcharts({
chart: {
type: 'line',
zoomType: "x"
},
plotOptions: {
line: {
marker: {
enabled: true
},
animation: true
}
},
legend: {
enabled: true,
layout: "vertical",
align: 'right',
verticalAlign: 'middle'
},
tooltip: {
enabled: true,
shared: false
},
xAxis: {
type: "datetime"
},
yAxis: {
title: {
text: 'Up/Down'
},
labels: {
style: {
color: "blue"
}
},
min: 0,
max: 1,
tickInterval: 1,
categories: ['Down', 'Up']
},
credits: {
enabled: false
},
series: "large dataset on jsfiddle page"
});
});
The graph basically shows an up/down value for each series. When the mouse is hovering over the 'down' values, no tooltip displays.
When zooming in its even worse. Tooltips are displayed but for a point other than the one that is hovered over; and never for the 'down' values.
I'm wondering is this just because the dataset is quite large or is it an issue with highcharts itself.
Thanks in advance for the help.
Your data should be sorted via x ascending.
Related
I was wondering if there was a setting configuration or a way to fix the vertical Y-axis (.highcharts-axis-line) to prevent it from shifting or moving to the right every time I collapse and expand data in the hierarchy of the Gantt chart. I'm using High Charts JS: https://www.highcharts.com/gantt/demo
In this animated gif below, see what happens to the vertical right line in the middle every time you click on a dropdown arrow.
Highcharts.ganttChart('hcContainer', {
title: {
text: 'Title'
},
yAxis: {
uniqueNames: true
},
navigator: {
enabled: true,
liveRedraw: false,
series: {
type: 'gantt',
pointPlacement: 0.5,
pointPadding: 0.25
},
yAxis: {
min: 0,
max: 5,
reversed: true,
categories: []
}
},
scrollbar: {
enabled: true
},
rangeSelector: {
enabled: true,
selected: 0
},
series: [{
name: 'Level 1',
data: //rows
rows
}]
});
}
I have a requirement to display completion percentage on a bar chart with the start date for each of those project as line chart.
Now, for achieving this I have created a chart with dual y-axis.
1 - axis-1 shows progress with bar-chart. With max: 100 - avoid displaying values > 100.
2 - axis-2 shows start dates with a line chart
With this set up, I expect the bar to go all the way to the end when value is 100 and the secondary axis to adjust with in it. Instead the bar stops at about 3/4 of the way and line chart actually plots point beyond bar chart's 100%.
Following jsfiddle would display the prominently.
var completionChart = $('#Chart').highcharts({
title: {
text: 'Project QUAL Status - SD/uSD'
},
xAxis: {
categories: window.xCategories,
crosshair: true
},
yAxis: [{
title: {
text: '% Completion'
},
min: 0,
max: 100,
labels: {
enabled: false
},
gridLineWidth: 0
}, {
"title": {
"text": "Start Date"
},
type: 'datetime',
opposite: true
}],
tooltip: {
backgroundColor: 'rgba(255,255,255,1)',
borderRadius: 10,
borderWidth: 1,
borderColor: '#000000',
useHTML: true,
positioner: function () {
return { y: 317 };
},
shared: false,
style: {
padding: 5
}
},
plotOptions: {
bar: {
groupPadding: 0
},
series: {
dataLabels: {
enabled: true,
align: 'left',
overflow: 'none',
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
},
formatter: function () {
if (this.y <= 100)
return Math.round(this.y) + '%';
}
},
cursor: 'pointer'
}
},
credits: {
enabled: false
},
series: [{
index: 0,
name: 'Completion %',
data: completionpercent,
showInLegend: false,
type: 'bar'
}, {
data: startDate,
type: 'spline',
name: 'Start Date',
connectNulls: true,
color: '#2F4367',
lineWidth: 3,
yAxis: 1,
index: 1,
}]
});
The width of the chart is set and I can not change it without affecting the overall design of the application. Changing the width does help sometimes, but I want a solution that does not depend on the chart width to work.
You need to set the alignTicks property to false in order to achieve this.
Updated fiddle:
https://jsfiddle.net/jlbriggs/mup6vL8d/2/
Reference:
http://api.highcharts.com/highcharts/chart.alignTicks
Im using highchart for my website that requires a chart and It renders good (no problem at all) however, due to conflict requirements, I want the legend to be put on the bottom (below the chart, move it from the right side to the bottom side) and make it horizontally centered anyone knows how to make it? I tried this (refer below)
legend: {
enabled: true,
floating: true,
verticalAlign: 'bottom',
align:'right',
y:40
},
my overall chart code is
$('#chart_portfolio').highcharts({
chart: {
borderColor: '#ff0000',
width: null,
height: null
},
title: {
text: false,
x: -20 //center
},
legend: {
enabled: true,
floating: true,
verticalAlign: 'bottom',
align:'center'
},
xAxis: {
categories: portfolio_creation_date //this is an array
},
yAxis: {
title: {
text: false
},
plotLines: [{
value: 0,
width: 1,
color: '#ff0000'
}]
},
tooltip: {
shared: true,
crosshairs: true
},
series: [{
name: 'Future',
data: portfolio_future, //this is an array
color: '#0f00ff'
}, {
name: 'In Grace Period',
data: portfolio_ingrace_period, //this is an array
color: '#fda800'
}, {
name: 'Arrears',
data: portfolio_in_arrears, //this is an array
color: '#f40404'
}, {
name: 'Good standing',
data: portfolio_good_standing, //this is an array
color: '#4da74d'
}]
}); //end of highcharts
but sadly not working. Please refer below image for a sharp detail.
Simply remove options, to use default ones: http://jsfiddle.net/ctfcnsrL/1/
legend: {
// enabled: true,
// floating: true,
// verticalAlign: 'bottom',
// align:'center'
},
Try this One
legend: {
enabled: true,
floating: true,
verticalAlign: 'bottom',
align:'center',
},
http://jsfiddle.net/ctfcnsrL/
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
}
}
}
}
},
I am drawing a bar chart using highchart.js
I do not want to show the x - axis data values.
Can any one tell me which option does it?
full config:
var chart = new Highcharts.Chart({
chart: {
renderTo: container,
defaultSeriesType: 'bar'
},
title: {
text: null
},
subtitle: {
text: null
},
xAxis: {
categories: [''],
title: {
text: null
},
labels: {enabled:true,y : 20, rotation: -45, align: 'right' }
},
yAxis: {
min: 0,
gridLineWidth: 0,
title: {
text: '',
align: 'high'
}
},
tooltip: {
formatter: function () {
return '';
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
},
pointWidth: 35,
color: '#D9CDC1'
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [107]
}]
});
In HighCharts, bar graphs use inverted axes, so the bottom axis is really the Y axis. (See also "column" graphs where the graphic is rotated 90 degrees, in which case the bottom axis is the X axis.)
You need to add the following to the yAxis config
yAxis: {
labels: {
enabled: false
}
}
See the following for full example:
http://jsfiddle.net/k5yBj/433/
To hide labels on X-axis set the option labels: {enabled:false} like this:
.....
........
,
xAxis: {
categories: [''],
title: {
text: null
},
labels: {
enabled:false,//default is true
y : 20, rotation: -45, align: 'right' }
}
.....
....
To hide labels on y-axis set the option labels: {enabled:false} like this:
.....
.......
,
yAxis: {
min: 0,
gridLineWidth: 0,
title: {
text: '',
align: 'high'
},
labels:{
enabled:false//default is true
}
},
.........
......
Refer the documentation for futher understanding.
The above popular answer hides the labels only, this left tick marks for me which I also wished to remove.
In that case this works well
xAxis: {
visible: false
},
This is a simple solution to remove everything on the x/y axis for anyone interested. For more information please look here https://api.highcharts.com/highcharts/xAxis.visible
If hiding x data, then look at this
https://jsfiddle.net/anrilafosel/3g4z5kc3/
chart.xAxis[0].setCategories(newCategories);
for (i = 0; i < chart.series.length; i++) {
var newData = [];
for (j = 0; j < toggler_hc13.length; j++)
if (toggler_hc13[j] === 1)
newData.push(series_hc13[i].data[j]);
chart.series[i].setData(newData);
}