Highcharts-ng add a custom button to speedometer - angularjs

I am working with angularjs highcharts-ng
https://github.com/pablojim/highcharts-ng
I need to add a custom button to the speedometer.
I've found this:
Add buttons in chart of Highcharts at runtime
exporting: {
buttons: {
customButton: {
text: 'Custom Button',
onclick: function () {
alert('You pressed the button!');
}
}
}
}
But it is not working to me:
$scope.highchartsNG = {
options: {
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%'
}]
}
},
exporting: {
buttons: {
customButton: {
text: 'Custom Button',
onclick: function () {
alert('You pressed the button!');
}
}
}
},
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
}]
},
buttons: {
customButton: {
text: 'Custom Button'
}
}
,
series: [{
name: 'Speed',
data: [80],
tooltip: {
valueSuffix: ' km/h'
}
}],
};
http://jsfiddle.net/76dLm8h7/3/
I've tried to add the "exporting" option in different possitions inside the array, but It does'nt work.
Any help will be appreciate.
Thanks in advance.

Related

Highcharts column chart with target and color gradient

Is below chart possible in highchart
Column with high, low and target
Color gradient with denser on target and lighter away
Data table for low, high and target
Managed to get some bits, but not full functionality
https://jsfiddle.net/z9u5hgod/2/
TIA
[
{
type: 'bullet',
dataLabels: [
{ format: '{point.y}' } ,
{format: '{point.target}',
inside: true},
{
inside: true,
verticalAlign: 'bottom',
align: 'center',
format: '{point.low}'
}
],
data: [
{
low: 250,
y: 1650,
target: 750,
color: {
linearGradient: [0, '70%', 0, '50%'],
stops: [
[0, 'green'],
[1, 'orange']
]
}
},
{
low: 100,
y: 2000,
target: 1500
}
]
},
{
data: [{
low: 600,
y: 2350,
target: 2100
}, {
low: 450,
y: 1700,
target: 1250
}]
}]
Response from higcharts developer
https://jsfiddle.net/BlackLabel/xbvp8he7/
const chart = Highcharts.chart('container', {
chart: {
type: 'bullet',
events: {
load() {
const firstSeries = this.series[0];
firstSeries.data.forEach(point => {
const {
low,
y,
target
} = point,
gradientPoint = (y - target) / (y - low);
point.update({
color: {
linearGradient: {
x1: 0,
x2: 0,
y1: 0,
y2: 1
},
stops: [
[0, 'blue'],
[gradientPoint, 'purple'],
[1, 'blue']
],
}
})
})
}
}
},
plotOptions: {
series: {
pointPadding: 0.2,
groupPadding: 0.1,
targetOptions: {
borderWidth: 0,
height: 3,
color: 'red',
width: '100%'
}
}
},
xAxis: {
categories: ['Alex ar', 'Cairo ar']
},
series: [
{
type: 'bullet',
dataLabels: [{
enabled: true,
}, {
enabled: true,
verticalAlign: 'top',
align: 'center',
color: 'white',
useHTML: true,
formatter() {
const point = this.point,
target = point.targetGraphic,
targetY = target.getBBox().y - point.shapeArgs.y - 25;
return `
<div class="datalabelInside" style="position: relative; top: ${targetY}px">${point.target}</div>
`;
}
}, {
verticalAlign: 'bottom',
inside: true,
y: 20,
format: '{point.low}',
enabled: true
}, ],
data: [{
low: 250,
y: 1650,
target: 750
},
{
low: 100,
y: 2000,
target: 1500
}
]
},
{
data: [{
low: 600,
y: 2350,
target: 2100
}, {
low: 450,
y: 1700,
target: 1250
}]
}
],
tooltip: {
pointFormat: '<b>{point.y}</b> (with target at {point.target})'
}
});

Why inactive option not working on scatter highcharts

