We Keep Coding

echarts add padding between line chart and y-axis label

I use echarts plugin to build line chart at a some web pages. It works good but I can't find out inside documentation how to add padding between line chart and y-axis label and move y-axis label to the center between y-axis split lines?
Current line echarts plugin instance view:
Expected line echarts plugin instance view:
The screenshot above mean that I mentally shifted the graph away from the internal label so that they would not intersect and moved the labels along the y-axis of the game below exactly in the center between the split lines
What settings in the plugin do I need to change to achieve the same result as in the screenshot with the expected result?

You can achieve this in the different ways, but most of the them are costly to support and harden to implement. It one of safety and ease way but you will need to keep an eye that xAxis have a little bit more points than series data to show gap.
var myChart = echarts.init(document.getElementById('main'));
var option = {
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
right: '10%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: [1, 2, 3, 4, 5, 6, 7, 8, 9]
},
yAxis: {
type: 'value',
position: 'right',
axisLabel: {
inside: true,
margin: 50,
fontSize: 18
}
},
series: [{
type: 'line',
areaStyle: {
color: 'rgba(104, 216, 214, 0.4)'
},
lineStyle: {
width: 2,
color: 'rgba(104, 216, 214, 1)'
},
data: [120, 132, 101, 134, 90, 230, 210]
}, ]
};
myChart.setOption(option);
<script src="https://cdn.jsdelivr.net/npm/echarts#4.8.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

var myChart = echarts.init(document.getElementById('main'));
var seriesData = Array.from({length: 100}, () => Math.floor(Math.random() * 5000));
var option = {
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
right: '10%',
bottom: '15%',
},
xAxis: [{
id: 'xAxis1',
type: 'category',
boundaryGap: false,
data: Array.from({length: seriesData.length}, () => Math.floor(Math.random() * 100)),
axisLine: {
lineStyle: {
shadowOffsetX: 60,
},
},
}],
yAxis: [{
type: 'value',
axisLine: { onZero: false },
position: 'right',
show: true,
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,0)',
},
},
splitLine: {
lineStyle: {
shadowOffsetX: 60,
shadowColor: '#ccc'
}
},
axisLabel: {
interval: 0,
inside: true,
margin: -45,
fontSize: 16,
padding: [-50, 0, 0, 0],
color: 'black',
showMinLabel: false,
showMaxLabel: false,
},
},{
type: 'value',
position: 'right',
show: true,
offset: 59,
}
],
dataZoom: [{
type: 'inside'
}, {
type: 'slider',
show: true,
bottom: 0
}],
series: [{
id: 'series1',
type: 'line',
yAxisIndex: [0,1],
lineStyle: {
width: 1,
},
label: {},
data: seriesData,
}],
};
myChart.setOption(option);
<script src="https://cdn.jsdelivr.net/npm/echarts#4.8.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

How to show circular progress pie chart using the highcharts

I want to achieve something like this.
this is what I have so far:
Highcharts.chart('container', {
chart: {
type: 'pie'
},
title: {
text: 'Browser market share, January, 2018'
},
subtitle: {
text: `<div>80%</div> of Total`,
align: "center",
verticalAlign: "middle",
style: {
"fontSize": "7px",
"textAlign": "center"
},
x: 0,
y: -2,
useHTML: true
},
plotOptions: {
pie: {
shadow: false,
center: ["50%", "50%"],
dataLabels: {
enabled: false
},
states: {
hover: {
enabled: false
}
},
size: "45%",
innerSize: "95%",
borderColor: null,
borderWidth: 8
}
},
tooltip: {
valueSuffix: '%'
},
series: [{
y: 80,
color: {
linearGradient: {
x1: 0,
x2: 0,
y1: 0,
y2: 1
},
stops: [
[0, "#000"],
[1, "#b0bfc6"]
]
},
name: "Speed"
},
{
y: 20,
color: "#000",
name: "Non Prioritised"
}],
});
here is the fiddle:
https://jsfiddle.net/gm8krq9L/
however I'm not able to get the different colors to show the progress effect on the chart. I see that there is a type called: chart: solidgauge, however my app does not support as I'll have to include the solidgauge file to load this kind of chart. Is there a way I can achieve this with chart type as pie?
thanks

What you want is called a donut chart. I already made an example for a such chart, is it something like this example you want?
Anyway, here's a working example with your fiddle.
The data is like the one you used:
series: [{
innerSize: '80%',
data: [{
name: 'Speed',
y: 80,
color: '#e7eaeb'
}, {
name: 'Non Prioritised',
y: 20,
}]
}],

