I've this HighCharts:
$('#container').highcharts({
chart: {
type: 'scatter'
},
title: {
text: 'Title'
},
plotOptions: {
scatter: {
dataLabels: {
enabled: true,
formatter: function() {
return this.point.value;
}
}
}
},
series: [
{
name: 'Points',
data: [
{ x: 10, y: 25, value: 96.1 },
{ x: 50, y: 25, value: 96.3 },
{ x: 10, y: 50, value: 96.0 },
{ x: 50, y: 50, value: 96.3 },
{ x: 90, y: 50, value: 96.4 },
{ x: 100, y: 50, value: 96.5 },
{ x: 10, y: 100, value: 96.1 },
{ x: 50, y: 100, value: 96.3 },
{ x: 100, y: 100, value: 96.6 }
]
}
]
});
I would like to mark the 90/100 point with a dashed line. How can I do that?
See my JSFiddle.
I would use scatter series with enabled line: http://jsfiddle.net/6x6s09d8/4/
{
data: [
[90, 20],
[90, 100],
[10, 100]
],
lineWidth: 2,
dashStyle: 'Dash',
lineColor: 'black',
type: 'scatter',
marker: {
enabled: false
},
showInLegend: false,
enableMouseTracking: false
}
Only limitation now is to set minPadding: 0 for both Axes.
Related
I have a problem to align titles on xAxis to the left and right like on the picture. I've tried by adding html tags and inline styles to achieve this, but it's not working. Here's my code:
xAxis: [{
type: 'category',
labels: {
step: 1,
},
scrollbar: {
enabled: true,
},
min: 0,
categories: [],
title: {
align: 'high',
rotation: 0,
y: -20,
x: 60,
text: subtitleOne,
style: {
"fontSize": "14px",
"fontWeight": "bold",
"textAlign": "left"
}
}
}, {
offset: 0,
tickLength: 0,
lineWidth: 0,
title: {
align: 'high',
rotation: 0,
y: -20,
x: 45,
text: subtitleTwo,
style: {
"fontSize": "14px",
"fontWeight": "bold"
}
}
}]
What am I doing wrong?
How do I best achieve a solid gauge, where:
it is responsive with regards to title and main value font/sizes
the title can wrap on several lines,
also without leaving the padding seen in the screenshot below
Screen shot (desktop vs mobile):
Notes:
This is based off the official highcharts example here.
Here's my options code (from a gaugeComponent.ts):
var options: any = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '55%'],
// size: '140%',
startAngle: -140,
endAngle: 140,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
min: 0,
max: 100,
stops: stops,
lineWidth: 0,
minorTickInterval: null,
tickAmount: 2,
className: 'highcharts-gauge-heading',
title: {
text: this.gauge.title,
y: -80,
},
labels: {
x: -5,
y: 30
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: -30,
borderWidth: 0,
useHTML: true
}
}
},
credits: {
enabled: false
},
series: [{
name: this.gauge.title,
data: [this.gauge.value],
dataLabels: {
format: '<div style="text-align:left"><span style="font-size:30px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span>'
}
}],
responsive: {
rules: [{
condition: {
maxWidth: 300
},
chartOptions: {
yAxis: {
className: 'highcharts-gauge-heading-small'
}
}
}]
}
}
I'm using two series for a solid gauge and the fill amount is incorrect for one of the series. I've tried adjust the tickInterval, tickValue, min, max and it doesn't make a difference. Even if I set the value to 0 it's filled about over 50% of the way.
vm.ecoScoreData = {
options : {
credits: {
enabled: false
},
navigation: {
buttonOptions: {
enabled: false
}
},
chart: {
type: 'solidgauge',
backgroundColor: '#F9F9F9',
margin: [0, 0, 0, 0],
height: 340
},
title: null,
legend: {
align: 'center',
layout: 'vertical',
labelFormatter: function () {
return '<span class="gauge-legend-item">' + this.name + '</span><span class="series-value">' + $filter('number')(this.yData[0]) + '</span>';
},
useHTML: true,
x: -10,
y: -20,
itemMarginTop: 4,
itemMarginBottom: 4
},
pane: {
center: ['50%', '70%'],
size: '100%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: '#305F2A',
innerRadius: '75%',
outerRadius: '100%',
shape: 'arc'
}
},
// the value axis
yAxis: {
minColor: '#74BC54',
maxColor: '#74BC54',
lineWidth: 0,
minorTickInterval: null,
tickAmount: 2,
title: {
text: 'Connected Vehicles',
y: 40
},
labels: {
enabled: false
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: -30,
borderWidth: 0,
useHTML: true
}
}
},
tooltip: {
enabled: false
}
},
series: [
{
name: 'Opt-In '+chartData.optInPercent+'%',
data: [{
name: 'Opt-In',
radius: 100,
innerRadius: 75,
y: chartData.optIn
}],
marker: {
symbol: 'square'
},
lineWidth: 0,
showInLegend: true,
events: {
legendItemClick: function() {
return false;
}
},
dataLabels: {
formatter: function() {
return'<div style="text-align:center"><span style="font-size:18px;color:#707070">'+$filter('number')(chartData.connectedVehicles)+'</span></div>';
}
}
},
{
name: 'Opt-Out '+chartData.optOutPercent+'%',
data: [{
name: 'Opt-Out',
radius: 100,
innerRadius: 75,
y: 0
}],
marker: {
symbol: 'square'
},
lineWidth: 0,
showInLegend: true,
events: {
legendItemClick: function() {
return false;
}
},
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:18px;color:#707070">{point.y:,.0f}</span></div>'
}
}
]
};
i have a gauge chart with two y axis. The second axis should have a size of 50% of the first axis. I know the offset property, but there i only can set numbers as a value. Is there a way to do that?
Here is a fiddle. The inner blue circle should be the half size of the outer one.
http://jsfiddle.net/jhpbc176/
$('#container').highcharts({
chart: {
type: 'gauge',
alignTicks: false,
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: null
},
tooltip: {
enabled: false
},
pane: {
startAngle: -70,
endAngle: 70,
background: null
},
plotOptions: {
gauge: {
dial: {
baseWidth: 2,
baseLength: '100%',
radius: '100%',
rearLength: 0
},
pivot: {
radius: 5
},
dataLabels: {
enabled: false
}
}
},
yAxis: [ {
min: -300,
max: 500,
tickPositions: [-300, -200, -100, 0, 100, 200, 300, 400, 500],
lineColor: '#933',
lineWidth: 0,
minorTickPosition: 'outside',
tickLength: 0,
minorTickLength: 0,
labels: {
distance: 12,
},
offset: 0,
plotBands: [{
from: -300,
to: 2,
thickness: 15,
color: '#55BF3B'
}, {
from: 0,
to: 202,
thickness: 15,
color: {
linearGradient: {x1: 0, x2: 1, y1: 0, y2: 0},
stops: [
[0, '#55BF3B'],
[1, '#DDDF0D']
]
}
}, {
from: 200,
to: 500,
thickness: 15,
color: {
linearGradient: {x1: 0, x2: 1, y1: 0, y2: 0},
stops: [
[0, '#DDDF0D'],
[1, '#ff0000']
]
}
}]
}, {
min: -200,
max: 200,
lineColor: '#339',
tickColor: '#339',
minorTickColor: '#339',
offset: -100,
lineWidth: 2,
labels: {
enabled: false
},
tickLength: 0,
minorTickLength: 0,
endOnTick: false
}],
series: [{
data: [250]
}]
});
The simplest way which comes to my mind is divide chart container by 4, then you will achive 50% of chart height.
offset: (function(){
return -1 * ($('#container').height()/4);
})(),
Example: http://jsfiddle.net/jhpbc176/1/
I am trying to use multiple series in one chart and linking the series.
Here is one example of JSfiddle:
http://jsfiddle.net/tRZz5/1/
{
name: 'Red',
id: 'red',
data: [{
x: 1392140700000,
y: 2
},
{
x: 1392140760000,
y: 2
},
{
x: 1392140820000,
y: 2
},
{
x: 1392141000000,
y: 2
},
{
x: 1392141060000,
y: 2
}],
color: 'red',
lineWidth: 20
},
{
name: 'Green',
id: 'green',
data: [{
x: 1392140880000,
y: 2
},
{
x: 1392140940000,
y: 2
}],
color: 'green',
linkedTo: 'red',
lineWidth: 20
},
{
name: 'Grey',
id: 'Grey',
data: [{
x: 1392140820000,
y: 2
},
{
x: 1392140880000,
y: 2
}],
color: 'grey',
linkedTo: 'red',
lineWidth: 20
}
This works totally fine.
But in the same code when I move Red series to the end while adding into array then it behaves differently and put total red color even if I have specified different color in between.
http://jsfiddle.net/tRZz5/2/
{
name: 'Green',
id: 'green',
data: [{
x: 1392140880000,
y: 2
},
{
x: 1392140940000,
y: 2
}],
color: 'green',
linkedTo: 'red',
lineWidth: 20
},
{
name: 'Grey',
id: 'Grey',
data: [{
x: 1392140820000,
y: 2
},
{
x: 1392140880000,
y: 2
}],
color: 'grey',
linkedTo: 'red',
lineWidth: 20
},
{
name: 'Red',
id: 'red',
data: [{
x: 1392140700000,
y: 2
},
{
x: 1392140760000,
y: 2
},
{
x: 1392140820000,
y: 2
},
{
x: 1392141000000,
y: 2
},
{
x: 1392141060000,
y: 2
}],
color: 'red',
lineWidth: 20
}
Here I just move red series from top to bottom nothing else and series is being painted totally red, I think it should same as previous series.