I have try to show inactive setting in my chart. But it's not showing in my project { it's worked on another live editor }
Chart Library: Highcharts
Chart type: scatter
Chart Version:
"highcharts": "^6.1.1",
"highcharts-more": "^0.1.7","highcharts-react-official": "^3.1.0",
``const config = {
chart: {
zoomType: 'x',
type: 'scatter',
height: 400,
spacingLeft: 0,
spacingRight: 0,
spacingTop: 0,
spacingBottom: 0,
margin: [30, 50, 80, 180],
width: null,
style: {
fontFamily: 'Fira Sans'
},
},
title: {
text: '',
},
subtitle: {
text: '',
},
xAxis: {
type: 'datetime',
ordinal: false,
startOnTick: false,
endOnTick: false,
minPadding: 0,
maxPadding: 0,
Date: false,
tickInterval: 3600 * 4000,
minTickInterval: 3600 * 100,
minRange: 1000 * 60 * 60,
dateTimeLabelFormats: {
minute: '%I:%M',
hour: '%I %P',
},
offset: 0,
},
yAxis: [
{
title: {
text: 'Part A',
align: "high",
textAlign: "right",
rotation: 0,
offset: 0,
margin: 0,
y: -10,
x: -15,
style: {
fontWeight: 500,
fontSize: '14px',
lineHeight: 20,
color: "#333333",
},
},
labels: {
style: {
fontWeight: 300,
fontSize: '14px',
lineHeight: 16,
color: "#333333",
letterSpacing: 0,
},
y: 3,
align:'right',
},
categories: ['', 'B1', 'B2', '', 'A1', 'A2', 'A3', ''],
},
{
title: {
text: 'Part B',
align: "middle",
textAlign: "right",
rotation: 0,
offset: 0,
margin: 0,
y: 30,
x: 25,
style: {
fontWeight: 500,
fontSize: '14px',
lineHeight: 20,
color: "#333333",
},
},
},
],
plotOptions: {
column: {
stacking: 'normal',
column: {
pointPadding: 0,
borderWidth: 0,
groupPadding: 0,
grouping: true,
}
},
},
series: [
{
"name": "Poor",
"data": [[1.424304e+12, 1], [1.4243076e+12, 2], [1.4243148e+12, 1], [1.4243301e+12, 1], [1.4243364e+12, 6]],
color: '#FF8A45',
marker: {
symbol: 'square'
},
},
{
"name": "Fair",
"data": [[1.424304e+12, 6], [1.4243112e+12, 1], [1.4243292e+12, 2], [1.4243436e+12, 2], [1.4243616e+12, 2]],
color: '#FFC100',
marker: {
symbol: 'square'
},
},
{
"name": "Moderate",
"data": [[1.4243616e+12, 4], [1.4243436e+12, 4], [1.4243112e+12, 4], [1.424304e+12, 4], [1.4243292e+12, 6]],
color: '#B7DCFD',
marker: {
symbol: 'square'
},
},
{
"name": "Good",
"data": [[1.424304e+12, 5], [1.4243112e+12, 5], [1.4243292e+12, 5], [1.4243436e+12, 5], [1.4243616e+12, 6]],
color: '#00C96A',
marker: {
symbol: 'square'
},
},
],
credits: {
enabled: false
},
};``
Here is my full config of hoghchart
You are using the 6.1.1 version but inactive option is available from 7.1.0 https://www.highcharts.com/blog/changelog/#highcharts-v7.1.0 .
I would recommend to always using the latest highcharts version.
So, all you have to do is set "highcharts": "latest" in your project.
If for some reason you need to use an older version, use mouseOver and mouseOut events to change the series color on hover.
plotOptions: {
series: {
events: {
mouseOver: function() {
let hoveredSeries = this;
let allSeries = this.chart.series;
allSeries.forEach(series => {
if (series === hoveredSeries) {
return true
} else if (series.name === 'A') {
series.update({
color: 'rgba(0, 155, 0, 0.5)',
})
} else if (series.name === 'B') {
series.update({
color: 'rgba(255, 0, 0, 0.5)'
})
}
})
},
mouseOut: function() {
let hoveredSeries = this;
let allSeries = this.chart.series;
allSeries.forEach(series => {
if (series === hoveredSeries) {
return true
} else if (series.name === 'A') {
series.update({
color: 'rgba(0, 155, 0, 1)',
})
} else if (series.name === 'B') {
series.update({
color: 'rgba(255, 0, 0, 1)'
})
}
})
}
}
}
},
Example demo:
https://jsfiddle.net/BlackLabel/zgjsof7L/
API Reference:
https://api.highcharts.com/highcharts/plotOptions.series.events.mouseOver

