I have tried and came this far, but still not able to implement as per requirement.
var chart = new Highcharts.chart('container', {
chart:{
type:'gauge',
backgroundColor:'#000',
},
title: {
text: null,
},
tooltip: {
enabled: false
},
pane: {
center: ['50%', '55%'],
size: '250',
startAngle: -135,
endAngle: 135,
background: {
backgroundColor:'rgba(255, 255, 255, 0)',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc',
borderWidth: 1,
},
},
plotOptions: {
gauge: {
dial: {
radius: '92%',
backgroundColor: '#fff',
borderColor: '#fff',
borderWidth: 0,
baseWidth: 4,
topWidth: 1,
baseLength: '80%', // of radius
rearLength: '-67%'
},
pivot: {
radius: '0%',
borderWidth: 0,
borderColor: null,
backgroundColor: 'rgba(255, 255, 255, 0)',
}
}
},
yAxis: [{
min: 0,
max: 250,
minPadding:5,
minorTickInterval: 3,
minorTickLength: 38,
minorTickWidth: 2,
offset:-10,
minorTickPosition: 'inside',
minorTickColor: 'rgba(255, 255, 255, 0.3)',
tickPixelInterval:100,
tickWidth: 2,
tickPosition: 'inside',
tickLength:-10,
tickColor: '#fff',
lineWidth :1,
labels: {
step: 1,
distance: 16,
rotation: 'auto',
style:{'color':'#fff','font-weight':'bold', 'font-size': '10px'}
},
plotBands: [{
from: 0,
to: 40,
color: '#31B710' // green
}, {
from: 40,
to: 125,
color: '#12B3D9' // blue
}, {
from: 125,
to: 175,
color: '#DD3308' // red
}],
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true,
enabled:false,
}
}
},
}],
credits: {
enabled: false
},
series: [{
name: 'Speed',
data: [175],
dataLabels: {
align: "center",
borderWidth:0,
borderColor: "rgba(255, 255, 255, 0)",
className:"gauge-center-text",
style:{
'color': '#fff',
'fill': '#fff',
'font-weight': 'normal',
'font-family': 'gargi',
},
useHTML:true,
verticalAlign:'middle',
x:0,
y:0,
format: '<div style="text-align:center; color:#fff; font-family: gargi; font-weight: normal; line-height: 33px;"><span style="text-align: center;font-size:38px; font-family: gargi; font-weight: normal; display:block;">{y}</span><span style="text-align: center;font-size:14px; font-family: gargi; font-weight: normal;" >Social Good</span></div>',
},
}]
});
Please refer the fiddle to get the development done by me.
fiddle
And image to check the required gauge chart.
Please anyone have done this far so please help
You need two y axes, because you need two sets of ticks - the one with labels which extends to whole arc, and the other which extends to the dial.
The second y axis should be linked to the first and you need to set ticks manually with axis.tickPositioner.
{
linkedTo: 0,
offset: -15,
lineWidth: 0,
labels: {enabled: false},
minorTickInterval: null,
tickWidth: 1,
tickLength: 35,
tickColor: 'rgba(255, 255, 255, 0.3)',
tickPositioner: function () {
//generate ticks from 0 to 175
var interval = 3;
return Array.apply(null, Array(Math.round(175 / interval))).map((v, i) => i * interval);
}
}
Dotted lines can be set with svg presentation attribute stroke-dasharray applied on .highcharts-pane class.
.highcharts-pane {
stroke-dasharray: 1, 3
}
example: http://jsfiddle.net/yuvdddL1/
Related
In my requirement i want to display point without lines in line graphs with static background colors. I achieved almost but i am unable to set specific axes background color in chart. I used chart.js (line graphs). Please see my below code, i tried so much please see the attached image, i want to develop like that graph (o-10 axes 1 color like that, background color are fixed with that axes).
new Chart(document.getElementById("line-chart"), {
type: 'line',
data: {
labels: [0,10, 20, 30, 40, 50, 60, 70, 80, 90],
datasets: [{
data: [0,350, 400, 150, 98, 220, 410],
label: "Man Engines",
// borderColor: "#3e95cd",
backgroundColor: 'rgba(244, 81, 30, 0.8)',
borderColor: 'rgba(244, 81, 30, 0.8)',
pointBackgroundColor: 'rgba(244, 81, 30, 0.5)',
pointBorderColor: 'rgba(244, 81, 30, 0.8)',
fill: false,
pointRadius: 5,
showLine: false
}
]
},
options: {
// title: {
// display: true,
// text: 'World population per region (in millions)'
// },
scales: {
xAxes: [{
gridLines: {
drawOnChartArea: false
},
// ticks: {
// min: 1
// }
}],
yAxes: [{
gridLines: {
drawOnChartArea: false
}
}]
}
// legend: { display: false },
// fillColor: 'rgba(255, 128, 0, 0.8)',
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="line-chart"></canvas>
Like this output
Current Achieved Output
Instead of using type: line, you should use type: scatter.
You can then use chartjs-plugin-annotation.js to draw individual boxes and text on your chart.
new Chart(document.getElementById("line-chart"), {
type: 'scatter',
data: {
datasets: [{
data: [{x: 3, y: 398}, {x: 5, y: 350}, {x: 12, y: 396}, {x: 20, y: 160}, {x: 25, y: 100}, {x: 30, y: 195} ],
label: "Man Engines",
borderColor: 'rgba(244, 81, 30, 0.8)',
pointBackgroundColor: 'rgba(0, 0, 0, 1)',
pointBorderColor: 'rgba(244, 81, 30, 0.8)',
pointRadius: 5
}
]
},
options: {
legend: {
display: false
},
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'BN [mgKOH/g]',
fontStyle: 'bold'
},
gridLines: {
drawOnChartArea: false
},
ticks: {
min: 0,
max: 70,
stepSize: 10
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Iron (Fe) total [mg/kg]',
fontStyle: 'bold'
},
gridLines: {
drawOnChartArea: false
},
ticks: {
min: 0,
max: 500,
stepSize: 100
}
}]
},
annotation: {
events: ["click"],
annotations: [
{
drawTime: "beforeDatasetsDraw",
type: "box",
xScaleID: "x-axis-1",
yScaleID: "y-axis-1",
xMin: 0,
xMax: 100,
yMin: 0,
yMax: 500,
backgroundColor: "rgba(212, 0, 0, 0.8)",
borderWidth: 0
},
{
drawTime: "beforeDatasetsDraw",
type: "box",
xScaleID: "x-axis-1",
yScaleID: "y-axis-1",
xMin: 10,
xMax: 100,
yMin: -10,
yMax: 300,
backgroundColor: "rgba(255, 255, 0, 0.8)",
borderColor: "rgba(255, 128, 0, 0.5)",
borderWidth: 6
},
{
drawTime: "beforeDatasetsDraw",
type: "box",
xScaleID: "x-axis-1",
yScaleID: "y-axis-1",
xMin: 15,
xMax: 45,
yMin: -10,
yMax: 200,
backgroundColor: "rgba(0, 128, 0, 0.8)",
borderColor: "rgba(128, 255, 0, 0.5)",
borderWidth: 6
},
{
drawTime: "afterDatasetsDraw",
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-1',
value: 400,
borderColor: 'rgba(0, 0, 0, 0)',
borderWidth: 0,
label: {
fontStyle: 'normal',
fontSize: 18,
fontColor: 'white',
backgroundColor: 'rgba(0, 0, 0, 0)',
content: "Danger - Do not operate in this area",
enabled: true
}
},
{
drawTime: "afterDatasetsDraw",
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-1',
value: 250,
borderColor: 'rgba(0, 0, 0, 0)',
borderWidth: 0,
label: {
xAdjust: 40,
fontStyle: 'normal',
fontSize: 18,
fontColor: 'black',
backgroundColor: 'rgba(0, 0, 0, 0)',
content: "Alert area - Adjustment of feed rate may be needed",
enabled: true
}
},
{
drawTime: "afterDatasetsDraw",
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-1',
value: 150,
borderColor: 'rgba(0, 0, 0, 0)',
borderWidth: 0,
label: {
xAdjust: -50,
fontStyle: 'normal',
fontSize: 18,
fontColor: 'white',
backgroundColor: 'rgba(0, 0, 0, 0)',
content: "Save area",
enabled: true
}
}
]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.js"></script>
<canvas id="line-chart"></canvas>
I am using the highchart library for making chart in my website.
Facing issue:
In semi pie chart lines are showing behind the arrow, please see screen shot.
Unable to change the colors.
Code working in js-fiddle but not in my website.
Below is the code, please review and let me know if i miss something.
Code
$(function () {
Highcharts.chart('container', {
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Browser<br>shares<br>2015',
align: 'center',
verticalAlign: 'top',
y: 40
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
pane: {
center: ['50%', '75%'],
size: '50%',
startAngle: -90,
endAngle: 90,
background: {
borderWidth: 0,
backgroundColor: 'none',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
yAxis: [{
lineWidth: 0,
min: 0,
max: 90,
minorTickLength: 0,
tickLength: 0,
tickWidth: 0,
labels: {
enabled: false
},
title: {
text: '', //'<div class="gaugeFooter">46% Rate</div>',
useHTML: true,
y: 80
},
/*plotBands: [{
from: 0,
to: 46,
color: 'pink',
innerRadius: '100%',
outerRadius: '0%'
},{
from: 46,
to: 90,
color: 'tan',
innerRadius: '100%',
outerRadius: '0%'
}],*/
pane: 0,
}],
plotOptions: {
pie: {
dataLabels: {
enabled: true,
distance: -50,
style: {
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black'
}
},
startAngle: -90,
endAngle: 90,
center: ['50%', '75%']
},
gauge: {
dataLabels: {
enabled: false
},
dial: {
radius: '100%'
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
innerSize: '50%',
data: [{
name: 'Low',
y: 35,
color: 'Red' // Jane's color
},
{
name: 'Medium',
y: 30,
color: 'Yellow' // Jane's color
},
{
name: 'High',
y: 35,
color: 'Green' // Jane's color
}
]
},{
type: 'gauge',
data: [40],
dial: {
rearLength: 0
}
}],
});
});
Thanks in advance.
I am using Angular Gauge from HighChart and wanted to know if it is possible to have unequal intervals. Currently, unequal intervals on the Y-axis effects the size of each plot band in the gauge.How can I have equal plot band sizes with unequal intervals on Y-axis.
Here is an example of the intervals-0-86, 86-88, 88-90, 90-96 and 96-100.
I have tried so far-
$(function() {
$('#container').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
credits: {
enabled: false
},
title: {
text: 'Percentage %'
},
pane: {
center: ['50%', '85%'],
size: '130%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: '#EEE',
innerRadius: '80%',
outerRadius: '100%',
shape: 'arc'
}
},
exporting: {
enabled: false
},
tooltip: {
enabled: false
},
// the value axis
yAxis: [{
min: 0,
max: 100,
minorTickInterval: 'auto',
minorTickWidth: 0,
minorTickLength: 10,
minorTickPosition: 'outside',
minorTickColor: '#666',
tickPixelInterval: 50,
tickInterval: 6,
tickWidth: 2,
tickPosition: 'outside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 1,
distance: 20,
rotation: 'auto',
style: {
fontSize: '15px'
}
},
title: {
text: ''
},
plotBands: [{
from: 0,
to: 86,
color: '#bf0000',
innerRadius: '60%',
outerRadius: '100%'
}, {
from: 86,
to: 88,
innerRadius: '60%',
outerRadius: '100%',
color: '#fcfe00'
}, {
from: 88,
to: 90,
innerRadius: '60%',
outerRadius: '100%',
color: '#00ae50'
}, {
from: 90,
to: 96,
innerRadius: '60%',
outerRadius: '100%',
color: '#2f74b4'
}, {
from: 96,
to: 100,
innerRadius: '60%',
outerRadius: '100%',
color: '#7131a0'
}]
}],
plotOptions: {
gauge: {
dial: {
backgroundColor: "silver",
baseLength: "80%",
baseWidth: 4,
borderColor: "grey",
borderWidth: 1,
radius: "90%",
rearLength: "0",
topWidth: 1
},
pivot: {
backgroundColor: "silver",
borderColor: "grey",
borderWidth: 1,
radius: 5
},
dataLabels: {
y: 3,
style: {
fontSize: "15px"
},
borderWidth: 0,
useHTML: false
}
}
},
series: [{
name: 'Speed',
data: [90],
tooltip: {
valueSuffix: ''
}
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>
Any help is appreciated!
Well, As per your requiremnt It seems like you want to achieve similar to this..
where min and max should updated accordingly.
Solution-
As I am understanding you want to set all value in red below 86%. correct? so why don't you change the min value of the chart. I mean while passing value to chart manipulate your input data accordingly and pass corresponding label to it.
Hoping this will help you :)
Well, High Chart doesn't provide direct method to show selected labels on the axis.
So there is alternative way to achieve this.
Below is the running code for this-
JSFiddle- https://jsfiddle.net/vikash2402/Lxoc4d8r/16/
$(function() {
$('#container').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
credits: {
enabled: false
},
title: {
text: 'This is custom High Chart'
},
pane: {
center: ['50%', '85%'],
size: '130%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: '#EEE',
innerRadius: '80%',
outerRadius: '100%',
shape: 'arc'
}
},
exporting: {
enabled: false
},
tooltip: {
enabled: false
},
// the value axis
yAxis: [{
min: 80,
max: 100,
minorTickInterval: 'auto',
minorTickWidth: 0,
minorTickLength: 10,
minorTickPosition: 'outside',
minorTickColor: '#666',
tickPixelInterval: 20,
//tickInterval: 1,
tickWidth: 0,
tickPosition: 'outside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 1,
distance: 20,
rotation: 'auto',
style: {
fontSize: '14px'
}
},
title: {
text: ''
},
plotBands: [{
from: 80,
to: 86,
color: '#bf0000',
innerRadius: '60%',
outerRadius: '100%'
}, {
from: 86,
to: 88,
innerRadius: '60%',
outerRadius: '100%',
color: '#fcfe00'
}, {
from: 88,
to: 90,
innerRadius: '60%',
outerRadius: '100%',
color: '#00ae50'
}, {
from: 90,
to: 96,
innerRadius: '60%',
outerRadius: '100%',
color: '#2f74b4'
}, {
from: 96,
to: 100,
innerRadius: '60%',
outerRadius: '100%',
color: '#7131a0'
}]
}],
plotOptions: {
gauge: {
dial: {
backgroundColor: "silver",
baseLength: "80%",
baseWidth: 4,
borderColor: "grey",
borderWidth: 1,
radius: "90%",
rearLength: "0",
topWidth: 1
},
pivot: {
backgroundColor: "silver",
borderColor: "grey",
borderWidth: 1,
radius: 5
},
dataLabels: {
y: 3,
style: {
fontSize: "15px"
},
borderWidth: 0,
useHTML: false
}
}
},
series: [{
name: 'Speed',
data: [90],
tooltip: {
valueSuffix: ''
}
}]
});
try{
var DisplayLabels = [86, 88, 90, 96];
var labels = $(".highcharts-yaxis-labels > text>tspan");
labels.each(function(i, node){
if( DisplayLabels.indexOf(parseInt($(node).text())) == -1){
$(node).hide();
} else{
$(node).text($(node).text() + "%");
}
});
} catch(err){
console.dir(err);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>
Hoping this will help you :)
I am facing a weird issue for size of the graph.
I want the size of strip like this.
However, I am getting like this.
You can see my efforts below.
chart: {
type: 'gauge',
alignTicks: false,
height: 330,
width: 160
},
title: null,
pane: {
startAngle: -90,
endAngle: 90,
size: '90%',
background: [{
backgroundColor: '#fff',
borderWidth: 0
}]
},
yAxis: {
min: 0,
max: 100,
tickPosition: 'inside',
tickColor: '#666',
tickLength: 10,
tickWidth: 0,
minorTickWidth: 3,
minorTickColor: '#fff',
minorTickPosition: 'inside',
minorTickLength: 0,
minorTickInterval: null,
offset: -10,
lineWidth: 0,
labels: {
enabled: false
},
endOnTick: false
}
Your help would be appreciated.
If I understand your Question correctly: in a Gauge chart the 'width' of the strips is determined by the option thickness of each plotBand.
plotBands: [{
from: 0,
to: 20,
thickness: 40,
color: '#55BF3B' // green
}, {
from: 20,
to: 60,
thickness: 40,
color: '#DDDF0D' // yellow
}, {
from: 60,
to: 100,
thickness: 40,
color: '#DF5353' // red
}]
See http://jsfiddle.net/doc_snyder/zd9mshm7/ for an example.
I am trying to create a gauge using Highcharts.
In the gauge I want to render the text at the tip of the needle and the position of text should change when the needle tip position changes. I have already added the some text at the start positon and end position of gauge, I need to add third text according to needle tip.
Can you please have a look and let me know how I do it?
My jsfiddle link is http://jsfiddle.net/anchika/nszqbsgx/1/
var chart = new Highcharts.Chart({
chart: {
type: 'gauge',
renderTo: container,
marginTop: -60,
marginRight: 0,
spacingLeft: 0,
spacingBottom: 0,
backgroundColor: null,
},
pane: {
center: ['50%', '57%'],
size: '75%',
startAngle: -150,
endAngle: 150,
background: [{
borderColor: '#000',
}],
},
tooltip: {
enabled: false
},
title: {
text: null,
},
yAxis: {
min: 0,
max: 100,
title: {
y: -20,
useHTML: true,
text: 'graphTitle',
style: {
fontFamily: 'Raleway',
fontSize: '2em',
textAlign: 'center',
}
},
labels: {
enabled: false,
},
tickInterval: 16.66,
tickWidth: 5,
tickPosition: 'outside',
tickLength: 10,
tickColor: '#000',
minorTickColor: '#000',
lineColor: null,
plotBands: [{
from: 0,
to: 33,
color: '#00A600', // green
outerRadius: '100%',
thickness: '15%'
}]
},
plotOptions: {
gauge: {
innerRadius: '90%',
dial: {
backgroundColor: 'rgba(0,0,0,0.4)',
}
}
},
credits: {
enabled: false
},
series: [{
data: [33],
dataLabels: {
useHTML: true,
//format: gaugeFormat, //Modify here to change the radial center values
borderWidth: 0,
style:{
fontFamily:'Raleway',
fontWeight: 'normal',
},
x: 5,
},
tooltip: {
enabled: false,
}
}]
},
function (chart) { // on complete
chart.renderer.text('End Time',500,370)
.css({
color: '#000',
fontSize: '16px'
})
.add();
chart.renderer.text('Start Time', 240, 370)
.css({
color: '#000',
fontSize: '16px'
})
.add();
});
Edit:
I want something like this link
I`m not sure that understand your question completely,
Please check this link
var chart = new Highcharts.Chart({
chart: {
type: 'gauge',
renderTo: container,
marginTop: -60,
marginRight: 0,
spacingLeft: 0,
spacingBottom: 0,
backgroundColor: null,
},
pane: {
center: ['50%', '57%'],
size: '60%',
startAngle: -150,
endAngle: 150,
background: [{
borderColor: '#000',
}],
},
tooltip: {
enabled: false
},
title: {
text: null,
},
yAxis: {
min: 0,
max: 100,
title: {
y: -20,
useHTML: true,
text: 'graphTitle',
style: {
fontFamily: 'Raleway',
fontSize: '2em',
textAlign: 'center',
}
},
labels: {
enabled: false,
},
tickInterval: 16.66,
tickWidth: 5,
tickPosition: 'outside',
tickLength: 10,
tickColor: '#000',
minorTickColor: '#000',
lineColor: null,
plotBands: [{
from: 0,
to: 33,
color: '#00A600', // green
outerRadius: '100%',
thickness: '15%'
}]
},
plotOptions: {
gauge: {
innerRadius: '90%',
dial: {
backgroundColor: 'rgba(0,0,0,0.4)',
}
}
},
credits: {
enabled: false
},
series: [{
data: [100],
dataLabels: {
useHTML: true,
//format: gaugeFormat, //Modify here to change the radial center values
borderWidth: 0,
style:{
fontFamily:'Raleway',
fontWeight: 'normal',
},
x: 5,
},
tooltip: {
enabled: false,
}
}]
},
function (chart) { // on complete
console.log(chart); chart.renderer.text(chart.series[0].data[0].y,140+chart.series[0].data[0].y*2,350)
.css({
color: '#000',
fontSize: '16px'
})
.add();
});