score:1
Accepted answer
You can use two y-axes and assign series to the appropriate one based on values.
yAxis: [{
height: '50%',
min: 0
}, {
top: '50%',
height: '50%',
offset: 0,
max: 0
}],
series: [{
data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
}, {
data: [0, -1, 0, -2, -2, -3, -2, -5, 0, -2],
yAxis: 1,
}]
Live demo: http://jsfiddle.net/BlackLabel/0zsnpgou/
API Reference: https://api.highcharts.com/highcharts/yAxis
I'm using combination chart with four different data arrays in series and each one them is expected to have negative values
this is my chart
the code here
export const getAirlinesChartOption = (data) => {
let val;
console.log('data',data)
let tpSegments = data.map((x) => x.tpSegments);
let amadeusSegments = data.map((x) => x.amadeusSegments);
let sabreSegments = data.map((x) => x.sabreSegments);
let lytpSegments = data.map((x) => x.lytpSegments);
console.log('tpSegments',tpSegments)
console.log('amadeusSegments',amadeusSegments)
console.log('sabreSegments',sabreSegments)
console.log('lytpSegments',lytpSegments)
const allValues =[]
tpSegments.map((x,index)=>{
allValues.push(tpSegments[index])
allValues.push(amadeusSegments[index])
allValues.push(sabreSegments[index])
allValues.push(lytpSegments[index])
})
console.log('allValues',allValues)
const neg = allValues.filter(function (v) {
return v < 0;
}),
pos = allValues.filter(function (v) {
return v > 0;
});
let positiveCount = pos.length;
let negativeCount = neg.length;
let posMax = Math.max(...pos)
let negMax = Math.max(...neg)
console.log('pos',pos)
console.log('neg',neg)
console.log('posMax',posMax)
console.log('negMax',negMax)
let sortedPosArray = pos.sort(function(a, b) {
return a - b;
});
let sortedNegArray = neg.sort(function(a, b) {
return a - b;
});
let tickArray = sortedNegArray.concat(sortedPosArray)
console.log('sortedPosArray',sortedPosArray)
console.log('sortedNegArray',sortedNegArray)
console.log('tickArray',tickArray)
console.log('positiveCount',positiveCount)
console.log('negativeCount',negativeCount)
let obj: Highcharts.Options = {
credits: {
enabled: false,
},
chart: {
type: "column",
height: 180,
reflow: false,
},
title: {
text: null,
},
legend: {
padding: 0,
itemMarginTop: -15,
itemMarginBottom: -15,
itemHoverStyle: {
color: "#83858e",
},
itemStyle: {
fontSize: "10px",
color: "#83858e",
fontWeight: "light",
},
},
xAxis: {
categories: data.map(x=>x.airline),
labels: {
style: {
color: "#b6bbc0",
fontSize: "10px",
},
},
},
yAxis: {
gridLineDashStyle: "Dash",
labels: {
formatter: function () {
if (this.value >= 1000 || this.value <= -1000) {
val = Highcharts.numberFormat(this.value / 1000, 0) + "K"
return val;
}
else {
val = this.value
return val;
}
},
style: {
color: "#b6bbc0",
fontSize: "10px",
},
},
title: {
text: "",
},
// tickInterval:1000,
// tickPositions: tickArray,
min: negMax<0 && negMax !== -Infinity ?negMax:0,
max: posMax>0 && posMax !== -Infinity?posMax:0,
tickPositioner: function () {
var positions = [],
tick = Math.floor(this.min),
increment = Math.ceil((Math.abs(this.max) - Math.abs(this.min)) / 10);
console.log('increment',increment)
if (this.max !== null && this.min !== null) {
console.log('min',this.min);
for (tick; tick - increment <= this.max; tick += increment) {
positions.push(tick);
}
}
return positions;
}
},
plotOptions: {
series: {
events: {
legendItemClick: function (e) {
e.preventDefault();
},
},
},
},
tooltip: {
pointFormatter: function(){ return '' +
'<span style="color:' + this.color + '">' + this.series.name + '</span>: <b>' + this.y.toLocaleString() +'</b>'
},
//headerFormat: '<span style="font-size:11px">{category}</span><br>',
},
series: [
{
name: "TP",
type: "column",
color: "#01DFA5",
data: data.map(x=>Number(x.tpSegments)),
pointWidth: 5,
groupPadding:0.28,
borderRadius: 5,
},
{
name: "1S",
type: "column",
color: "#5858FA",
data:data.map(x=>Number(x.sabreSegments)),
pointWidth: 5,
groupPadding:0.28,
borderRadius: 5,
},
{
name: "1A",
type: "column",
color: "#11cdef",
data: data.map(x=>Number(x.amadeusSegments)),
pointWidth: 5,
groupPadding:0.28,
borderRadius: 5,
},
{
type: "line",
name: "LYTP",
grouping: false,
color: "#000000",
data: data.map(x=>Number(x.lytpSegments)),
borderRadius: 5,
pointRange:1,
marker: {
symbol: "triangle",
},
},
],
};
return obj;
};
Source: stackoverflow.com
Related Query
- how to set negative axes intervals in highcharts
- How to set a static minimum value for axes in Highcharts
- How to set Highcharts chart maximum yAxis value
- Set highcharts y-axis min value to 0, unless there is negative data
- how to set the interval of points on Y - Axis highcharts
- Highcharts How to Show Loading Animation At Set Data
- Highcharts - How to set custom colors for the series
- how to set dynamic data in highcharts
- Highcharts Bar Chart - How to set the minimum bar width/length
- Highcharts - Issue with negative values when displaying multiple axes
- How do I set highcharts line graph point colors to an array of colors?
- Highcharts - Negative values, set y-axis to greater than 0?
- How to set the z-index of points on a HighCharts scatter plot?
- how to set xAxis pointInterval(update: tickInterval) in highcharts
- Highcharts (Highstock) how to manually set the navigator selected range
- How to hide Axes Crosshairs by onclick event in Highcharts
- How do I set the background color of a Highcharts HTML label?
- How to color series legend in highcharts when colorbypoint is set to true
- How to set an fillArea offset in HighCharts
- highcharts pie monochrome: how to set the default color?
- Highcharts - how to set custom content in point tooltip (popup) on 3D scatter chart or how to customize point tooltip information?
- How to set 'lang' property in Highcharts using Angular JS?
- How to implement "zebra striping" in highcharts axes
- How to set Highcharts object configuration globaly with vue-highcharts?
- How do i add mouse wheel code in Angular2 highcharts in typescript
- how to display 2 same highcharts without duplicate the code
- Highcharts - How to draw Confidence Intervals
- How to get Highcharts XAxis to Display in 2 Minute Intervals
- How to edit tooltip in Highcharts C# code
- Highcharts server side image generation, how to set up legend labelFormatter in callback argument
More Query from same tag
- PHP in Javascript for PhantomJS + Highcharts
- Cannot display a legend with special character in highchart from the serie name
- how to draw Highcharts by php
- How to align Highcharts datetime x-axis with data I pass to it?
- Highcharts - Segmented column bar
- Highcharts - how to disable empty space around Column chart
- Remove Highchart line when no value
- Aligning the text in Legend in Highcharts
- Remove arrow that hide/show stock tools GUI
- how to set Navigator label formatter in highcharts
- Highchart navigator data format
- Using .hide() on pie series to hide a single slice like the legend event
- Highchart: stacked grouped column
- Percentage for left style of a custom label in highcharts
- Prevent Area plot Y-axis from starting with ZERO
- Disable highchart legend if series name = 'SP'
- How can I extend the x-axis on a Highcharts graph?
- Pull HighCharts data labels to the right
- Highstock Change tick interval on range selector change
- Highcharts. Highlight line chart date interval on hover
- Filtering legend of a Highcharts by only visible series
- Columns too wide in Highcharts with lots of points
- How to set the padding and placement if we have more than 16 data in the series
- Highchart react - x axis draggable
- Data format and X/Y configuration for dynamic csv display
- highchart with angular and ionic framework error
- Image not exporting correctly in highcharts
- Highstock chart offsets dates for no reason
- Why can't I enter text into a textarea control that is inside of the highcharts-container div?
- highcharts - inconsistent number of yAxis gridlines