React HighCharts Custom Legend

I'm trying to customise my chart's legend. My current legend needs to look like this legend.
Basically I need to make the circular icons rectangular and change the legend text color to correspond with the icon.
I've looked everywhere in the docs but I'm not finding a solution. This is how I configured the graph below (legend > itemStyle):
useEffect(() => {
Highcharts.chart(chart.current, {
chart: {
type: 'column',
style: {
fontFamily: '"Roboto", sans-serif',
},
height: 312,
},
credits: {
enabled: false,
},
title: {
text: null,
},
xAxis: {
categories,
labels: {
step: 1,
style: {
fontSize: '8px',
color: '#808992',
},
useHTML: true,
formatter() {
const day = this.value.format('D');
if (moment().isSame(this.value, 'd')) {
return `<strong style="font-weight: 900; color: #0E2C47;">${day}</strong>`;
}
return day;
},
},
gridLineWidth: 1,
},
yAxis: {
min: 0,
title: {
text: `Collections ${showValue ? 'value' : 'count'}`,
style: {
color: '#0E2C47',
fontWeight: '500',
fontSize: '12px',
letterSpacing: '0.3px',
lineHeight: '14.4px',
},
},
labels: {
style: {
fontSize: '8px',
color: '#808992',
},
useHTML: true,
formatter() {
// eslint-disable-next-line react/no-this-in-sfc
const collection = this.value;
const format = Math.abs(collection) > 999 ? `${Math.sign(collection) * ((Math.abs(collection) / 1000).toFixed(1))}K` : Math.sign(collection) * Math.abs(collection);
return `${format}`;
},
},
useHTML: true,
},
legend: {
title: {
text: 'Status',
style: {
fontSize: '12px',
letterSpacing: '0.3px',
color: '#0A1944',
fontWeight: '500',
},
},
itemStyle: {
fontSize: '10px',
letterSpacing: '0.25px',
fontWeight: '500',
color: '#0A1944',
},
reversed: 'true',
layout: 'vertical',
align: 'right',
verticalAlign: 'bottom',
itemMarginBottom: 8,
x: -30,
y: -2,
},
plotOptions: {
series: {
stacking: 'normal',
},
},
tooltip: {
formatter() {
// eslint-disable-next-line react/no-this-in-sfc
return `<b>${this.y} ${this.series.name}</b><br/>${this.x.format('D MMM YYYY')}`;
},
},
series: [{
name: 'Draft',
data: chartData.draft, // [...times(() => null, 30), ...times(random, 31)],
color: collectionStateColors.draft, // processed
legendIndex: 0,
}, {
name: 'Approved',
data: chartData.approved,
color: collectionStateColors.approved, // orange
legendIndex: 1,
}, {
name: 'Expired',
data: chartData.expired,
color: collectionStateColors.expired, // purple
legendIndex: 2,
}, {
name: 'Submitted',
data: chartData.submitted,
color: collectionStateColors.submitted, // purple
legendIndex: 3,
}, {
name: 'Tracking',
data: chartData.tracking,
color: collectionStateColors.tracking, // light blue
legendIndex: 4,
}, {
name: 'Processed',
data: chartData.processed,
color: collectionStateColors.processed, // dark blue
legendIndex: 5,
}],
});
});

Highcharts Showing negative values on tooltip

