Force min/max in Highcharts and avoid 0 for min - highcharts

I found many topics about how to force min but it still doesn't work in my case. This is my last chance. I use the latest Highcharts 4.0.1 version.
Here is my fiddle: http://jsfiddle.net/gu8Bs/. I want to avoid the 0 and force 1 instead because my chart is a ranking evolution. No matter the values are.
$('#chart').highcharts({
xAxis: {
labels: {
rotation: 300,
y: 20
},
categories: ["2014-03-24", "2014-03-25", "2014-03-26", "2014-03-27", "2014-03-28", "2014-03-29", "2014-03-30", "2014-03-31", "2014-04-01", "2014-04-02", "2014-04-03"]
},
yAxis: {
type: 'linear',
allowDecimals: false,
reversed: true,
min: 1,
max: 300
},
series: [{
"data": [270, 251, 246, 2, 3, 6, 13, 19, 30, 42, 57]
}, {
"data": [69, 64, 64, 1, 2, 4, 8, 11, 15, 16, 25]
}],
credits: {
enabled: false
},
exporting: {
enabled: false
}
});
min: 1 shows 0.

Another solution is just to set tickPositions, like this: http://jsfiddle.net/gu8Bs/5/
yAxis: {
type: 'linear',
allowDecimals: false,
reversed: true,
tickPositions: [1, 50, 100, 150, 200, 250, 300]
},

Add tickPositioner
yAxis: {
type: 'linear',
allowDecimals: false,
reversed: true,
min: 1,
max: 300,
tickPositioner: function () {
var positions = [],
tick = Math.floor(this.dataMin),
increment = Math.ceil((this.dataMax - this.dataMin) / 6);
for (; tick - increment <= this.dataMax; tick += increment) {
positions.push(tick);
}
return positions;
}
},
DEMO
EDIT
You can change it in these lines
tickPositioner: function () {
var positions = [],
// set starting position
tick = 1; //Math.floor(this.dataMin),
// set step size
increment = 50; //Math.ceil((this.dataMax - this.dataMin) / 6);
for (; tick - increment <= this.dataMax; tick += increment) {
if(tick == 1)
tick
positions.push(tick);
if(tick == 1)
tick = 0;
}
return positions;
}
DEMO 2

Related

How to Increase minimum point value and the color of series in advanced accessible charts in Highcharts by making it traverse

I need to change the series color to uniformly be green and when the data range is high ,say I have data from Oct 2018 to Sep 2021 for one data point and the other data is Aug 20 2021 to Aug 22 2021,
the latter looks very small and barely noticeable . At this instance I want to set the minimum width and shape to the smallest data point in advanced accessible graph. How do I do that.
Any suggestion is appreciated
Image1
Image2
Code:function DrawRemoteRequestPSRChart(seriesData, yAxisCategories) {
// Define custom series type for displaying low/med/high values using boxplot as a base
Highcharts.seriesType('lowmedhigh', 'boxplot', {
keys: ['low', 'high'],
tooltip: {
}
}, {
// Change point shape to a line with three crossing lines for low/median/high
// Stroke width is hardcoded to 1 for simplicity
drawPoints: function () {
var series = this;
this.points.forEach(function (point) {
var graphic = point.graphic,
verb = graphic ? 'animate' : 'attr',
shapeArgs = point.shapeArgs,
width = 0,
left = Math.floor(shapeArgs.x) + 0.5,
right = left + width,
crispX = left + Math.round(width / 2) + 0.5,
highPlot = Math.floor(point.highPlot) + 0.5,
// Sneakily draw low marker even if 0
lowPlot = Math.floor(point.lowPlot) +
0.5 - (point.low === 0 ? 1 : 0);
if (point.isNull) {
return;
}
if (!graphic) {
point.graphic = graphic = series.chart.renderer
.path('point')
.add(series.group);
}
graphic.attr({
stroke: point.color || series.color,
"stroke-width": 4
});
graphic[verb]({
d: [
'M', left, highPlot,
'H', right,
'M', left, lowPlot,
'H', right,
'M', crispX, highPlot,
'V', lowPlot
]
});
});
}
});
// Create chart
var chart = Highcharts.chart('container', {
chart: {
type: 'lowmedhigh',
inverted: true
},
credits: {
enabled: false
}, legend: {
enabled: false
},
title: {
text: 'Daily company fruit consumption 2019'
},
tooltip: {
shared: false, formatter: function () {
return this.point.category + ', ' + new Date(this.point.options.low).toGMTString() +
' to ' + new Date(this.point.options.high).toGMTString() + '.';
}
},
accessibility: {
point: {
descriptionFormatter: function (point) {
var ix = point.index + 1,
category = point.category,
from = new Date(point.low),
to = new Date(point.high);
return ix + '. ' + category + ', ' + from.toDateString() +
' to ' + to.toDateString() + '.';
}
},
typeDescription: 'Low, high. Each data point has a low and high value, depicted vertically as small ticks.' // Describe the chart type to screen reader users, since this is not a traditional boxplot chart
},
xAxis: [{
accessibility: {
description: 'Months of the year'
},
categories: ['January', 'February'],
crosshair: true
}],
yAxis: {
type: 'datetime'
},
responsive: {
rules: [{
condition: {
minWidth: 550
},
chartOptions: {
xAxis: {
categories: ['Jan', 'Feb']
}
}
}]
},
plotOptions: {
series: {
stickyTracking: true,
whiskerWidth: 5
}
},
series: [{
name: 'Plums', color: 'lime',
data: [
[1416528000000,
1417478400000
],
[
Date.UTC(2014, 10, 1, 10, 16, 58),
Date.UTC(2014, 12, 2, 10, 16, 58)
]]
}, {
name: 'Bananas',
color: 'blue',
data: [
[Date.UTC(2014, 10, 21, 10, 16, 58),
Date.UTC(2014, 11, 22, 10, 16, 58)
],
[
Date.UTC(2014, 10, 15, 10, 16, 58),
Date.UTC(2014, 12, 12, 10, 16, 58)
]
]
}, {
name: 'Apples',
color: 'red',
type: 'scatter',
marker: { symbol: 'diamond' },
data: [
[Date.UTC(2014, 10, 20, 10, 16, 58),
Date.UTC(2014, 11, 27, 10, 16, 58)
],
[
Date.UTC(2014, 10, 24, 10, 16, 58),
Date.UTC(2014, 10, 24, 12, 17, 58)
]
]
}]
});
// Remove click events on container to avoid having "clickable" announced by AT
// These events are needed for custom click events, drag to zoom, and navigator
// support.
chart.container.onmousedown = null;
chart.container.onclick = null;
//Highcharts.chart('GraphHere', {
// chart: {
// type: 'xrange'
// },
// credits: {
// enabled: false
// },
// legend: {
// enabled: false
// },
// tooltip: {
// pointFormat: ''
// },
// title: {
// text: 'Mass Remote Request PSR'
// },
// xAxis: {
// type: 'datetime'
// },
// yAxis: {
// title: {
// text: ''
// },
// categories: yAxisCategories,
// min: 0,
// max: 5,
// scrollbar: {
// enabled: true
// },
// reversed: true
// },
// series: seriesData
//});
}
It would be best to add a point there using a scatter series, disable or hide the point you want to otherwise show in chart.event.load and redraw the chart.
chart: {
events: {
load: function() {
var chart = this;
chart.series[0].update({
borderColor: 'green',
pointWidth: 0,
}, false);
chart.redraw();
}
}
},
Demo:
https://jsfiddle.net/BlackLabel/sx2u0epw/
API References:
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/highcharts/series.scatter

