We Keep Coding

Apexcharts radialbar label background

I'm trying to do a chart created on Figma in Angular 12 with apexcharts.
With the code, I can do something like the below comparison.
Figma Design
Angular 12 with Apexcharts
How can add the triangle pointer/marker on apexcharts? (Its possible made the pointer on apexcharts radialBar?)
This is my Apexcharts code
this.chartOptions = {
series: [70],
chart: {
height: 240,
type: "radialBar",
toolbar: {
show: true
},
},
plotOptions: {
radialBar: {
inverseOrder: false,
startAngle: -180,
endAngle: 180,
hollow: {
margin: 20,
size: '65%',
background: '#fff',
position: 'front',
dropShadow: {
enabled: true,
top: 3,
left: 0,
blur: 10,
opacity: 0.1
}
},
track: {
background: '#F8F8F8',
strokeWidth: '100%',
margin: 0, // margin is in pixels
},
dataLabels: {
show: true,
value: {
offsetY:-7,
color: '#000000',
fontSize: '25px',
show: true,
}
}
}
},
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
opacityFrom: 0.7,
opacityTo: 0.9,
colorStops: [
{
offset: 0,
color: "#FFBB0D",
opacity: 1
},
{
offset: 40,
color: "#FFBB0D",
opacity: 1
},
{
offset: 60,
color: "#FF720D",
opacity: 1
},
{
offset: 100,
color: "#FF720D",
opacity: 1
}
]
}
}
};

How can I format the Highcharts gantt chart to be a dashed line instead of a solid line?

I have made the following gantt chart using Highcharts Gantt chart. However, i want a part of the line to be dashed instead of solid. Something like this -
However i'm unable to make it dashed. It always appears to be solid. How do i make it dashed and that too, only a certain part of it ?
The following is my current chart option. 'this.series' is the data i'm providing to the chart.
{
chart: {
type: 'gantt',
title: {
text: 'Gantt Chart with Progress Indicators'
},
xAxis: [{
min: Date.UTC(2016, 1, 1),
max: Date.UTC(2016, 1, 1) + this.day * 365 * 6,
// max: Date.UTC(2039, 12, 31),
tickInterval: this.day * 365, // 1 year
scrollbar: {
enabled: true,
barBorderRadius: 4,
height: 9,
minWidth: 9,
barBackgroundColor: '#333',
trackBackgroundColor: '#F2F2F2',
margin: -12,
buttonBackgroundColor: 'none',
buttonBorderWidth: 0,
buttonArrowColor: 'none',
buttonBorderRadius: 0,
showFull: false
},
gridLineWidth: 1,
labels: {
align: 'center',
style: {
fontFamily: 'Helvetica',
fontSize: 13,
color: '#333333',
minWidth: '160px',
fontWeight: 'bold'
// textOverflow: 'ellipsis'
}
},
}],
yAxis: {
type: 'category',
grid: {
cellHeight: 44,
columns: [{
title: {
text: 'Study ID',
style: {
fontFamily: 'Helvetica',
fontSize: 13,
color: '#333333',
width: '160px',
fontWeight: 'bold'
}
},
labels: {
format: '{point.nct_id}',
}
// categories: this.map(this.series, function (s) {
// return s.name;
// })
}],
},
min: 0,
max: 10,
scrollbar: {
enabled: true,
barBorderRadius: 4,
height: 9,
minWidth: 9,
barBackgroundColor: '#333',
trackBackgroundColor: '#F2F2F2',
margin: -10,
buttonBackgroundColor: 'none',
buttonBorderWidth: 0,
buttonArrowColor: 'none',
buttonBorderRadius: 0,
},
labels: {
style: {
fontFamily: 'Helvetica',
fontSize: 14,
color: '#007BFF',
minWidth: '160px',
textOverflow: 'ellipsis'
}
},
},
plotOptions: {
gantt: {
},
},
series: [{
name: 'Project 1',
type: 'gantt',
data: this.series,
dataLabels: [{
enabled: true,
format: '<div style="width: 16px; height: 16px; overflow: hidden; border-radius: 50%; margin-left: -12px; background: #0E4A91;"></div>',
useHTML: true,
align: 'left'
}, {
enabled: true,
format: '<div style="width: 16px; height: 16px; overflow: hidden; border-radius: 50%; margin-right: -12px; background: #0E4A91"></div>',
useHTML: true,
align: 'right',
style: {
overflow: 'hidden'
}
}],
}],
credits: {
enabled: false
}
}
It would be a great help if someone could help me out with this. Thanks!

You can use line series with zones:
series: [{
name: 'Project 1',
type: 'line',
zoneAxis: 'x',
zones: [{
value: Date.UTC(2014, 10, 28)
}, {
dashStyle: 'dot',
value: Date.UTC(2014, 10, 29)
}],
data: [{
x: Date.UTC(2014, 10, 27),
y: 0
}, {
x: Date.UTC(2014, 10, 29),
y: 0
}]
}, ...]
Live demo: https://jsfiddle.net/BlackLabel/b7xdcjpt/
API Reference: https://api.highcharts.com/highcharts/series.line.zones

Highcharts speedometer gauge change label

I want to implement speedometer to display internet bandwidth speed but I want to change its number sequence. I have search a lot but couldn't find anything.
Please find below code snippet for the highchart gauge. I want to change the label (number). In below example number sequence is 0,10,20,30,...,100.
But my requirement is number sequence should be 0,1,5,10,20,30,40,50,60,70,80,90,100
Check following image of gauge:
Highchart image
But my requirement is number sequence should be 0,1,5,10,20,30,40,50,60,70,80,90,100
Is there any way to change the numbers ?
Highcharts.chart('container', {
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Speedometer'
},
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: 100,
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: 'Mbps'
},
plotBands: [{
from: 0,
to: 60,
color: '#55BF3B' // green
}, {
from: 60,
to: 80,
color: '#DDDF0D' // yellow
}, {
from: 80,
to: 100,
color: '#DF5353' // red
}]
},
series: [{
name: 'Speed',
data: [80],
tooltip: {
valueSuffix: ' km/h'
}
}]
},
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
setInterval(function () {
var point = chart.series[0].points[0],
newVal,
inc = Math.round((Math.random() - 0.5) * 20);
newVal = point.y + inc;
if (newVal < 0 || newVal > 200) {
newVal = point.y - inc;
}
point.update(newVal);
}, 3000);
}
});
<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="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>