I have set min:0, in y-axis. But in tooltip i want to show negative values also and also it should start with value y=0 only.
if i will remove min:0 in y axis it will show negative values with tooltip in chart. But i only want to see negative values on tooltip not on chart.
but it is not allowing me to show negative values.
below is sample code.
$(id).highcharts({
chart: {
zoomType: 'xy',
marginLeft: 45,
marginRight: rightval - 10
},
title: { text: title },
exporting: { enabled: false },
credits: { enabled: false },
legend: { enabled: false, align: 'left', x: 10, verticalAlign: 'bottom', y: 3, shadow: false },
xAxis: {
min: minimum,
max: maximum,
scrollbar: {
enabled: scroobarVal
},
fontWeight: 'bold',
categories: Data['categories'],
labels: {
y: 20,
rotation: 0,
style: {
color: 'gray',
//fontSize:'1px !important;'
}
}
},
yAxis: [{
min: 0,
allowDecimals: false,
endOnTick: false,
gridLineWidth: 0,
labels: {
formatter: function () {
if (optionSelected == 'Day') {
return this.value;
} else {
return this.value / 1000000 + 'M';
}
},
style: {
color: '#767676'
}
},
offset: -10,
title: {
text: 'Inv ' + val_qty,
"textAlign": 'top',
"rotation": 0,
x: 60,
y: yaxisVal,
style: {
color: '#767676',
fontWeight: 'bold'
}
}
}, {
allowDecimals: false,
min: 0,
endOnTick: false,
gridLineWidth: 0,
title: {
text: y2axisname,
"textAlign": 'top',
"rotation": 0,
x: -75,
y: yaxisVal,
style: {
color: '#767676',
fontWeight: 'bold'
}
},
offset: -10,
labels: {
format: '{value}',
style: {
color: '#767676'
}
},
opposite: true
}],
labels: {
items: [{
html: ' ',
style: {
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}]
},
tooltip: {
style: { fontSize: '7pt' },
formatter: function () {
var s = '<b>' + this.x + '</b>';
$.each(this.points, function (i, point) {
s += '<br/><span style="color:' + point.series.color + '">\u25CF</span> ' + point.series.name + ': <b>' + CurrencySymbol + '</b>' + point.y.toString().replace(/,/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ", ");
});
return s;
},
shared: true
},
series: Data['series'],
});
I don't think there is a simple way to do this on Highchart.
One hacky way I found (don't judge me!) is to have a "ghost" series and set the tooltip.shared option to true.
Check it here: http://jsfiddle.net/arryx9rf/

Can a gauge chart have multicolor?

Please see this code and try to find solution with exact code because I am fresher in EXTJS:
var chart=Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
store: store,
width: 400,
height: 250,
animate: true,
insetPadding: 30,
axes: [{
type: 'gauge',
position: 'gauge',
minimum: 0,
maximum: 100,
steps: 10,
margin: 10
}],
gradients: [{
'id': 'v-1',
'angle': 0,
stops: {
0: {
color: 'rgb(212, 40, 40)'
},
100: {
color: 'rgb(117, 14, 14)'
}
}
},
{
'id': 'v-2',
'angle': 0,
stops: {
0: {
color: 'rgb(180, 216, 42)'
},
100: {
color: 'rgb(94, 114, 13)'
}
}
},
{
'id': 'v-3',
'angle': 0,
stops: {
0: {
color: 'rgb(43, 221, 115)'
},
100: {
color: 'rgb(14, 117, 56)'
}
}
},
{
'id': 'v-4',
'angle': 0,
stops: {
0: {
color: 'rgb(45, 117, 226)'
},
100: {
color: 'rgb(14, 56, 117)'
}
}
},
{
'id': 'v-5',
'angle': 0,
stops: {
0: {
color: 'rgb(187, 45, 222)'
},
100: {
color: 'rgb(85, 10, 103)'
}
}
}],
series: [{
type: 'gauge',
field: 'value',
donut: 30,
colorSet: ['url(#v-1)', '#ddd']
}]
});
Here is the portion of the code. I just want to know is this possible that gauge chart have Multi background color where they all are static? Like 0-25=red , 25-50= yellow ,50-100= green.
Yes. Someone has already gone through of work of doing this very thing by extending the gauge series: http://www.sencha.com/forum/showthread.php?159879-KPI-Gauge
There is a .zip you can download and add to your library. Then you can essentially just do:
{
xtype: 'chart',
style: 'background:#fff',
animate: {
easing: 'elasticIn',
duration: 1000
},
store: store1,
insetPadding: 50,
flex: 1,
axes: [{
type: 'kpigauge',
position: 'left',
minimum: 0,
maximum: 100,
steps: 10,
margin: 0,
label: {
fill: '#333',
font: '12px Heveltica, sans-serif'
}
}],
series: [{
type: 'kpigauge',
field: 'data1',
needle: {
width: 2,
pivotFill: '#000',
pivotRadius: 5
},
ranges: [{
from: 0,
to: 70,
color: '#FF0000'
}, {
from: 70,
to: 90,
color: '#FFFF00'
}, {
from: 90,
to: 100,
color: '#00FF00'
}],
donut: 70
}]

Resources