can you tell me how to avoid this overlapping issue using the Highcharts libraries?
Here the JsFiddle
You see there are 2 column overlapped, and even the tickers label are overlapped!
chart: {
type: 'column'
},title: {
text: 'title'
},plotOptions: {
column: {
stacking: 'normal',
minPointLength: 2
}
},xAxis: {
type: 'datetime',
title: {
text: 'date'
},
tickPositions: categoriesGrafico,
labels:{
rotation: -90,
formatter:function(){
return Highcharts.dateFormat('%d/%m/%Y',this.value);
}
},
reversed: true,
dateTimeLabelFormats: {
day: '%d/%m/%Y',
}
},yAxis: {
title: {
text: 'value'
},
min: 0
},
series: seriesGrafico
});
I've read a lot of posts on the web, and tried a lot of options, but without a solution.
Thanks you so much
Because you have two tick so close. The solution can be setting pointRange or modify tickPositions.
Related
I am trying to create a scheduling Gantt. I've based this gantt off of the Resource Management example. Lots of good stuff so far! I'm having a few problems, which I will make separate posts for.
The next problem that I'm dealing with is that I have many rows of data in the Gantt chart. I've added vertical scrolling capabilities, but the headers above the chart disappear when scrolling. I've found examples where the headers don't scroll, but am unable to determine what in the code keeps the headers in place.
Here's the fiddle: https://jsfiddle.net/eddiem9/h9qw5rsj/15/
chart = Highcharts.ganttChart('container', {
series: series,
scrollablePlotArea: {
minHeight: 700
},
plotOptions: {
series: {
color: '#FF0000'
}
},
scrollbar: {
enabled: true
},
title: {
text: 'Irrigation Schedule',
style: {
color: '#000000',
fontWeight: 'bold',
fontSize: '24px'
}
},
tooltip: {
pointFormat: '<span>Schedule: {point.schedule}</span><br/><span>From: {point.start:%m/%d %H:%M}</span><br/><span>To: {point.end:%m/%d %H:%M}</span>'
},
xAxis:
[{
labels: {
format: '{value:%H}' // hour of the day (not working)
},
tickInterval: 1000 * 60 * 60, // HOUR
}, {
labels: {
format: '{value:%B %e}' // day name of the week
},
tickInterval: 1000 * 60 * 60 * 24, // Day
}
],
yAxis: {
type: 'category',
grid: {
columns: [{
title: {
text: 'Pump'
},
categories: map(series, function (s) {
return s.PumpName;
})
}, {
title: {
text: 'Zone'
},
categories: map(series, function (s) {
return s.IrrigationZoneName;
})
}, {
title: {
text: 'Status'
},
categories: map(series, function (s) {
return s.CurrentStatus;
})
}
]
}
}
})
Thanks in advance!
Eddie
You were so close to making it work, you just had a small mistake. scrollablePlotArea object must be defined inside the chart object.
Demo: https://jsfiddle.net/BlackLabel/bu5hfxm1/
chart: {
scrollablePlotArea: {
minHeight: 700
}
},
API: https://api.highcharts.com/gantt/chart.scrollablePlotArea
EDIT:
After digging into the issue I think that a better option will be use the scrollbar for the yAxis than scrollablePlotArea.
Demo: https://jsfiddle.net/BlackLabel/s013uqa5/
stock module is required
Example of the options config for yAxis:
scrollbar: {
enabled: true,
showFull: false
},
max: 5,
API: https://api.highcharts.com/highstock/yAxis.scrollbar
I want create a bar line graphs with navigator,range selector, y axis from both side and graph sector. I implement it using Highcharts.Chart() but it's x-axis not comes properly. when i create x-axis properly after change categories to ["2017-2-3'] then range selector goes to 1970 (default value) so i convert date to milliseconds. Now in the x-axis have unwanted values. I want to show only x-axis values which shows in category array. currently 1m,3m,6m not worked i think it happen because of this x-axis issue.
jsfiddle : http://jsfiddle.net/m05sgk3j/1/
$(document).ready(function() {
var categories = [1551420000000,1549000800000,1546322400000,1543644000000,1541052000000, 1538373600000, 1535781600000,1533103200000, 1530424800000, 1527832800000, 1525154400000, 1522562400000, 1519884000000, 1517464800000,1514786400000];
new Highcharts.Chart({
chart: {
renderTo: 'container'
},
title: {
text: 'In March 2019, the average CT_HOURS is 10.55 hours.'
},
rangeSelector: {
enabled: true,
buttons: [{
type: 'millisecond',
count: 1,
text: '1m'
}, {
type: 'millisecond',
count: 3,
text: '3m'
}, {
type: 'millisecond',
count: 6,
text: '6m'
}, {
type: 'all',
text: 'All'
}],
selected: 4,
inputDateFormat: '%Y-%m-%d',
inputEditDateFormat: '%Y-%m-%d'
},
navigator: {
enabled: true,
xAxis: {
tickInterval: 15,
labels: {
/* formatter: function() {
return categories[this.pos]
} */
}
}
},
scrollbar: {
enabled: true
},
xAxis: {
// categories: categories,
type: 'datetime',
tickInterval : 2,
// tickInterval: {_tickInterval},
/* labels: {
step:10
}, */
/* maxZoom: 30 * 24 * 3600000, */
dateTimeLabelFormats : {
day: '%Y-%m'
}
// crosshair: true,
// minRange: 1
},
yAxis: [{ // Primary yAxis
labels: {
format: '{value}h',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'AVERAGE CT_HOURS',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'REQUEST COUNT',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
series: [{
name: 'REQUEST COUNT',
type: 'column',
yAxis: 1,
data: [
[1551420000000, 49.9],
[1549000800000, 71.5],
[1546322400000, 106.4],
[1543644000000, 129.2],
[1541052000000, 144.0],
[1538373600000, 176.0],
[1535781600000, 135.6],
[1533103200000, 148.5],
[1530424800000, 49.9],
[1527832800000, 71.5],
[1525154400000, 106.4],
[1522562400000, 129.2],
[1519884000000, 144.0],
[1517464800000, 176.0],
[1514786400000, 135.6]
],
tooltip: {
valueSuffix: ''
}
}, {
name: 'AVERAGE CT_HOURS',
type: 'spline',
data: [[1551420000000, 56.6],
[1549000800000, 46.3],
[1546322400000, 32.8],
[1543644000000, 43.4],
[1541052000000, 40.8],
[1538373600000, 43.0],
[1535781600000, 43.1],
[1533103200000, 44.6],
[1530424800000, 45.7],
[1527832800000, 27.8],
[1525154400000, 39.9],
[1522562400000, 29.3],
[1519884000000, 27.9],
[1517464800000, 27.4],
[1514786400000, 17.6]],
tooltip: {
valueSuffix: 'h'
}
}]
});
});
Just comment the tickInterval for the xAxis
//tickInterval : 2,
Fiddle
First of all, you have unsorted data. If you want to invert your data, use reversed option.
Also, the rangeSelector and the tickInterval are wrong. If you use datetime axis, then the basic unit is one millisecond.
However, to show dates only from the categories array, use the tickPositions option and formatter function for labels:
xAxis: {
reversed: true,
minRange: 1,
type: 'datetime',
tickPositions: categories,
labels: {
formatter: function() {
return Highcharts.dateFormat('%Y-%m', this.value);
}
}
},
Live demo: http://jsfiddle.net/BlackLabel/a6Lphq4k/
API Reference:
https://api.highcharts.com/highcharts/xAxis.reversed
https://api.highcharts.com/highcharts/xAxis.tickPositions
https://api.highcharts.com/highcharts/xAxis.labels.formatter
(1) First always make sure that you are injecting timestamps in your categories, and formatting them in :
(1-1) xAxis.labels.formatter function [for x axis labels]
(1-2) navigator.xAxis.labels.formatter function [for navigation labels format)
(2) Second make sure that you are clearing your (xAxis.categories) if you push data into it. because highcharts don't sort your array. if you just assign new array that's ok.
(3) Note : Based on values on your categories array, navigation gets some values like xAxis min and xAxis Max. when you change your data these values remain and that's why your navigation collapses. so when changing data make sure to update. you can use 0 for minimum of navigator and categories.length for maximum value of navigator.
you can access updated values also in dataMin and dataMax.
Hope this answer help you.
I'm having a problem with Highcharts drawing points that have no data attached to them. The chart is a column chart with drilldown, showing an average "time" per week on the top level, with a drilldown displaying the actual value per case for the selected week.
My problem is this: When I drill down into a certain week, cases that do not exist are still displayed on the chart if they exist between two existing case IDs.e.
Consider the data being passed for week 6: [[272, 25.07][297, 500.54]], only two cases exist: 272 and 297. However, Highcharts is giving me this:
https://i.stack.imgur.com/MpABB.png
This is the code for the chart itself:
Highcharts.chart('DrilldownChart', {
chart: {
type: 'column'
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
type: "",
labels: {
rotation: 90
},
},
yAxis: {
title: {
text: ''
}
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
legend: {
enabled: false
},
plotOptions: {
column: {
minPointLength: 0
},
series: {
borderWidth: 0,
dataLabels: {
enabled: false,
format: '{point.y:.1f}',
rotation: 270
}
}
},
tooltip: {
pointFormat: '<span style="color:{#000}"></span>{point.y:.2f}<br/>'
},
series: MainDataArray,
drilldown: {
series: DrilldownDataArray,
}
});
Does anyone know how to stop it from drawing the labels/columns between points with actual data?
Thanks!
You just need to convert the x values from your array to String type, then they would be treated as a category name instead of category indexes. In order to convert it, you can use Array.map() function just like that:
var drilldownSeries = [{
id: 'One',
data: [[272, 25.07], [297, 500.54]].map(elem => {
return [elem[0].toString(), elem[1]]
})
}]
However, before that please make sure that your xAxis.type is set to 'category', because I noticed that in your code there is an empty string assigned to type field.
Here is the example which shows how to achieve described effect:
https://jsfiddle.net/8h03urrr/
UPDATE AGAIN - Now I added yAxis property but it's showing nothing:
$('#highchart').highcharts({
chart: {
type: 'line'
},
title: {
text: 'My Data'
},
subtitle: {
text: 'By Day'
},
xAxis: {
categories: date_arr
},
yAxis: [{title: {text: 'PV'}},
{title: {text: 'UPV'}},
{title: {text: 'PPV'},opposite: true}
],
plotOptions: {
line: {
dataLabels: {
enabled: false
},
enableMouseTracking: true
}
},
series: [{
name: 'PV',
data: pv_arr,
yAxis:1
},
{
name:'UPV',
data:upv_arr,
yAxis:2
},
{
name:'PPV',
data:ppv_arr,
yAxis:3
}
]
});
It will show nothing - literally nothing, not even the title of the chart. But a blank area.
UPDATE - Now I am using this but still not working...
$('#highchart').highcharts({
chart: {
type: 'line'
},
title: {
text: 'My Data'
},
subtitle: {
text: 'By Day'
},
xAxis: {
categories: date_arr
},
yAxis: [{title: {text: 'PV'}},
{title: {text: 'UPV'}},
{title: {text: 'PPV'},opposite: true}
],
plotOptions: {
line: {
dataLabels: {
enabled: false
},
enableMouseTracking: true
}
},
series: [{
name: 'PV',
data: pv_arr
},
{
name:'UPV',
data:upv_arr
},
{
name:'PPV',
data:ppv_arr
}
]
});
It's like this (the new labels are ready but the metric is still in the old way):
-- original post --
I am using HighCharts to show some data for a website visitors
In this picture above. the Blue and Dark Blue lines are very big because they are page visits. And the Green one is the Page Views/Unique Page Views. That is a very small number comparing to the visit number. How can I set up a second y-axis system as Microsoft Excel can do?
BTW, the dates on the x-axis is too crowded, is there anyway to make them stay in one line automatically? (sometimes there are only 7 days data)
Thanks
You can define array of yAxis and then set index of axis in each serie.
yAxis: [{
title: {
text: 'yAxis 1',
},
}, {
title: {
text: 'yAxis 2',
},
opposite: true
}],
Example:
- http://www.highcharts.com/demo/combo-multi-axes
You can also disable align ticks by option alignTicks.
chart: {
alignTicks: false
},
refer this Fiddle ,It has three yAxis to show three stacked series
for label relted issues ,you can use tickInterval to show date after an interval
xAxis: {
tickInterval: 24 * 3600 * 1000// One day (change here whatever you prefer)
}
If your labels collapsed with each other you can use staggerLines property in xAxis to show alternate label one step down.
I have created a high chart but would like to have a similar voting style to youtube; with positive vs negative. My issue is getting the bar to stay the full width of the graph, I know percentages can fix this but I want whole numbers.
http://jsfiddle.net/u6H3b/
$(function () {
$('#container').highcharts({
chart: {
type: 'bar',
marginLeft:0
},
title: {
text: 'votes'
},
credits: {
enabled: false
},
xAxis: {
categories: ['Apples'],
title: {
enabled: false
}
},
exporting: {
enabled: false
},
yAxis: {
min: 0,
max:23,
title: {
enabled: false },
gridLineColor: '#fff',
lineColor: '#fff'
},
legend: {
backgroundColor: '#FFFFFF',
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'Yes',
data: [20]
},{
name: 'No',
data: [3]
}]
});
});
One option is to use 'endOnTick':
yAxis: {
endOnTick: false,
http://jsfiddle.net/f3eFd/
If you want the end tick (23) to show, you could also add:
tickInterval:23,
http://jsfiddle.net/bLDpg/
If you really want to get fancy, you can define each tick you need. In the following code, it prints ticks at 0, 3 and at 23.
tickPositioner: function () {
var positions = [0, 3, 23];
return positions;
},
http://jsfiddle.net/aSHz3/
I think, all you need to set is endOnTick: false and maxPadding: 0, see: http://jsfiddle.net/u6H3b/1/
The only problem is that last tick is not displayed, if this is issue for you, use tickPositioner as suggested by SteveP.