how to show specific tick value on highchart gauge?

I want to show the value between the green and yellow and red plotBands.
in the example attached i want to show the values 135,172 (where the color are changing)
yAxis: {
min: 0,
max: 200,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: 'km/h'
},
plotBands: [{
from: 0,
to: 135,
color: '#55BF3B' // green
}, {
from: 135,
to: 172,
color: '#DDDF0D' // yellow
}, {
from: 172,
to: 200,
color: '#DF5353' // red
}]
},
Working Example In JSFiddle
You can use tickPositioner function to define which ticks will be shown on the chart:
tickPositioner: function() {
var plotBands = this.options.plotBands,
ticks = [],
i = 0;
for (i; i <= 200; i += 20) {
ticks.push(i);
}
for (i = 0; i < plotBands.length - 1; i++) {
ticks.push(plotBands[i].to)
}
return ticks;
}
Live demo: https://jsfiddle.net/BlackLabel/1kpt7dws/
API: https://api.highcharts.com/highcharts/yAxis.tickPositioner

Highcharts heatmap color does not match legend

I'm new to highcharts, but I seem to have an issue with the display of the large heatmap. The colors in the legend don't seem to match the colors in the actual chart.
The following is my chart configuration code.
function load_team_effort_by_day_of_week_heat_map(ele, config)
{
var self = $(ele);
var days = ["Monday", "Tuesday", "Wednesday", "Thursday","Friday", "Saturday", "Sunday"]
load_data(self, function(response)
{
var div = $("<pre/>")
.attr("id","csv")
.css("display","none");
div.html(response.data);
$("body").append(div);
var chart_container = self.attr("chart-container");
$("#"+chart_container).css("width","100%");
var min = new Date(response.min)
var max = new Date(response.max)
var max_value = response.max_range
var mid_range = parseFloat(max_value/4);
Highcharts.chart(chart_container, {
data: {
csv: document.getElementById('csv').innerHTML
},
chart: {
type: 'heatmap',
margin: [60, 10, 80, 50]
},
boost: {
useGPUTranslations: true
},
title: {
text: '',
align: 'left',
x: 40
},
subtitle: {
text: '',
align: 'left',
x: 40
},
xAxis: {
title: {
text: config.xlabel
},
type: 'datetime',
min: Date.UTC(min.getFullYear(), min.getMonth(), min.getDate()),
max: Date.UTC(max.getFullYear(), max.getMonth(), max.getDate()),
labels: {
align: 'left',
x: 5,
y: 14,
format: '{value:%b-%d-%Y}' // long month
},
showLastLabel: false,
tickLength: 16
},
yAxis: {
title: {
text: config.ylabel
},
labels: {
format: '{value}'
},
minPadding: 0,
maxPadding: 0,
startOnTick: false,
endOnTick: false,
tickPositions: [0, 1, 2, 3, 4, 5, 6],
tickWidth: 1,
min: 0,
max: 6,
reversed: true
},
colorAxis: {
stops: [
[0, '#EEEEEE'],
[mid_range, '#00ee33'],
[max_value, '#00ee33']
],
min: 0,
max: max_value,
startOnTick: false,
endOnTick: false,
labels: {
format: '{value}'
}
},
tooltip: {
formatter: function () {
var d = new Date(this.point.x)
var todate=d.getDate();
var tomonth=d.getMonth()+1;
var toyear=d.getFullYear();
var original_date=tomonth+'/'+todate+'/'+toyear;
return '<b>' + original_date + ', <b>' +
this.point.value + '</b> on <br><b>' + days[this.point.y] + '</b>';
}
},
series: [{
boostThreshold: 100,
borderWidth: 0,
nullColor: '#EEEEEE',
colsize: 7 * 24 * 36e5, // one week
turboThreshold: Number.MAX_VALUE // #3404, remove after 4.0.5 release
}]
});
self.parents('.white-background').removeClass("loadingdv");
self.parents('.white-background').find(".lodimg").remove();
//Remving extra div for legends on rite side
self.parents('.white-background').find(".legendcontainer").remove();
});
}

