Bar High Chart with different positive and negative scale interval values - highcharts

Question

Highcharts.chart('container', {
credits: {
enabled: false,
},
legend: {
enabled: false
},
chart: {
type: "bar",
height: 180,
reflow: false,
alignTicks: false,
},
title: {
text: null
},
accessibility: {
point: {
valueDescriptionFormat: "{index}. Agency {xDescription}, {y}%.",
},
},
xAxis: {
visible: false,
},
yAxis: [
{
tickPositioner: function() {
let step = 50,
step2 =250,
ret = [],
ret2 = [],
arr=[]
for (var i = this.min; i <= 0; i+= step) {
ret.push(i);
}
for (var i = 0; i <= this.max; i+= step2) {
ret2.push(i);
}
arr= ret.concat(ret2)
return arr;
},
title: {
text: null,
},
linkedTo: 0,
labels: {
enabled:true,
step: 1
},
accessibility: {
description: "Percentage population",
rangeDescription: "Range: 0 to 5%",
},
},
],
plotOptions: {
series: {
stacking: "normal",
dataLabels: {
enabled: true,
inside: true,
formatter: function() {
return (this.y > 1000) ? Highcharts.numberFormat(this.y / 1000, 3) + "K": this.y;
},
style: {
fontWeight: 'normal'
}
},
},
},
tooltip: {
formatter: function () {
return (
// "<b>" +
// this.point.series.data.map(x=>x.y) +
// "</b><br/>" +
"Segment: " +
Highcharts.numberFormat(Math.abs(this.point.y), 1) +
""
);
},
},
series: [
{
type: "bar",
// name: (segment[0] && segment[4])?"Top Agencies":"Bottom Agencies",
borderRadius: 12,
pointPadding: 0,
groupPadding: 0.05,
color: {//set le5end point color
linearGradient: { x1: 0, x2: 1, y1: 0, y2: 1 },
stops: [
[0, "#46a4eb"],
[1, "#6cbdfb"],
],
},
data: [
{
y: 2000,
title:"HIII",
color: {
linearGradient: { x1: 0, x2: 1, y1: 0, y2: 1 },
stops: [
[0, "#46a4eb"],
[1, "#6cbdfb"],
],
},
custom: {
// text: "BTS",
// score: "27,000",
text:"Abc",
score:2000,
},
},
{
y: 1000,
color: {
linearGradient: { x1: 0, x2: 1, y1: 0, y2: 1 },
stops: [
[0, "#46a4eb"],
[1, "#6cbdfb"],
],
},
custom: {
text:"Abc",
score:1000
},
},
{
y: 1300,
color: {
linearGradient: { x1: 0, x2: 1, y1: 0, y2: 1 },
stops: [
[0, "#46a4eb"],
[1, "#6cbdfb"],
],
},
custom: {
text:"CVB",
score:1300
},
},
{
y:1400,
color: {
linearGradient: { x1: 0, x2: 1, y1: 0, y2: 1 },
stops: [
[0, "#46a4eb"],
[1, "#6cbdfb"],
],
},
custom: {
text:"Abc",
score:1400
},
},
{
y:760,
color: {
linearGradient: { x1: 0, x2: 1, y1: 0, y2: 1 },
stops: [
[0, "#46a4eb"],
[1, "#6cbdfb"],
],
},
custom: {
text:"Abc",
score:760
},
},
{
y: 900,
color: {
linearGradient: { x1: 0, x2: 1, y1: 0, y2: 1 },
stops: [
[0, "#f48686"],
[1, "#f05e5e"],
],
},
custom: {
text:"Jhd",
// score:"6000",
score:900
},
},
{
y:-50,
color: {
linearGradient: { x1: 0, x2: 1, y1: 0, y2: 1 },
stops: [
[0, "#f48686"],
[1, "#f05e5e"],
],
},
custom: {
text:"Uit",
score:-50
},
},
{
y: -40,
color: {
linearGradient: { x1: 0, x2: 1, y1: 0, y2: 1 },
stops: [
[0, "#f48686"],
[1, "#f05e5e"],
],
},
custom: {
text:"TPS",
score:-40
},
},
{
y: -15,
color: {
linearGradient: { x1: 0, x2: 1, y1: 0, y2: 1 },
stops: [
[0, "#f48686"],
[1, "#f05e5e"],
],
},
custom: {
text:"Pop",
score:-15
},
},
{
y: -10,
color: {
linearGradient: { x1: 0, x2: 1, y1: 0, y2: 1 },
stops: [
[0, "#f48686"],
[1, "#f05e5e"],
],
},
custom: {
text:"BVC",
score:-10
},
},
],
dataLabels: [
{
align: "left",
format: "({point.custom.score})",
enabled: true,
padding: 15,
color: "#FFFFFF",
style: {
fontSize: "10px",
textShadow: false,
textOutline: "0",
fontWeight: "light",
fontFamily: 'Muli',
},
},
{
align: "right",
format: "{point.custom.text}",
padding: 15,
style: {
fontSize: "10px",
textShadow: false,
textOutline: "0",
fontWeight: "light",
fontFamily: 'Muli',
},
},
],
},
],
});
.highcharts-figure, .highcharts-data-table table {
min-width: 310px;
max-width: 800px;
margin: 1em auto;
}
#container {
height: 400px;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #EBEBEB;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
Bar chart showing horizontal columns. This chart type is often
beneficial for smaller screens, as the user can scroll through the data
vertically, and axis labels are easy to read.
</p>
</figure>
My requirement is I want to make a Bar chart with different interval ranges of positive and negative y-axis. Like for positive y-axis my interval range is around 250+ and for negative y-axis my range is around 15-20 or it sets ranges according to the given data dynamically.
Another issue is I have somehow manage to solve the above given issue but my origin is displacing from center so in short I want to keep my origin at the center with different ranges of positive and negative y-axis.
Is there any possibility to limit the width of +y-axis and -y-axis to center the origin ?
Here's code pen link barchart
This is my graph
This is what I want even if positive value is too high or negative value is too low.
Code is here
export const getAgencyChartOption = (data) =>{
let name=data.map(x=>x.agenciesName)
let segment=data.map(x=>x.segments)
let obj: Highcharts.Options = {
credits: {
enabled: false,
},
legend: {
enabled: false
},
chart: {
type: "bar",
height: 180,
reflow: false,
alignTicks: false,
},
title: {
text: null
},
accessibility: {
point: {
valueDescriptionFormat: "{index}. Agency {xDescription}, {y}%.",
},
},
xAxis: {
visible: false,
},
yAxis: [
{
tickPositioner: function() {
let step = 50,
step2 =250,
ret = [],
ret2 = [],
arr=[]
for (var i = this.min; i <= 0; i+= step) {
ret.push(i);
}
for (var i = 0; i <= this.max; i+= step2) {
ret2.push(i);
}
arr= ret.concat(ret2)
return arr;
},
title: {
text: null,
},
linkedTo: 0,
labels: {
enabled:true,
step: 1
},
accessibility: {
description: "Percentage population",
rangeDescription: "Range: 0 to 5%",
},
},
],
plotOptions: {
series: {
stacking: "normal",
dataLabels: {
enabled: true,
inside: true,
formatter: function() {
return (this.y > 1000) ? Highcharts.numberFormat(this.y / 1000, 3) + "K": this.y;
},
style: {
fontWeight: 'normal'
}
},
},
},
tooltip: {
formatter: function () {
return (
// "<b>" +
// this.point.series.data.map(x=>x.y) +
// "</b><br/>" +
"Segment: " +
Highcharts.numberFormat(Math.abs(this.point.y), 1) +
""
);
},
},
series: [
{
type: "bar",
// name: (segment[0] && segment[4])?"Top Agencies":"Bottom Agencies",
borderRadius: 12,
pointPadding: 0,
groupPadding: 0.05,
color: {//set le5end point color
linearGradient: { x1: 0, x2: 1, y1: 0, y2: 1 },
stops: [
[0, "#46a4eb"],
[1, "#6cbdfb"],
],
},
data: [
{
y: Number(segment[0]),
title:"HIII",
color: {
linearGradient: { x1: 0, x2: 1, y1: 0, y2: 1 },
stops: [
[0, "#46a4eb"],
[1, "#6cbdfb"],
],
},
custom: {
// text: "BTS",
// score: "27,000",
text:name[0],
score:segment[0]
},
},
{
y: Number(segment[1]),
color: {
linearGradient: { x1: 0, x2: 1, y1: 0, y2: 1 },
stops: [
[0, "#46a4eb"],
[1, "#6cbdfb"],
],
},
custom: {
text:name[1],
score:segment[1]
},
},
{
y: Number(segment[2]),
color: {
linearGradient: { x1: 0, x2: 1, y1: 0, y2: 1 },
stops: [
[0, "#46a4eb"],
[1, "#6cbdfb"],
],
},
custom: {
text:name[2],
score:segment[2]
},
},
{
y: Number(segment[ 3]),
color: {
linearGradient: { x1: 0, x2: 1, y1: 0, y2: 1 },
stops: [
[0, "#46a4eb"],
[1, "#6cbdfb"],
],
},
custom: {
text:name[3],
score:segment[3]
},
},
{
y: Number(segment[4]),
color: {
linearGradient: { x1: 0, x2: 1, y1: 0, y2: 1 },
stops: [
[0, "#46a4eb"],
[1, "#6cbdfb"],
],
},
custom: {
text:name[4],
score:segment[4]
},
},
{
y: Number(segment[5]),
color: {
linearGradient: { x1: 0, x2: 1, y1: 0, y2: 1 },
stops: [
[0, "#f48686"],
[1, "#f05e5e"],
],
},
custom: {
text:name[5],
// score:"6000",
score:segment[5]
},
},
{
y: Number(segment[6]),
color: {
linearGradient: { x1: 0, x2: 1, y1: 0, y2: 1 },
stops: [
[0, "#f48686"],
[1, "#f05e5e"],
],
},
custom: {
text:name[6],
score:segment[6]
},
},
{
y: Number(segment[7]),
color: {
linearGradient: { x1: 0, x2: 1, y1: 0, y2: 1 },
stops: [
[0, "#f48686"],
[1, "#f05e5e"],
],
},
custom: {
text:name[7],
score:segment[7]
},
},
{
y: Number(segment[8]),
color: {
linearGradient: { x1: 0, x2: 1, y1: 0, y2: 1 },
stops: [
[0, "#f48686"],
[1, "#f05e5e"],
],
},
custom: {
text:name[8],
score:segment[8]
},
},
{
y: Number(segment[9]),
color: {
linearGradient: { x1: 0, x2: 1, y1: 0, y2: 1 },
stops: [
[0, "#f48686"],
[1, "#f05e5e"],
],
},
custom: {
text:name[9],
score:segment[9]
},
},
],
dataLabels: [
{
align: "left",
format: "({point.custom.score})",
enabled: true,
padding: 15,
color: "#FFFFFF",
style: {
fontSize: "10px",
textShadow: false,
textOutline: "0",
fontWeight: "light",
fontFamily: 'Muli',
},
},
{
align: "right",
format: "{point.custom.text}",
padding: 15,
style: {
fontSize: "10px",
textShadow: false,
textOutline: "0",
fontWeight: "light",
fontFamily: 'Muli',
},
},
],
},
],
}
return obj
}