You can specify specific tick-positions using yAxis.tickPositions (API).
In your case:
yAxis: {
tickPositions: [0,1,5,10,20,30,40,50,60,70,80,90,100]
}
In your example you have yAxis.labels.step set to 2, which needs to be removed so that you don't skip over any labels for your defined tickPositions (unless you want to that is).
See this JSFiddle demonstration of your suggested labels.

Highcharts: Change needle color of Gauge Chart on Hover

http://jsfiddle.net/2egpa8eb/
plotOptions: {
gauge: {
allowPointSelect: true,
states: {
hover: {
enabled: true,
marker: {
fillColor: "#FF0000",
lineColor: "#0000FF",
lineWidth: 5
}
}
}
}
},
I want to change the color of the "needle" on hover and select (see image below). I have used the above options as per api given in http://api.highcharts.com/highcharts#plotOptions.gauge.states but it did not work. Is there any way to achieve this?

You can style the needle on hover using CSS like this:
div.highcharts-container:hover g.highcharts-tracker > * {
fill :#f00;
}
You would need to ensure that div.highcharts-container was unique to just the charts you are targeting as this example is pretty generic, say you had multiple charts on the same page or using the same CSS for instance, this CSS would target them all.
I'm not sure what you can "select" on these charts to answer your second question.
http://jsfiddle.net/2egpa8eb/1/
$(function() {
$('#container').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Speedometer'
},
plotOptions: {
gauge: {
allowPointSelect: true,
states: {
hover: {
enabled: true,
marker: {
fillColor: "#FF0000",
lineColor: "#0000FF",
lineWidth: 5
}
}
}
}
},
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: 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: 120,
color: '#55BF3B' // green
}, {
from: 120,
to: 160,
color: '#DDDF0D' // yellow
}, {
from: 160,
to: 200,
color: '#DF5353' // red
}]
},
series: [{
name: 'Speed',
data: [80],
tooltip: {
valueSuffix: ' km/h'
}
}]
});
});
div.highcharts-container:hover g.highcharts-tracker > * {
fill :#f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>

You can refer to the load event and then attach the custom events by on declaration.
chart: {
type: 'gauge',
events:{
load:function() {
var chart = this,
graph = chart.series[0].data[0].graphic;
graph
.on('mouseover',function(){
graph.attr({
fill: 'red'
});
})
.on('mouseout',function(){
graph.attr({
fill: 'black'
});
})
.on('click', function() {
graph.attr({
fill: 'green'
});
});
}
}
},
http://jsfiddle.net/6dbegyvs/

Highcharts Gauge

I'm using highcharts and i'd like to show a big gauge(500x500px).
Resizing the gauge was quite easy, but the small block with the value in it doesn't resize. How can I make that small block bigger?
Thanks for the help!
jsFiddle: http://jsfiddle.net/AVd8k/
$(function () {
$('#container').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false,
width: 500,
height: 500
},
title: {
text: 'Speedometer'
},
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: 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: 120,
color: '#55BF3B' // green
}, {
from: 120,
to: 160,
color: '#DDDF0D' // yellow
}, {
from: 160,
to: 200,
color: '#DF5353' // red
}]
},
series: [{
name: 'Speed',
data: [80],
tooltip: {
valueSuffix: ' km/h'
}
}]
},
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
setInterval(function () {
var point = chart.series[0].points[0],
newVal,
inc = Math.round((Math.random() - 0.5) * 20);
newVal = point.y + inc;
if (newVal < 0 || newVal > 200) {
newVal = point.y - inc;
}
point.update(newVal);
}, 3000);
}
});
});

try this by replacing series (whole object) with:
series: [{
name: 'Speed',
data: [80],
tooltip: {
valueSuffix: ' km/h'
},
dataLabels: {
enabled: true,
style: {
//fontWeight:'bold',
fontSize: '22px'
}
}
}]
Proof: http://jsfiddle.net/nmQfE/
Of course, you can adjust the font size as you want

It looks like the property you are after is:
plotOptions.gauge.dataLabels.style.fontSize
http://api.highcharts.com/highcharts#plotOptions.gauge.dataLabels.style
Try adding something like this to the options:
plotOptions: {
gauge: {
dataLabels: {
style: {
fontSize: '60px'
}
}
}
}
You may need to reposition it using the x and y properties.