Highchart bubble cut off with max x/yAxis

I need to have a bubble chart with xAxis and yAxis from 0 to 5. If I have a bubble on the xAxis or yAxis 5, the bubble get cut of.
$(function () {
$('#container').highcharts({
chart: {
type: 'bubble',
zoomType: 'xy',
height: 500,
width: 500,
},
title: {
text: 'Highcharts Bubbles'
},
yAxis: {
min: 0,
max: 5,
gridLineWidth: 1,
},
xAxis: {
min: 0,
max: 5,
gridLineWidth: 1,
},
series: [{
data: [[5, 4, 2], [3, 1, 1], [4, 2, 3], [1, 2, 3], [1, 4, 1], [2, 5, 1], [5, 2, 3], [3, 2, 1]]
}]
});
});
http://jsfiddle.net/tum3zzzu/1/
I somehow found a trick with doing max: 5.5 but it work only for xAxis. On yAxis max: 5.5 is rounded to 6.
How can I solve this problem?
You can use tickPositioner to tell the chart exactly what to show as ticks. I also used showLastLabel: false to hide the last tick (which is 5.5). Here's what you can do in your code:
yAxis: {
min: 0,
max: 5.5,
endOnTick: true,
showLastLabel: false, // to hide 5.5
gridLineWidth: 1,
tickPositioner: function() {
var positions = [0], // to start from 0
tick = Math.floor(this.dataMin),
increment = Math.ceil((this.dataMax - this.dataMin) / 6);
for (tick; tick - increment < this.dataMax; tick += increment) {
positions.push(tick);
}
positions.push(this.dataMax + 0.5); // to add the last label 5.5
return positions;
}
}
And Here's the DEMO.

Not well-ordered X Axis values

In the attached image, the values on x axis are not order, it is increasing from 1 to 112 then it decreases from 101 to 0.
I'm asking if there is any way to do the same using Highcharts.
Thank you
Example how could this be done: http://jsfiddle.net/7wwpLLzt/9/
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
xAxis: [{ // Primary yAxis
min: 1,
max: 224,
startOnTick: false,
endOnTick: false,
maxPadding: 0,
minPadding: 0,
tickPositions: [1, 15, 33, 55, 78, 98, 112]
}, {
offset: 0,
min: 1,
max: 224,
startOnTick: false,
endOnTick: false,
reversed: true,
maxPadding: 0,
minPadding: 0,
showLastLabel: false,
tickPositions: [1, 15, 33, 55, 78, 98, 112]
}],
tooltip: {
shared: true
},
series: [{
name: 'S1',
type: 'spline',
xAxis: 1,
data: [
[13, 7],
[44, 3],
[56, 4]
],
}, {
name: 'S2',
type: 'spline',
data: [
[1, 2],
[14, 3],
[100, 6]
]
}]
});
Used are two axes, one for left and one for right side.
Another way to do this is formatting x axis labels : jsfiddle.net/7wwpLLzt/5
xAxis: [{ // Primary yAxis
labels: {
formatter: function () {
var maxValue=112.6; // max value on x
if ( this.value > maxValue )
{
return parseFloat(maxValue - ( this.value - maxValue)).toFixed(1);
}
else
{
return parseFloat(this.value).toFixed(1);
}
}
}
}],
tooltip:
{
formatter: function () {
var xa = this.x;
var maxValue=112.6; // max value
if ( xa >maxValue )
{
xa = parseFloat(maxValue - ( xa - maxValue)).toFixed(1);
}
var s = '<b>' + xa + '</b>';
$.each(this.points, function () {
s += '<br/>' + this.series.name + ': ' +
this.y + 'm';
});
return s;
},
shared: true
},

Resources