Yes, you can create that type of chart by using pie series type, for example:
series: [{
type: 'pie',
enableMouseTracking: false,
innerSize: '80%',
dataLabels: {
enabled: false
},
data: [{
y: 10
}, {
y: 90,
color: '#e3e3e3'
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4791/
API Refernece: https://api.highcharts.com/highcharts/series.pie.innerSize

HighCharts Y Axis scales aren't correct

I cant seem to fix the Y axis scales on my chart. My JSFiddle code is here.
As you hover over the lines, the value that pops up does not match the scales on the Y Axes (Example, when you put your cursor towards the center of the graph, the Black Line has the value of 60% but when you look at the Y axis scale, it says 200%).
How would I go about fixing the Y axes so they show the appropriate values? I'm trying to make it so Signal Strength shows 0%-100%, Main Power 0-24V and Temperature showing 30F-120F.
Code:
function createChart() {
Highcharts.stockChart('container', {
alignTicks: false,
rangeSelector: {
selected: 4
},
chart: {
renderTo: 'container',
height: 500,
alignTicks: false
},
yAxis: [{ // Primary yAxis
tickAmount: 8,
tickInterval: 1,
labels: {
format: '{value}°F',
style: {
color: Highcharts.getOptions().colors[2]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: false
}, { // Secondary yAxis
tickAmount: 8,
tickInterval: 10,
title: {
text: 'Main Power',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} volts',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}, { // Tertiary yAxis
tickAmount: 8,
gridLineWidth: 0,
title: {
text: 'Signal Strength',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
format: '{value} %',
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true
}],
plotOptions: {
series: {
compare: 'percent',
showInNavigator: true
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2,
split: true
},
series: [{
name: 'Main Power',
type: 'spline',
yAxis: 1,
data: [24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24],
tooltip: {
valueSuffix: ' V'
}
}, {
name: 'Signal Strength',
type: 'spline',
yAxis: 2,
data: [20, 30, 40, 50, 60, 60, 60, 60, 70, 76, 78, 80],
marker: {
enabled: false
},
dashStyle: 'shortdot',
tooltip: {
valueSuffix: ' %'
}
}, {
name: 'Temperature',
type: 'spline',
yAxis: 0,
data: [70, 70, 76, 75, 78, 72, 80, 73, 75, 78, 72, 73],
tooltip: {
valueSuffix: ' °F'
}
}]
});

Removed the "percent" in:
plotOptions: {
series: {
compare: 'percent',
showInNavigator: true
}
},

Highcharts show percentage in the center of the solid gauge chart

I am very new to Highcharts. I am trying to use the solid gauge. The problem is that the percentage text is not present in the center. Is there anyway to put the percentage in the center of the chart?
Here is the code:
$(function () {
Highcharts.chart('container', {
chart: {
type: 'solidgauge'
},
title: {
text: ''
},
tooltip: {
borderWidth: 0,
backgroundColor: 'none',
shadow: false,
style: {
fontSize: '16px'
},
pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}%</span>',
positioner: function (labelWidth, labelHeight) {
return {
x: 200 - labelWidth / 2,
y: 180
};
}
},
pane: {
center: ['50%', '27%'],
startAngle: 0,
endAngle: 360,
background: [{ // Track for Stand
outerRadius: '62%',
innerRadius: '38%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[2]).setOpacity(0.3).get(),
borderWidth: 0,
}],
},
yAxis: {
min: 0,
max: 100,
lineWidth: 0,
tickPositions: []
},
plotOptions: {
solidgauge: {
borderWidth: '34px',
dataLabels: {
enabled: false
},
linecap: 'round',
stickyTracking: false
}
},
series: [{
name: 'Stand',
borderColor: Highcharts.getOptions().colors[2],
data: [{
color: Highcharts.getOptions().colors[2],
radius: '50%',
innerRadius: '50%',
y: 50
}]
}]
},
});
The x and y in the label option can set the position but I want it to be dynamic.
Secondly I want it to be always shown. Here is the result of the code above.

How to hide intermediate values of solid gauge chart of highcharts?

I wanted to remove intermediate number that are appeared on solid gauge chart.
e.g. I want to hide 100 from chart given in link.
Solid gauge chart
Here is my code of chart.
function myfun(data) {
var gaugeOptions = {
chart: {
renderTo: 'mydiv',
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (window.Highcharts.theme && window.Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.0, '#DF5353'], // red
[0.5, '#DF5353'],
[0.51, '#DDDF0D'],
[0.79, '#DDDF0D'], // yellow
[0.8, '#55BF3B'],
[1, '#55BF3B'] // green
],
lineWidth: 0,
minTickInterval: 100,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title: {
y: -110
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
}
};
// The speed gauge
$('#mydiv')
.highcharts(
window.Highcharts
.merge(
gaugeOptions, {
yAxis: {
min: 0,
max: 100,
title: {
text: ''
}
},
credits: {
enabled: false
},
series: [{
name: 'Speed',
data: [totalHealthScore],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' + ((window.Highcharts
.theme && window.Highcharts.theme.contrastTextColor) || 'black') +
'">{y}</span><br/>' + '<span style="font-size:12px;color:silver">Score</span></div>'
},
tooltip: {
valueSuffix: ' Score'
}
}]
}));
}
How do I hide values 2.5 and 100 from charts given in the link??

You can affect the position of the ticks using tickInterval and startOnTick, e.g.
yAxis: {
tickInterval:200,
startOnTick:true,
http://jsfiddle.net/DdAr6/
http://api.highcharts.com/highcharts#yAxis.tickInterval

The number of steps need to be defined for the y axis.
In the speedometer's code:
yAxis: {
min: 0,
max: 200,
labels: {step:2},
title: {
text: 'Speed'
}
}
In the tachometer's code:
yAxis: {
min: 0,
max: 5,
labels: {step:2},
title: {
text: 'RPM'
}
}
See http://jsfiddle.net/y62sj/ for the full code.