How to make triangular progress bar using highchart? - javascript

I have done the progress bar in circle ( circular )but I want to do with triangle also. Is it possible to make in triangle?
My Code(for circle):
Highcharts.chart('myDivid'+i, {
chart: {
type: 'pie'
},
title: {
text: ''
},
subtitle: {
text: ''
},
plotOptions: {
pie: {
innerSize: 40,
depth: 45,
size:60,
dataLabels: {
enabled: false,
}
}
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
tooltip: { enabled: false },
labels: {
items: [{
html: '<b>'+data.av+'%</b>',
style: {
left: left,
top: '12px',
fontSize: '15px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}]
},
series: [{
name: 'Availability',
states: { hover: { enabled: false } },
data: [
{
y:data.availability,
color : data.availabilityColor
},
{
y:100-data.availability,
color : 'white'
}
]
}]
});
I have tried but i dint get how to do it for triangle.
I have made changes for this but not getting what I really want.
Thanks in Advance

Related

Highcharts Tooltip - Getting rid of the marker dot?

I would like to get rid of the small dot in my tooltip display. I am using High-charts. I Can you please help in modifying this feature, here is my code:
Highcharts.getJSON(
'https://code.highcharts.com/mapdata/custom/world.topo.json',
topology => {
const chart = Highcharts.mapChart('container', {
chart: {
map: topology
},
title: {
text: ''
},
legend: {
enabled: false,
align: 'center',
verticalAlign: 'bottom',
itemStyle: {
fontWeight: 'bold',
fontSize: '20px'
}
},
mapNavigation: {
enabled: true,
enableDoubleClickZoomTo: true,
buttonOptions: {
align: 'right',
verticalAlign: 'bottom'
}
},
mapView: {
maxZoom: 30,
projection: {
name: 'Orthographic',
rotation: [60, -30]
}
},
colorAxis: {
min: 0,
max: 100,
text: '',
stops: [[0, 'darkgrey', ''], [0, '#5ce1e6', '{{question['answer1']}}'], [0.49, '#c9f5f7', ''], [.50, '#aee0a0', ''], [.51, '#fff4c8', ''], [1, '#ffde59', '{{question['answer2']}}']],
title: {
text: '',
},
},
credits: {
enabled: false
},
tooltip: {
useHTML: true,
pointFormat: '{point.name} <br> <div style="display: inline-block;" class="square-answer1-globe"></div>{{question["answer1"]}}: {point.value1}% <br> <div style="display: inline-block;" class="square-answer2-globe"></div>{{question["answer2"]}}: {point.value2}%',
backgroundColor: 'black',
style: {
color: 'white'
},
},
plotOptions: {
series: {
animation: {
duration: 750
},
clip: false
}
},
mapline: {
color: Highcharts.getOptions().colors[0]
},
series: [{
name: 'Graticule',
id: 'graticule',
type: 'mapline',
data: getGraticule(),
nullColor: 'lightgrey',
color: 'lightgrey',
accessibility: {
enabled: false
},
enableMouseTracking: false
},
{
data,
joinBy: 'name',
name: '',
states: {
hover: {
color: '',
borderColor: '#000000'
}
},
accessibility: {
exposeAsGroupOnly: true
}
}]
});
Here is an image of what is displayed: enter image description here
I want to get rid of the little dot in the top left of the tooltip box. I have been trying everything and it always seems to appear there. I have tried adding in "Marker: false", but maybe I am not inputting it in the correct spot (not sure if this is the correct code).
You can use formatter option for the tooltip, something like this, but add your values:
tooltip: {
formatter: function(tooltip) {
return `${question1}: <b>${percentage1}</b><br/>`
}
},
Here is documentation about it: https://api.highcharts.com/highcharts/tooltip.formatter

Highcharts: Set a individual text color by series name

I needed to set a individual color in Plot Options > series > color using Highcarts.
I tried get series name using this.series.name and set color by name but I could not, I always get "undefined"
this.chartYear = new Chart({
chart: {
type: 'column'
},
title: {
text: ''
},
xAxis: {
categories: this.yearData.months
},
yAxis: {
min: 0,
stackLabels: {
enabled: false,
},
title: {
text: null
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true
},
pointWidth: this.innerHeight > 800 ? 60 : 40
},
series: {
dataLabels: {
enabled: true,
color: I NEEDED SET INDIVIDUAL COLOR HERE,
style: {
textOutline: 'false',
fontFamily: 'Segoe UI, Robot, Helvetica Neue, Arial, sans-serif',
fontWeight: '400',
color: "#212529",
fontSize: '12px'
}
},
showInLegend: false
}
},
series: series,
exporting: {
enabled: false
}
})
You can define color for data labels on a series level:
series: [{
dataLabels: {
color: 'red'
},
...
}, {
dataLabels: {
color: 'yellow'
},
...
}]
Live demo: http://jsfiddle.net/BlackLabel/cv740ygL/
API Reference: https://api.highcharts.com/highcharts/series.column.dataLabels

Get X Axis value on bar Highchart click event

Well, I have a bar Highchart showing some scores, what I want to get is the x Axis value (the user id) when I click a plot serie.
Making some research I was able to show the x Axis value when I click on the chart background (I am using console.log to show this data), but I a unable to do it clicking any plot serie (the coloured bar)
This is the snippet:
var cats=["1.- John :8","2.- Mark :7","3.- Mary :5","4.- Charles :2","5.- Sarah :1"];
var prcs=[2,12,13,11,15];
Highcharts.chart('container', {
chart: {
type: 'bar',
events:{
click: function(te){
console.log(prcs[Math.round(te.xAxis[0].value)]);
}
}
},
title: {
text: null
},
credits: {
enabled: false
},
xAxis: {
categories: cats,
lineColor: '#FFFFFF',
tickColor: 'transparent',
labels: {
align: 'left',
x: 0,
y: -12,
style: {
textOverflow: 'none',
width:'300px',
whiteSpace:'normal'//set to normal
}
}
},
yAxis: {
min: 0,
title: {
text: null,
},
labels: {
enabled: false
}
},
legend: {
enabled: false
//reversed: true
},
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: true,
align: 'left',
color: '#FFFFFF',
x: 0
},
events:{
click: function(te){
console.log(this.name);
}
}
//pointPadding: 0,
//groupPadding: 0
},
bar:{
}
},
series: [{
name: 'High',
color: '#009900',
data: [0,1,0,1,0]
}, {
name: 'Mid',
color: '#FFCC66',
data: [4,3,0,1,1]
}, {
name: 'Low',
color: '#FF6666',
data: [4,4,5,1,0]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 210px"></div>
The same in jsFiddle: http://jsfiddle.net/29vfsc4t/5/
If you click on the background you will get the user id, and clicking on any bar you will get the "score", what I need is to get the user id when I click on a bar.
You should be catching the point.event instead of the chart.event to get the point's xAxis category:
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: true,
align: 'left',
color: '#FFFFFF',
x: 0
},
point: {
events: {
click: function(te) {
console.log(this.category);
console.log(this.x);
}
}
}
},
bar: {}
},
Note the change to console.log(this.category) to show the xAxis name.

combination chart (area and bar) highchart

I have a bar graph, I want to plot a shaded area on the same graph whose max and min range say are -1000k and -1250k, which most probably is a area-range graph. I cannot find an example in highchart doc, so need help.
The graph I have now -> http://jsfiddle.net/hhh2zx3w/6/
var c2chart3=Highcharts.chart("container1", {
colors: ['rgb(90,198,140)','rgb(255,179,137)','rgb(246,151,159)','rgb(55,183,74)','rgb(169,99,169)','rgb(0,191,243)','rgb(223,200,24)','rgb(242,100,38)'],
chart: {
type: 'bar',
backgroundColor: 'rgba(0,0,0,0.7)',
style: {
color: '#FFF',
fontSize: '9px',
fontFamily: 'MP'
},
},
title: {
text: ''
},
xAxis: {
title: {
text: null
},
gridLineWidth:0,
lineWidth:0,
tickWidth: 0,
title: {
text: ''
},
labels: {
style: {
color: '#FFF',
fontSize: '9px',
fontFamily: 'MP'
},
formatter: function(){
return ""
}
},
},
yAxis: {
// min: -2000000,
// max: 1000000,
gridLineColor: '#fff',
gridLineWidth: 0,
lineWidth:0,
plotLines: [{
color: '#fff',
width: 1,
value: 0
}],
title: {
text: '',
align: 'high'
},
title: {
text: ''
},
labels: {
style: {
color: '#FFF',
fontSize: '9px'
},
},
},
tooltip: { enabled: false },
credits: { enabled: false },
exporting: { enabled: false },
plotOptions: {
bar: {
dataLabels: {
enabled: true,
style: {
textOutline: false,
color:'#fff',
}
}
},
series: {
colorByPoint: true,
pointWidth: 1,
borderWidth:0,
dataLabels: {
enabled: true,
formatter: function(){
}
}
}
},
legend: { enabled: false },
credits: { enabled: false },
series: [{
data: [-510362,-371233,-1593711,-388465,352395,179298,-1190969,-907204]
}]
});
What I want is something like shown in the image
The feature you are referring to is called as the "Plot Bands" in Highchart
Here is how you can do it.
plotBands: [{
color: 'tomato',
from: -1000000,
to: -1250000
}],
you can have plot bands with respect to any axis.
Here is a jsfiddle for your ref: http://jsfiddle.net/hhh2zx3w/7/
Highcharts API ref: https://api.highcharts.com/highcharts/yAxis.plotBands

How can I place chart directly above the legend? (highcharts)

Here is what I achieved so far
http://jsfiddle.net/9r6Lr5gr/3/
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: ''
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
xAxis: {
lineWidth: 0,
title: {
text: ''
},
labels: {
enabled: false
}
},
yAxis: {
gridLineWidth: 0,
title: {
text: ''
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: 'gray'
},
formatter: function(){
return 'Total: ' + this.total;
}
},
labels: {
enabled: false
}
},
legend: {
reversed: true,
align: 'left'
},
plotOptions: {
series: {
stacking: 'normal',
pointWidth: 30,
dataLabels: {
enabled: true,
color: 'white',
style: {
fontWeight: 'none',
fontSize: 15
}
}
}
},
series: [{
name: 'Outstanding (due > 7 days)',
data: [41]
}, {
name: 'Outstanding (due < 7 days)',
data: [32]
}, {
name: 'Overdue',
data: [15]
}]
});
I want to place the bar chart directly above the legend. Also, is it possible the little horizontal line just before the bar chart. Thanks.
Go through comment in code
Fiddle Demo
Highcharts.chart('container', {
chart: {
type: 'bar',
marginBottom: -180, //make charts display at bottom
events: {
load: function () {
// Draw the horizontal line
var ren = this.renderer,
colors = Highcharts.getOptions().colors,
line = ['M', 550, 0, 'L', 0, 0, 'L', 0, 0, 'M', 0, 0, 'L', 5, 0];
ren.path(line)
.attr({
'stroke-width': 2,
stroke: colors[1]
})
.translate(10, 335)
.add();
}
}
},
title: {
text: ''
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
xAxis: {
lineWidth: 0,
title: {
text: ''
},
labels: {
enabled: false
}
},
yAxis: {
gridLineWidth: 0,
title: {
text: ''
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: 'gray'
},
formatter: function(){
return 'Total: ' + this.total;
}
},
labels: {
enabled: false
}
},
legend: {
reversed: true,
align: 'left'
},
plotOptions: {
series: {
stacking: 'normal',
pointWidth: 30,
dataLabels: {
enabled: true,
color: 'white',
style: {
fontWeight: 'none',
fontSize: 15
}
}
}
},
series: [{
name: 'Outstanding (due > 7 days)',
data: [41]
}, {
name: 'Outstanding (due < 7 days)',
data: [32]
}, {
name: 'Overdue',
data: [15]
}]
});

Categories