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.
I want to create a gauge chart like this.
So i have tried highchart library. I could draw the chart with positive values.
like this.
$(function () {
var rate_data = {
"ranges":[
{"name":"Maintain","start":0, "end":0.12147311428571},
{"name":"Slow", "start":0.12147311428571, "end":0.21491397142857},
{"name":"Adequate", "start":0.21491397142857, "end":0.8503118},
{"name":"Too Fast", "start":0.8503118, "end":1.4109569429}
],
"value":0.4177
};
$('#container').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Weight Oscillation Rate'
},
credits: {
enabled: false
},
pane: {
startAngle: -150,
endAngle: 150,
background: [{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#FFF'],
[1, '#333']
]
},
borderWidth: 0,
outerRadius: '109%'
}, {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#333'],
[1, '#FFF']
]
},
borderWidth: 1,
outerRadius: '107%'
}, {
// default background
}, {
backgroundColor: '#DDD',
borderWidth: 0,
outerRadius: '105%',
innerRadius: '103%'
}]
},
// the value axis
yAxis: {
min: 0,
max: 1.4109569429,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'side',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: ''
},
plotBands: [{
from: rate_data['ranges'][0]['start'],
to: rate_data['ranges'][0]['end'],
color: '#FF8000' // orange
}, {
from: rate_data['ranges'][1]['start'],
to: rate_data['ranges'][1]['end'],
color: '#DDDF0D' // yellow
}, {
from: rate_data['ranges'][2]['start'],
to: rate_data['ranges'][2]['end'],
color: '#01DF01' // green
}, {
from: rate_data['ranges'][3]['start'],
to: rate_data['ranges'][3]['end'],
color: '#DF5353' // red
}]
},
series: [{
name: 'Speed',
data: [80],
tooltip: {
valueSuffix: ' '
}
}]
},
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
var point = chart.series[0].points[0],
newVal,
inc = Math.round((Math.random() - 0.5) * 20);
point.update(rate_data['value']);
}
});
});
But it is upset with negative values. This is my new array.
var rate_data = {
"ranges":[
{"name":"Maintain","start":0, "end":-0.12147311428571},
{"name":"Slow", "start":-0.12147311428571, "end":-0.21491397142857},
{"name":"Adequate", "start":-0.21491397142857, "end":-0.8503118},
{"name":"Too Fast", "start":-0.8503118, "end":-1.4109569429}
],
"value":-0.4177
};
Please check http://jsfiddle.net/fWvCT/
I couldn't find the solution in the Internet. (Also i need add the names in the array as label. Is it possible? )
There are a couple of problems here.
1) you have your yAxis min set to 0. It won't display negative numbers this way. Adjust your min and max to reflect the actual values needed.
2) having done that, you'll see that your bands are all out of whack.
You have the start/end values specified in reverse: the start should be the lower number, and the end the higher.
Example:
http://jsfiddle.net/jlbriggs/YNwvn/
For someone looking to get the same look and feel, this will help
see script below
Highcharts.chart('container', {
chart: {
type: 'gauge',
backgroundColor: 'transparent'
},
title: {
text: ''
},
pane: {
background:null,
startAngle: -90,
endAngle: 90,
center: ['50%', '50%'],
},
// the value axis
yAxis: {
lineWidth: 0,
min: -1.4,
max: 0,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 0.1,
tickWidth: 2,
tickPosition: 'side',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
y:20,
style:{
color:'#000',
cursor:'default',
fontSize:'14px'
}
},
title: {
text: 'Progress',
style: {
color: '#FFF',
fontWeight: 'bold'
},
y:60
},
plotBands: [{
from: -1.40,
to: -0.85,
color: '#3285167d', // green
thickness:50,
label:{
text:'Too fast!',
textAlign: 'center',
x: 160
}
}, {
from: -0.85,
to: -0.21,
color: '#DDDF0D', // yellow
thickness:50
}, {
from: -0.21,
to: -0.12,
color: '#DF5353', // red
thickness:50
}, {
from: -0.12,
to: 0,
color: 'blue', // blue
thickness:50
}]
},
series: [{
name: 'Progress',
data: [-0.1],
tooltip: {
valueSuffix: ' Progress'
}
}]
},
// Add some life
function (chart) {
});
#container {
height: 400px;
}
.highcharts-figure, .highcharts-data-table table {
min-width: 310px;
max-width: 500px;
margin: 1em auto;
}
.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/highcharts-more.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>