How to provide padding to the tickPosition on highchart? - javascript

I am using bullet chart of highchartto work alike progress chart somehow i achieved to make it look like as a progress chart, but the problem is that when my series data is near to equal it gets overlapped with each other. Please take a look attached image
is there any way to provide padding on bullet chart so the data will not get overlapped?
$("#progress").highcharts({
chart: {
inverted: true,
marginLeft: 30,
type: 'bullet'
},
title: {
text: null
},
legend: {
enabled: false
},
yAxis: {
tickPositions: [0, 3000, 3100, 4000],
gridLineWidth: 0,
title: "",
useHTML: true,//Set to true
style: {
width: '50px'
}
}, xAxis: {
minorGridLineWidth: 0,
lineColor: 'transparent',
labels: {
enabled: false
},
minorTickLength: 0,
tickLength: 0
},
plotOptions: {
series: {
borderWidth: 0,
borderRadius: 10,
color: '#819bc2',
targetOptions: {
width: '10%'
},
grouping: false
}
},
exporting: { enabled: false },
credits: { enabled: false },
series: [{ "data": [{ "y": 4000, "target": 4000, "color": "#ccd8e9" }] }, { "data": [{ "y": 3100, "target": 3100, "color": "#ff4666" }] }, { "data": [{ "y": 3000, "target": 3000, "color": "#2F9AD0" }] }],
tooltip: {
useHTML: true,
backgroundColor: null,
borderWidth: 0,
positioner: function (labelWidth, labelHeight, point) {
var tooltipX = point.plotX - 40;
var tooltipY = point.plotY - 20;
return {
x: tooltipX,
y: tooltipY
};
},
pointFormat: "<span style='font-weight:bold;color:{point.color};'>{point.y}</span>"
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<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/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/bullet.js"></script>
<div id="progress"></div>


I made this solution with jQuery. There might be better ones, but it should work as wished:
var lastXPos = 0;
$.each($('#progress svg g text'),function(a,b)
{
var curXPos = $(this).offset().left;
if(curXPos - lastXPos < 50)
{
$(this).attr('x', (curXPos + 50));
}
lastXPos = curXPos;
});
When the last x-position of the text is within 50px of the current x-position, I just add another 50px to the current position. You can change this values according to your needs.
$("#progress").highcharts({
chart: {
inverted: true,
marginLeft: 30,
type: 'bullet'
},
title: {
text: null
},
legend: {
enabled: false
},
yAxis: {
tickPositions: [0, 3000, 3100, 4000],
gridLineWidth: 0,
title: "",
useHTML: true,//Set to true
style: {
width: '50px'
}
}, xAxis: {
minorGridLineWidth: 0,
lineColor: 'transparent',
labels: {
enabled: false
},
minorTickLength: 0,
tickLength: 0
},
plotOptions: {
series: {
borderWidth: 0,
borderRadius: 10,
color: '#819bc2',
targetOptions: {
width: '10%'
},
grouping: false
}
},
exporting: { enabled: false },
credits: { enabled: false },
series: [{ "data": [{ "y": 4000, "target": 4000, "color": "#ccd8e9" }] }, { "data": [{ "y": 3100, "target": 3100, "color": "#ff4666" }] }, { "data": [{ "y": 3000, "target": 3000, "color": "#2F9AD0" }] }],
tooltip: {
useHTML: true,
backgroundColor: null,
borderWidth: 0,
positioner: function (labelWidth, labelHeight, point) {
var tooltipX = point.plotX - 40;
var tooltipY = point.plotY - 20;
return {
x: tooltipX,
y: tooltipY
};
},
pointFormat: "<span style='font-weight:bold;color:{point.color};'>{point.y}</span>"
}
});
var lastXPos = 0;
$.each($('#progress svg g text'),function(a,b)
{
var curXPos = $(this).offset().left;
if(curXPos - lastXPos < 50)
{
$(this).attr('x', (curXPos + 50));
}
lastXPos = curXPos;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<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/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/bullet.js"></script>
<div id="progress"></div>


You can use rotation option for yaxis label for not overlapping the text
$("#progress").highcharts({
chart: {
inverted: true,
marginLeft: 30,
type: 'bullet'
},
title: {
text: null
},
legend: {
enabled: false
},
yAxis: {
tickPositions: [0, 3000, 3100, 4000],
gridLineWidth: 0,
title: "",
useHTML: true,//Set to true
labels: {
rotation : 320
},
}, xAxis: {
minorGridLineWidth: 0,
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
},
allowOverlap : false,
padding : 10,
plotOptions: {
series: {
borderWidth: 0,
borderRadius: 10,
color: '#819bc2',
targetOptions: {
width: '10%'
},
grouping: false
}
},
exporting: { enabled: false },
credits: { enabled: false },
series: [{ "data": [{ "y": 4000, "target": 4000, "color": "#ccd8e9" }] }, { "data": [{ "y": 3100, "target": 3100, "color": "#ff4666" }] }, { "data": [{ "y": 3000, "target": 3000, "color": "#2F9AD0" }] }],
tooltip: {
useHTML: true,
backgroundColor: null,
borderWidth: 0,
positioner: function (labelWidth, labelHeight, point) {
var tooltipX = point.plotX - 40;
var tooltipY = point.plotY - 20;
return {
x: tooltipX,
y: tooltipY
};
},
pointFormat: "<span style='font-weight:bold;color:{point.color};'>{point.y}</span>"
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<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/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/bullet.js"></script>
<div id="progress"></div>


Padding does not work for the labels on your yAxis. This is probably a sideeffect of using tickPositions
An array defining where the ticks are laid out on the axis. This overrides the default behaviour of tickPixelInterval and tickInterval.
As an alternative solution you can use rotation:
yAxis: {
labels: {
rotation: -45
},
...
}
$("#progress").highcharts({
chart: {
inverted: true,
marginLeft: 30,
type: 'bullet'
},
title: {
text: null
},
legend: {
enabled: false
},
yAxis: {
tickPositions: [0, 3000, 3100, 4000],
gridLineWidth: 0,
title: "",
labels: {
rotation: -45
}
},
xAxis: {
minorGridLineWidth: 0,
lineColor: 'transparent',
labels: {
enabled: false
},
minorTickLength: 0,
tickLength: 0
},
plotOptions: {
series: {
borderWidth: 0,
borderRadius: 10,
color: '#819bc2',
targetOptions: {
width: '10%'
},
grouping: false
}
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
series: [{
"data": [{
"y": 4000,
"target": 4000,
"color": "#ccd8e9"
}]
}, {
"data": [{
"y": 3100,
"target": 3100,
"color": "#ff4666"
}]
}, {
"data": [{
"y": 3000,
"target": 3000,
"color": "#2F9AD0"
}]
}],
tooltip: {
useHTML: true,
backgroundColor: null,
borderWidth: 0,
positioner: function(labelWidth, labelHeight, point) {
var tooltipX = point.plotX - 40;
var tooltipY = point.plotY - 20;
return {
x: tooltipX,
y: tooltipY
};
},
pointFormat: "<span style='font-weight:bold;color:{point.color};'>{point.y}</span>"
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<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/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/bullet.js"></script>
<div id="progress"></div>
JSFiddle example: https://jsfiddle.net/ewolden/jgezt8xm/7/
You can also use staggerLines:
yAxis: {
labels: {
staggerLines: 2
},
...
}
$("#progress").highcharts({
chart: {
inverted: true,
marginLeft: 30,
type: 'bullet'
},
title: {
text: null
},
legend: {
enabled: false
},
yAxis: {
tickPositions: [0, 3000, 3100, 4000],
gridLineWidth: 0,
title: "",
labels: {
staggerLines: 2
}
},
xAxis: {
minorGridLineWidth: 0,
lineColor: 'transparent',
labels: {
enabled: false
},
minorTickLength: 0,
tickLength: 0
},
plotOptions: {
series: {
borderWidth: 0,
borderRadius: 10,
color: '#819bc2',
targetOptions: {
width: '10%'
},
grouping: false
}
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
series: [{
"data": [{
"y": 4000,
"target": 4000,
"color": "#ccd8e9"
}]
}, {
"data": [{
"y": 3100,
"target": 3100,
"color": "#ff4666"
}]
}, {
"data": [{
"y": 3000,
"target": 3000,
"color": "#2F9AD0"
}]
}],
tooltip: {
useHTML: true,
backgroundColor: null,
borderWidth: 0,
positioner: function(labelWidth, labelHeight, point) {
var tooltipX = point.plotX - 40;
var tooltipY = point.plotY - 20;
return {
x: tooltipX,
y: tooltipY
};
},
pointFormat: "<span style='font-weight:bold;color:{point.color};'>{point.y}</span>"
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<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/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/bullet.js"></script>
<div id="progress"></div>
JSFiddle example: https://jsfiddle.net/ewolden/jgezt8xm/5/

Related

How to make RTL layout for Highcharts Stock chart?

I have NUXT JS Project installed with "highcharts": "^10.1.0" package. I created three plugins 1. highcharts.js 2. default.js 3. dark.js.
highcharts.js
import Stock from 'highcharts/modules/stock';
if (typeof Highchart === 'object') {
Stock(Highchart);
}
export default ( { app }, inject ) => {
inject('highChart', Highchart);
}
default.js
export default {
colors: [
"#7cb5ec",
"#434348",
"#90ed7d",
"#f7a35c",
"#8085e9",
"#f15c80",
"#e4d354",
"#2b908f",
"#f45b5b",
"#91e8e1"
],
symbols: ["circle", "diamond", "square", "triangle", "triangle-down"],
lang: {
loading: "Loading...",
months: [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
shortMonths: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
weekdays: [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"
],
decimalPoint: ".",
numericSymbols: ["k", "M", "G", "T", "P", "E"],
resetZoom: "Reset zoom",
resetZoomTitle: "Reset zoom level 1:1",
thousandsSep: " "
},
global: {},
time: { timezoneOffset: 0, useUTC: true },
chart: {
styledMode: false,
borderRadius: 0,
colorCount: 10,
defaultSeriesType: "line",
ignoreHiddenSeries: true,
spacing: [10, 10, 15, 10],
resetZoomButton: {
theme: { zIndex: 6 },
position: { align: "right", x: -10, y: 10 }
},
width: null,
height: null,
borderColor: "#335cad",
backgroundColor: "#ffffff",
plotBorderColor: "#cccccc",
style: {
fontFamily:
'"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif',
direction: 'rtl'
}
},
title: {
text: "Chart title",
align: "center",
margin: 15,
widthAdjust: -44,
style: {
color: "#333333",
textTransform: "",
fontSize: "1.25rem"
}
},
subtitle: {
text: "",
align: "center",
widthAdjust: -44,
style: {
color: "#909090"
}
},
caption: { margin: 15, text: "", align: "left", verticalAlign: "bottom" },
plotOptions: {
line: {
lineWidth: 2,
allowPointSelect: false,
crisp: true,
showCheckbox: false,
animation: { duration: 1000 },
events: {},
marker: {
enabledThreshold: 2,
lineColor: "#ffffff",
lineWidth: 0,
radius: 4,
states: {
normal: { animation: true },
hover: {
animation: { duration: 50 },
enabled: true,
radiusPlus: 2,
lineWidthPlus: 1
},
select: { fillColor: "#cccccc", lineColor: "#000000", lineWidth: 2 }
}
},
point: { events: {} },
dataLabels: {
animation: {},
align: "center",
defer: true,
padding: 5,
style: {
fontSize: "11px",
fontWeight: "bold",
color: "contrast",
textOutline: "1px contrast"
},
verticalAlign: "bottom",
x: 0,
y: 0
},
cropThreshold: 300,
opacity: 1,
pointRange: 0,
softThreshold: true,
states: {
normal: { animation: true },
hover: {
animation: { duration: 50 },
lineWidthPlus: 1,
marker: {},
halo: { size: 10, opacity: 0.25 }
},
select: { animation: { duration: 0 } },
inactive: { animation: { duration: 50 }, opacity: 0.2 }
},
stickyTracking: true,
turboThreshold: 1000,
findNearestPointBy: "x"
},
area: {
lineWidth: 2,
allowPointSelect: false,
crisp: true,
showCheckbox: false,
animation: { duration: 1000 },
events: {},
marker: {
enabledThreshold: 2,
lineColor: "#ffffff",
lineWidth: 0,
radius: 4,
states: {
normal: { animation: true },
hover: {
animation: { duration: 50 },
enabled: true,
radiusPlus: 2,
lineWidthPlus: 1
},
select: { fillColor: "#cccccc", lineColor: "#000000", lineWidth: 2 }
}
},
point: { events: {} },
dataLabels: {
animation: {},
align: "center",
defer: true,
padding: 5,
style: {
fontSize: "11px",
fontWeight: "bold",
color: "contrast",
textOutline: "1px contrast"
},
verticalAlign: "bottom",
x: 0,
y: 0
},
cropThreshold: 300,
opacity: 1,
pointRange: 0,
softThreshold: true,
states: {
normal: { animation: true },
hover: {
animation: { duration: 50 },
lineWidthPlus: 1,
marker: {},
halo: { size: 10, opacity: 0.25 }
},
select: { animation: { duration: 0 } },
inactive: { animation: { duration: 50 }, opacity: 0.2 }
},
stickyTracking: true,
turboThreshold: 1000,
findNearestPointBy: "x",
threshold: 0
},
spline: {
lineWidth: 2,
allowPointSelect: false,
crisp: true,
showCheckbox: false,
animation: { duration: 1000 },
events: {},
marker: {
enabledThreshold: 2,
lineColor: "#ffffff",
lineWidth: 0,
radius: 4,
states: {
normal: { animation: true },
hover: {
animation: { duration: 50 },
enabled: true,
radiusPlus: 2,
lineWidthPlus: 1
},
select: { fillColor: "#cccccc", lineColor: "#000000", lineWidth: 2 }
}
},
point: { events: {} },
dataLabels: {
animation: {},
align: "center",
defer: true,
padding: 5,
style: {
fontSize: "11px",
fontWeight: "bold",
color: "contrast",
textOutline: "1px contrast"
},
verticalAlign: "bottom",
x: 0,
y: 0
},
cropThreshold: 300,
opacity: 1,
pointRange: 0,
softThreshold: true,
states: {
normal: { animation: true },
hover: {
animation: { duration: 50 },
lineWidthPlus: 1,
marker: {},
halo: { size: 10, opacity: 0.25 }
},
select: { animation: { duration: 0 } },
inactive: { animation: { duration: 50 }, opacity: 0.2 }
},
stickyTracking: true,
turboThreshold: 1000,
findNearestPointBy: "x"
},
areaspline: {
lineWidth: 2,
allowPointSelect: false,
crisp: true,
showCheckbox: false,
animation: { duration: 1000 },
events: {},
marker: {
enabledThreshold: 2,
lineColor: "#ffffff",
lineWidth: 0,
radius: 4,
states: {
normal: { animation: true },
hover: {
animation: { duration: 50 },
enabled: true,
radiusPlus: 2,
lineWidthPlus: 1
},
select: { fillColor: "#cccccc", lineColor: "#000000", lineWidth: 2 }
}
},
point: { events: {} },
dataLabels: {
animation: {},
align: "center",
defer: true,
padding: 5,
style: {
fontSize: "11px",
fontWeight: "bold",
color: "contrast",
textOutline: "1px contrast"
},
verticalAlign: "bottom",
x: 0,
y: 0
},
cropThreshold: 300,
opacity: 1,
pointRange: 0,
softThreshold: true,
states: {
normal: { animation: true },
hover: {
animation: { duration: 50 },
lineWidthPlus: 1,
marker: {},
halo: { size: 10, opacity: 0.25 }
},
select: { animation: { duration: 0 } },
inactive: { animation: { duration: 50 }, opacity: 0.2 }
},
stickyTracking: true,
turboThreshold: 1000,
findNearestPointBy: "x",
threshold: 0
},
column: {
lineWidth: 2,
allowPointSelect: false,
crisp: true,
showCheckbox: false,
animation: { duration: 1000 },
events: {},
marker: null,
point: { events: {} },
dataLabels: {
animation: {},
defer: true,
padding: 5,
style: {
fontSize: "11px",
fontWeight: "bold",
color: "contrast",
textOutline: "1px contrast"
},
x: 0
},
cropThreshold: 50,
opacity: 1,
pointRange: null,
softThreshold: true,
states: {
normal: { animation: true },
hover: {
animation: { duration: 50 },
lineWidthPlus: 1,
marker: {},
halo: false,
brightness: 0.1
},
select: {
animation: { duration: 0 },
color: "#cccccc",
borderColor: "#000000"
},
inactive: { animation: { duration: 50 }, opacity: 0.2 }
},
stickyTracking: false,
turboThreshold: 1000,
findNearestPointBy: "x",
borderRadius: 0,
centerInCategory: false,
groupPadding: 0.2,
pointPadding: 0.1,
minPointLength: 0,
startFromThreshold: true,
tooltip: { distance: 6 },
threshold: 0,
borderColor: "#ffffff"
},
bar: {
lineWidth: 2,
allowPointSelect: false,
crisp: true,
showCheckbox: false,
animation: { duration: 1000 },
events: {},
marker: null,
point: { events: {} },
dataLabels: {
animation: {},
defer: true,
padding: 5,
style: {
fontSize: "11px",
fontWeight: "bold",
color: "contrast",
textOutline: "1px contrast"
},
x: 0
},
cropThreshold: 50,
opacity: 1,
pointRange: null,
softThreshold: true,
states: {
normal: { animation: true },
hover: {
animation: { duration: 50 },
lineWidthPlus: 1,
marker: {},
halo: false,
brightness: 0.1
},
select: {
animation: { duration: 0 },
color: "#cccccc",
borderColor: "#000000"
},
inactive: { animation: { duration: 50 }, opacity: 0.2 }
},
stickyTracking: false,
turboThreshold: 1000,
findNearestPointBy: "x",
borderRadius: 0,
centerInCategory: false,
groupPadding: 0.2,
pointPadding: 0.1,
minPointLength: 0,
startFromThreshold: true,
tooltip: { distance: 6 },
threshold: 0,
borderColor: "#ffffff"
},
scatter: {
lineWidth: 0,
allowPointSelect: false,
crisp: true,
showCheckbox: false,
animation: { duration: 1000 },
events: {},
marker: {
enabledThreshold: 2,
lineColor: "#ffffff",
lineWidth: 0,
radius: 4,
states: {
normal: { animation: true },
hover: {
animation: { duration: 50 },
enabled: true,
radiusPlus: 2,
lineWidthPlus: 1
},
select: { fillColor: "#cccccc", lineColor: "#000000", lineWidth: 2 }
},
enabled: true
},
point: { events: {} },
dataLabels: {
animation: {},
align: "center",
defer: true,
padding: 5,
style: {
fontSize: "11px",
fontWeight: "bold",
color: "contrast",
textOutline: "1px contrast"
},
verticalAlign: "bottom",
x: 0,
y: 0
},
cropThreshold: 300,
opacity: 1,
pointRange: 0,
softThreshold: true,
states: {
normal: { animation: true },
hover: {
animation: { duration: 50 },
lineWidthPlus: 1,
marker: {},
halo: { size: 10, opacity: 0.25 }
},
select: { animation: { duration: 0 } },
inactive: { animation: { duration: 50 }, opacity: 0.2 }
},
stickyTracking: true,
turboThreshold: 1000,
findNearestPointBy: "xy",
jitter: { x: 0, y: 0 },
tooltip: {
headerFormat:
'<span style="color:{point.color}">●</span> <span style="font-size: 10px"> {series.name}</span><br/>',
pointFormat: "x: <b>{point.x}</b><br/>y: <b>{point.y}</b><br/>"
}
},
pie: {
allowPointSelect: false,
crisp: true,
showCheckbox: false,
animation: { duration: 1000 },
events: {},
marker: null,
point: { events: {} },
dataLabels: {
animation: {},
align: "center",
defer: true,
padding: 5,
style: {
fontSize: "11px",
fontWeight: "bold",
color: "contrast",
textOutline: "1px contrast"
},
verticalAlign: "bottom",
x: 0,
y: 0,
allowOverlap: true,
connectorPadding: 5,
connectorShape: "fixedOffset",
crookDistance: "70%",
distance: 30,
enabled: true,
softConnector: true
},
cropThreshold: 300,
opacity: 1,
pointRange: 0,
softThreshold: true,
states: {
normal: { animation: true },
hover: {
animation: { duration: 50 },
lineWidthPlus: 1,
marker: {},
halo: { size: 10, opacity: 0.25 },
brightness: 0.1
},
select: { animation: { duration: 0 } },
inactive: { animation: { duration: 50 }, opacity: 0.2 }
},
stickyTracking: false,
turboThreshold: 1000,
findNearestPointBy: "x",
center: [null, null],
clip: false,
colorByPoint: true,
ignoreHiddenPoint: true,
inactiveOtherPoints: true,
legendType: "point",
size: null,
showInLegend: false,
slicedOffset: 10,
tooltip: { followPointer: true },
borderColor: "#ffffff",
borderWidth: 1
},
candlestick: {
lineColor: 'black',
upLineColor: 'black', // docs
upColor: 'black'
}
},
labels: { style: { position: "absolute", color: "#333333" } },
legend: {
enabled: true,
rtl: true,
align: "center",
alignColumns: true,
layout: "horizontal",
borderColor: "#999999",
backgroundColor: "#ffffff",
borderRadius: 0,
navigation: { activeColor: "#003399", inactiveColor: "#cccccc" },
itemStyle: {
color: "#333333",
cursor: "pointer",
fontSize: "12px",
fontWeight: "bold",
textOverflow: "ellipsis"
},
itemHoverStyle: { color: "#000000" },
itemHiddenStyle: { color: "#cccccc" },
shadow: false,
itemCheckboxStyle: { position: "absolute", width: "13px", height: "13px" },
squareSymbol: true,
symbolPadding: 5,
verticalAlign: "bottom",
x: 0,
y: 0,
title: { style: { fontWeight: "bold" } }
},
loading: {
labelStyle: { fontWeight: "bold", position: "relative", top: "45%" },
style: {
position: "absolute",
backgroundColor: "#ffffff",
opacity: 0.5,
textAlign: "center"
}
},
tooltip: {
useHTML: true,
outside: true,
split: true,
enabled: true,
animation: true,
borderRadius: 3,
dateTimeLabelFormats: {
millisecond: "%A, %b %e, %H:%M:%S.%L",
second: "%A, %b %e, %H:%M:%S",
minute: "%A, %b %e, %H:%M",
hour: "%A, %b %e, %H:%M",
day: "%A, %b %e, %Y",
week: "Week from %A, %b %e, %Y",
month: "%B %Y",
year: "%Y"
},
footerFormat: "",
padding: 8,
snap: 10,
headerFormat: '<span style="font-size: 10px">{point.key}</span><br/>',
pointFormat:
'<span style="color:{point.color}">●</span> {series.name}: <b>{point.y}</b><br/>',
backgroundColor: "rgba(247,247,247,0.85)",
borderWidth: 1,
shadow: true,
style: {
color: "#333333",
cursor: "default",
fontSize: "12px",
whiteSpace: "nowrap"
}
},
credits: {
enabled: true,
href: "https://www.highcharts.com?credits",
position: { align: "right", x: -10, verticalAlign: "bottom", y: -5 },
style: { cursor: "pointer", color: "#999999", fontSize: "9px" },
text: "Highcharts.com"
},
// It'e needed to set additional options from out of the default theme,
// because Dark theme is adding the new properties not included within
// default theme
xAxis: {
gridLineColor: "#D8D8D8",
labels: {
style: {
color: "#606060"
}
},
lineColor: "#C0D0E0",
minorGridLineColor: "#e0e0e0",
tickColor: "#C0D0E0",
title: {
style: {
color: "#707070"
}
}
},
yAxis: {
gridLineColor: "#D8D8D8",
labels: {
style: {
color: "#606060"
}
},
lineColor: "#C0D0E0",
minorGridLineColor: "#e0e0e0",
tickColor: "#C0D0E0",
tickWidth: 0,
title: {
style: {
color: "#707070"
}
}
},
rangeSelector: {
buttonTheme: {
fill: "#f7f7f7",
stroke: "#000000",
style: {
color: "#000000"
},
states: {
hover: {
fill: "#e6ebf5",
stroke: "#000000",
style: {
color: "black"
}
},
select: {
fill: "#e6ebf5",
stroke: "#000000",
style: {
color: "black"
}
}
}
},
inputBoxBorderColor: "#CCC",
inputStyle: {
backgroundColor: "#fff",
color: "black"
},
labelStyle: {
color: "black"
}
},
};
dark.js
export default {
colors: [
"#2b908f",
"#90ee7e",
"#f45b5b",
"#7798BF",
"#aaeeee",
"#ff0066",
"#eeaaee",
"#55BF3B",
"#DF5353",
"#7798BF",
"#aaeeee"
],
chart: {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
stops: [
[0, "#1B1B1B"],
[1, "#1B1B1B"]
]
},
style: {
fontFamily: "'Unica One', sans-serif",
direction: 'rtl'
},
plotBorderColor: "#606063"
},
title: {
style: {
color: "#E0E0E3",
textTransform: "uppercase",
fontSize: "1.25rem"
}
},
subtitle: {
style: {
color: "#E0E0E3",
textTransform: "uppercase"
}
},
xAxis: {
gridLineColor: "#707073",
labels: {
style: {
color: "#E0E0E3"
}
},
lineColor: "#707073",
minorGridLineColor: "#505053",
tickColor: "#707073",
title: {
style: {
color: "#A0A0A3"
}
}
},
yAxis: {
gridLineColor: "#707073",
labels: {
style: {
color: "#E0E0E3"
}
},
lineColor: "#707073",
minorGridLineColor: "#505053",
tickColor: "#707073",
tickWidth: 1,
title: {
style: {
color: "#A0A0A3"
}
}
},
tooltip: {
useHTML: true,
outside: true,
split: true,
backgroundColor: "rgba(0, 0, 0, 0.85)",
style: {
color: "#F0F0F0"
}
},
plotOptions: {
series: {
dataLabels: {
color: "#F0F0F3",
style: {
fontSize: "13px"
}
},
marker: {
lineColor: "#333"
}
},
boxplot: {
fillColor: "#505053"
},
candlestick: {
lineColor: "white",
upLineColor: 'white',
upColor: 'white'
},
errorbar: {
color: "white"
}
},
legend: {
rtl: true,
backgroundColor: "rgba(0, 0, 0, 0.5)",
itemStyle: {
color: "#E0E0E3"
},
itemHoverStyle: {
color: "#FFF"
},
itemHiddenStyle: {
color: "#606063"
},
title: {
style: {
color: "#C0C0C0"
}
}
},
credits: {
style: {
color: "#666"
}
},
labels: {
style: {
color: "#707073"
}
},
drilldown: {
activeAxisLabelStyle: {
color: "#F0F0F3"
},
activeDataLabelStyle: {
color: "#F0F0F3"
}
},
navigation: {
buttonOptions: {
symbolStroke: "#DDDDDD",
theme: {
fill: "#505053"
}
}
},
// scroll charts
rangeSelector: {
buttonTheme: {
fill: "#505053",
stroke: "#000000",
style: {
color: "#CCC"
},
states: {
hover: {
fill: "#707073",
stroke: "#000000",
style: {
color: "white"
}
},
select: {
fill: "#000003",
stroke: "#000000",
style: {
color: "white"
}
}
}
},
inputBoxBorderColor: "#505053",
inputStyle: {
backgroundColor: "#333",
color: "silver"
},
labelStyle: {
color: "silver"
}
},
navigator: {
handles: {
backgroundColor: "#666",
borderColor: "#AAA"
},
outlineColor: "#CCC",
maskFill: "rgba(255,255,255,0.1)",
series: {
color: "#7798BF",
lineColor: "#A6C7ED"
},
xAxis: {
gridLineColor: "#505053"
}
},
scrollbar: {
barBackgroundColor: "#808083",
barBorderColor: "#808083",
buttonArrowColor: "#CCC",
buttonBackgroundColor: "#606063",
buttonBorderColor: "#606063",
rifleColor: "#FFF",
trackBackgroundColor: "#404043",
trackBorderColor: "#404043"
}
};
Page _typ/_uisin/_wkn/index.vue
<div id="container" ref="container" style="width: 100%; height: 400px">
<script>
import darkTheme from '../../../../plugins/dark'
import defaultTheme from "../../../../plugins/default";
export default {
data() {
return {
chart: null,
chartOptions: {
rangeSelector: {
selected: 4,
allButtonsEnabled: true
},
title: {
text: null,
// align: 'left'
},
subtitle: {
text: 'Barriere=110 Euro, Bonuslevel=160 Euro',
// align: 'left'
},
navigator: {
enabled: true
},
yAxis: [
{
labels: {
align: 'left'
},
height: "80%",
resize: {
enabled: true,
},
},
{
labels: {
align: 'left'
},
top: "80%",
height: "20%",
offset: 0,
},
],
credits: {
enabled: false
},
series: [
{
type: 'candlestick',
color: '#000',
upColor: '#fff',
name: 'Apple',
data: null
},
{
name: null,
data: null
}
]
}
}
},
if (this.$refs.container) {
this.chart = this.$highChart.stockChart("container", this.chartOptions);
}
</script>
here in this chart i want make it RTL support. so how can i do that? i implement all the solution of search.
Thank You in advance.

Highchart position changes when I open console or resize browser

I have setup highchart in my vue.js template. I noticed that when i open the browser console or resize the browser, the highchart tends to move up. But right after refreshing the page with that browser size, it aligns perfectly in the centre.
Here is my code
<template>
<highcharts :options="chartOptions"></highcharts>
</template>
<script>
import { Chart } from "highcharts-vue";
export default {
name: "CustomGuage",
components: {
highcharts: Chart
},
props: ["data", "title", "name", "min", "max", "format", "text", "x", "y", "target",
"targetFormat"],
data() {
return {
chartOptions: {
chart: {
type: "solidgauge",
style: {
fontFamily: 'Segoe UI Light',
fontSize :'22px',
},
// plotBackgroundColor: null,
// plotBackgroundImage: null,
// plotBorderWidth: 0,
// plotShadow: false,
marginBottom: 190
},
title: {
text: this.title,
align: "left"
},
pane: {
center: ["50%", "85%"],
startAngle: -90,
endAngle: 90,
size: 200,
background: {
innerRadius: "60%",
outerRadius: "100%",
shape: "arc",
backgroundColor: '#f2f2f2'
}
},
// the value axis
yAxis: {
min: 0,
max: this.max,
stops: [
[0.1, "#c00000"], // green
[0.5, "#ffc000"], // yellow
[0.9, "#4f6228"] // red
],
// minColor: '#DF5353',
// maxColor: '#55BF3B',
lineWidth: 0,
//tickWidth: 0,
minorTickInterval: null,
tickPositions: [0, this.max],
title: {
y: -70
},
labels: {
y: 16
}
},
credits: {
enabled: false
},
plotOptions: {
solidgauge: {
dataLabels: {
y: -1,
borderWidth: 0,
useHTML: true,
}
}
},
series: [
{
name: this.name,
data: this.data,
dataLabels: {
format: this.format
},
},
{
data: this.target,
dataLabels: {
enabled: true,
format:this.targetFormat,
verticalAlign: 'top',
borderWidth: 0,
//useHTML: true,
},
tooltip: {
enabled: false
},
type: "gauge",
dial: {
baseLength: "100%",
radius: "110%",
rearLength: "-45%",
},
}
]
}
};
},
}
};
</script>
Is there anything i can add or do to make sure that the chart position does not change?

How to slide in highcharts

I want to slide in Highcharts view , Now i just slide from 'rangeSelector'.This are my code , please help me . I don't know how to set configurations ----------------- The data are too many , but i think the data is no problem , I think the problem is my configuration ~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
this.Highcharts = Highcharts.stockChart(`${this.wrapId}`,
{
chart: {
// zoomType: "x"
plotBackgroundColor: "rgb(255, 255, 255)",
backgroundColor: "rgb(255, 255, 255)",
events: {
redraw: function() {
let series = this.series[0];
},
render: function() {}
}
},
title: {
text: ""
},
subtitle: {},
xAxis: {
type: "datetime",
dateTimeLabelFormats: {
second: '%m/%d %H:%M',
minute: '%m/%d %H:%M',
hour: '%m/%d %H:%M',
day: '%m-%d',
week: '%m-%d',
month: '%Y-%m',
year: '%Y'
},
// tickInterval: 60 * 1000, // 刻度线 1分种
lineColor: "rgb(230, 230, 230)",
lineWidth: 2,
gridLineWidth: 1,
gridZIndex: 1,
tickPosition: "outside", // 刻度
tickColor: "transparent", // 刻度颜色
gridLineColor: "transparent",
range:3600000,
},
credits: {
enabled: false
},
rangeSelector: {
enabled: false
},
navigator: {
// 下导航
enabled: true
},
scrollbar: {
enabled: true
},
// 数据提示框
tooltip: {
enabled: true,
backgroundColor: "white",
borderColor: "white",
style: {
color: "black",
zIndex:5,
}
},
yAxis: [
{
top: "0%",
height: "50%",
title: {
text: ""
},
endOnTick: true, // 强制结束于Y轴
// markers:false,
crosshair: true, // 横轴
dashStyle: "shortdot",
crosshair: {
width: 1.5,
color: "white",
dashStyle: "dash"
},
plotLines: [
{
width: 2,
color: "rgb(239, 197, 114)",
value: this.startValue,
dashStyle: "Dash",
label: {
text: `<span style="color:white;background:rgb(239, 197, 114);border-radius:3px;padding:2px 2px 0 2px;">${
this.startValue
}</span>`,
align: "right",
useHTML: true,
y: -5,
x: 0
},
zIndex: 3
}
],
gridLineWidth: 1,
gridZIndex: 1,
gridLineColor: "rgb(230, 230, 230)",
opposite: true
},
{
top: "56%",
height: "42%",
tickAmount:4,
}
],
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[
1,
Highcharts.Color(Highcharts.getOptions().colors[0])
.setOpacity(0)
.get("rgba")
]
]
},
marker: {
enabled: false,
states: {
hover: {
enabled: false
}
}
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
},
candlestick: {
upLineColor: "transparent", // docs
upColor: "rgb(235, 106, 101)",
color: "rgb(121, 170, 111)"
},
macd: {
color: "rgb(199, 103, 103)",
marker: {
enabled: false,
lineColor: "rgb(39, 40, 61)",
states: {
hover: {
enabled: false
}
}
}
}
},
series: [
{
name:"MA",
type: "candlestick",
id: "candlestick",
data: this.data,
fillColor: "",
lineColor: "",
allowPointSelect: false,
index: 4,
colors: ["rgb(235, 106, 101)", "rgb(121, 170, 111)"],
events:{
drag(a){
}
}
},
{
name:"MA1",
type: "line",
yAxis: 0,
allowPointSelect: false,
index: 5,
data: this.data_.MA1,
},
{
name:"MA2",
type: "line",
yAxis: 0,
allowPointSelect: false,
index: 5,
data: this.data_.MA2,
},
{
name:"MA3",
type: "line",
yAxis: 0,
allowPointSelect: false,
index: 5,
data: this.data_.MA3,
},
{
name:"MA4",
type: "line",
yAxis: 0,
allowPointSelect: false,
index: 5,
data: this.data_.MA4,
},
{
// Two different zones:
type: 'macd',
yAxis: 1,
linkedTo: 'candlestick',
},
// {
// type: "macd",
// yAxis: 1,
// data:this.data,
// linkedTo: 'candlestick',
// // allowPointSelect: false,
// index: 4
// },
{
name:"DEA",
type: "line",
yAxis: 1,
allowPointSelect: false,
index: 5,
data: this.data_.DEA,
},
{
name:"DIF",
type: "line",
yAxis: 1,
allowPointSelect: false,
index: 5,
data: this.data_.DIF,
},
]
})

Highcharts columnrange custom legend

I am creating a highcharts columnrange chart. I want a custom legend so that the legend would display according to "legendGrouping" and the associated colour for that series. From the jsfiddle example below I would expect the legend to show:
Running (green)
Failure (red)
Non-Failure (yellow)
Excluded (grey)
Here is the jsfiddle so far.
Highcharts.chart('ChartColumnRangeMtbf', {
chart: {
type: 'columnrange',
height: 300,
inverted: true
},
title: {
text: null
},
xAxis: {
lineColor: 'transparent',
labels: {
enabled: false
},
tickLength: 0
},
yAxis: {
gridLineWidth: 0,
max: 1511182800000,
min: 1510318800000,
lineColor: 'transparent',
startOnTick: false,
endOnTick: false,
labels: {
enabled: false
},
title: {
text: null,
},
type: 'datetime'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
},
animation: true
},
series: {
cursor: 'pointer',
borderWidth: 0,
point: {
events: {
click: function() {
location.href = '../eventview?EventID=' + this.options.id;
}
}
}
}
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%H:%M', this.point.low) +
' - ' + Highcharts.dateFormat('%H:%M', this.point.high);
}
},
legend: {
enabled: true
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
series: [{
name: 'Running',
legendGrouping: 'Running',
colorByPoint: true,
groupPadding: 0.5,
pointWidth: 50,
zIndex: 0,
data: [{
low: 1510318800000,
high: 1511182800000,
color: '#6cc14c'
}]
}, {
name: 'Events',
legendGrouping: 'Excluded',
colorByPoint: true,
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
data: [{
"id": 294,
"low": 1510750800000,
"high": 1510751592000,
"color": "#b5b2b2"
}]
}, {
name: 'Events',
legendGrouping: 'Non-Failure',
colorByPoint: true,
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
data: [{
"id": 256,
"low": 1510664400000,
"high": 1510677352000,
"color": "#fde54a"
}]
}, {
name: 'Events',
legendGrouping: 'Excluded',
colorByPoint: true,
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
data: [{
"id": 238,
"low": 1510663020000,
"high": 1510664400000,
"color": "#b5b2b2"
}]
}, {
name: 'Events',
legendGrouping: 'Excluded',
colorByPoint: true,
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
data: [{
"id": 236,
"low": 1510662963000,
"high": 1510662967000,
"color": "#b5b2b2"
}]
}, {
name: 'Events',
legendGrouping: 'Failure',
colorByPoint: true,
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
data: [{
"id": 213,
"low": 1510661669000,
"high": 1510662860000,
"color": "#d9534f"
}]
}]
});
Thanks all

Used series.bar.linkedTo to make common legend for Excluded (3 events).
legend.labelFormatter to format legend
Highcharts.chart('ChartColumnRangeMtbf', {
chart: {
type: 'columnrange',
height: 300,
inverted: true,
},
title: {
text: null
},
xAxis: {
lineColor: 'transparent',
labels: {
enabled: false
},
tickLength: 0
},
yAxis: {
gridLineWidth: 0,
max: 1511182800000,
min: 1510318800000,
lineColor: 'transparent',
startOnTick: false,
endOnTick: false,
labels: {
enabled: false
},
title: {
text: null,
},
type: 'datetime'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
},
animation: true
},
series: {
cursor: 'pointer',
borderWidth: 0,
point: {
events: {
click: function() {
location.href = '../eventview?EventID=' + this.options.id;
}
}
}
}
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%H:%M', this.point.low) +
' - ' + Highcharts.dateFormat('%H:%M', this.point.high);
}
},
legend: {
symbolPadding: 0,
symbolWidth: 0.1,
symbolHeight: 0.1,
symbolRadius: 0,
useHTML: true,
labelFormatter: function() {
//console.log(this.userOptions.legendGrouping)
return '<div>' +
'<div style="width: 18px; height: 12px; display: inline-block; background-color: ' + this.options.data[0].color + ';"> </div>' +
"<span> " + this.userOptions.legendGrouping + " </span>" +
'</div>'
}
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
series: [{
name: 'Running',
legendGrouping: 'Running',
colorByPoint: true,
groupPadding: 0.5,
pointWidth: 50,
zIndex: 0,
data: [{
low: 1510318800000,
high: 1511182800000,
color: '#6cc14c'
}]
}, {
name: 'Events',
legendGrouping: 'Excluded',
colorByPoint: true,
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
id:'ex',
data: [{
"id": 294,
"low": 1510750800000,
"high": 1510751592000,
"color": "#b5b2b2"
}]
}, {
name: 'Events',
legendGrouping: 'Non-Failure',
colorByPoint: true,
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
data: [{
"id": 256,
"low": 1510664400000,
"high": 1510677352000,
"color": "#fde54a"
}]
}, {
name: 'Events',
linkedTo:'ex',
legendGrouping: 'Excluded',
colorByPoint: true,
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
data: [{
"id": 238,
"low": 1510663020000,
"high": 1510664400000,
"color": "#b5b2b2"
}]
}, {
name: 'Events',
legendGrouping: 'Excluded',
linkedTo:'ex',
colorByPoint: true,
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
data: [{
"id": 236,
"low": 1510662963000,
"high": 1510662967000,
"color": "#b5b2b2"
}]
}, {
name: 'Events',
legendGrouping: 'Failure',
colorByPoint: true,
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
data: [{
"id": 213,
"low": 1510661669000,
"high": 1510662860000,
"color": "#d9534f"
}]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="ChartColumnRangeMtbf" style="min-width: 300px; height: 300px; margin: 0 auto"></div>
Or
If you can update series data and add color as attribute as you added in series data. And also remove colorByPoint: true,
Highcharts.chart('ChartColumnRangeMtbf', {
chart: {
type: 'columnrange',
height: 300,
inverted: true,
},
title: {
text: null
},
xAxis: {
lineColor: 'transparent',
labels: {
enabled: false
},
tickLength: 0
},
yAxis: {
gridLineWidth: 0,
max: 1511182800000,
min: 1510318800000,
lineColor: 'transparent',
startOnTick: false,
endOnTick: false,
labels: {
enabled: false
},
title: {
text: null,
},
type: 'datetime'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
},
animation: true
},
series: {
cursor: 'pointer',
borderWidth: 0,
point: {
events: {
click: function() {
location.href = '../eventview?EventID=' + this.options.id;
}
}
}
}
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%H:%M', this.point.low) +
' - ' + Highcharts.dateFormat('%H:%M', this.point.high);
}
},
legend: {
useHTML: true,
labelFormatter: function() {
return this.userOptions.legendGrouping
}
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
series: [{
name: 'Running',
legendGrouping: 'Running',
color: '#6cc14c',
groupPadding: 0.5,
pointWidth: 50,
zIndex: 0,
data: [{
low: 1510318800000,
high: 1511182800000,
color: '#6cc14c'
}]
}, {
name: 'Events',
legendGrouping: 'Excluded',
"color": "#b5b2b2",
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
id:'ex',
data: [{
"id": 294,
"low": 1510750800000,
"high": 1510751592000,
"color": "#b5b2b2"
}]
}, {
name: 'Events',
legendGrouping: 'Non-Failure',
"color": "#fde54a",
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
data: [{
"id": 256,
"low": 1510664400000,
"high": 1510677352000,
"color": "#fde54a"
}]
}, {
name: 'Events',
linkedTo:'ex',
legendGrouping: 'Excluded',
"color": "#b5b2b2",
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
data: [{
"id": 238,
"low": 1510663020000,
"high": 1510664400000,
"color": "#b5b2b2"
}]
}, {
name: 'Events',
legendGrouping: 'Excluded',
linkedTo:'ex',
"color": "#b5b2b2",
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
data: [{
"id": 236,
"low": 1510662963000,
"high": 1510662967000,
"color": "#b5b2b2"
}]
}, {
name: 'Events',
legendGrouping: 'Failure',
"color": "#d9534f",
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
data: [{
"id": 213,
"low": 1510661669000,
"high": 1510662860000,
"color": "#d9534f"
}]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="ChartColumnRangeMtbf" style="min-width: 300px; height: 300px; margin: 0 auto"></div>

HighCharts Bubble graph JSON as data source

I am stuck in a problem where bubble chart series is not plotting - inspite of doing it according to HighCharts example tutorial.
There is no error on browser console as well making it really difficult for me to figure out.
Following is the data received from AJAX onSuccess response:
d:"[{"id":"3","name":"Australia","x":"24.1","y":"19.9","z":"3.5"},{"id":"1","name":"England (STA)","x":"23.8","y":"20.5","z":"2.6"},{"id":"5","name":"Germany","x":"22.8","y":"20.9","z":"2.3"},{"id":"2","name":"Spain","x":"17.8","y":"22.2","z":"1.4"}]"
Below is full code where I binded it to HighCharts:
function ShowMaturityGraph() {
var params = {};
params.countryIDList = "1,2,3,5";
params.xAxis = "1";
params.yAxis = "2";
params.bubbleSize = "6";
$.ajax({
type: "POST",
url: "default.aspx/GetMaturityValues",
data: JSON.stringify(params),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
visitorData(response.d);
},
failure: function (response) {
alert(response.d);
}
});
}
function visitorData(data) {
alert(data);
Highcharts.chart('container', {
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
legend: {
enabled: false
},
title: {
text: 'Maturity Values'
},
subtitle: {
text: ''
},
xAxis: {
gridLineWidth: 1,
title: {
text: ''
},
labels: {
format: ''
},
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 65,
label: {
rotation: 0,
y: 15,
style: {
fontStyle: 'italic'
},
text: ''
},
zIndex: 3
}]
},
yAxis: {
startOnTick: false,
endOnTick: false,
title: {
text: ''
},
labels: {
format: ''
},
maxPadding: 0.2,
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 50,
label: {
align: 'right',
style: {
fontStyle: 'italic'
},
text: '',
x: -10
},
zIndex: 3
}]
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
//format: '{point.name}'
}
}
},
series: $.parseJSON(data),
});
}

How about something like that i am using your data. You change it as you pleased. its high chart example with data provided above in the question.
Highcharts.chart('container', {
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
legend: {
enabled: false
},
title: {
text: 'Sugar and fat intake per country'
},
subtitle: {
text: 'Source: Euromonitor and OECD'
},
xAxis: {
gridLineWidth: 1,
title: {
text: 'Daily fat intake'
},
labels: {
format: '{value} gr'
},
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 65,
label: {
rotation: 0,
y: 15,
style: {
fontStyle: 'italic'
},
text: 'Safe fat intake 65g/day'
},
zIndex: 3
}]
},
yAxis: {
startOnTick: false,
endOnTick: false,
title: {
text: 'Daily sugar intake'
},
labels: {
format: '{value} gr'
},
maxPadding: 0.2,
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 50,
label: {
align: 'right',
style: {
fontStyle: 'italic'
},
text: 'Safe sugar intake 50g/day',
x: -10
},
zIndex: 3
}]
},
tooltip: {
useHTML: true,
headerFormat: '<table>',
pointFormat: '<tr><th colspan="2"><h3>{point.country}</h3></th></tr>' +
'<tr><th>Fat intake:</th><td>{point.x}g</td></tr>' +
'<tr><th>Sugar intake:</th><td>{point.y}g</td></tr>' +
'<tr><th>Obesity (adults):</th><td>{point.z}%</td></tr>',
footerFormat: '</table>',
followPointer: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{
data: [{
"id": "3",
"name": "Australia",
"x": 24.1,
"y": 19.9,
"z": 3.5
}, {
"id": "1",
"name": "England (STA)",
"x": 23.8,
"y": 20.5,
"z": 2.6
}, {
"id": "5",
"name": "Germany",
"x": 22.8,
"y": 20.9,
"z": 2.3
}, {
"id": "2",
"name": "Spain",
"x": 17.8,
"y": 22.2,
"z": 1.4
}]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
hope that helps.

Categories