Highcharts. Dynamic labels inside donut chart on mouseOver - javascript

so this is what I'm trying to acomplish:
Example
What I need is:
Label inside donut chart changing on mouse over
Color depending on data
Styling label to look like the picture
I actually managed to do the mouse over but I can't change the color according to data and place it in the middle
Here is a fiddle: https://jsfiddle.net/9cjxb97a/1/
Here is the code I wrote so far:
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: ''
},
exporting: {
enabled: false
},
tooltip: {
enabled: false
},
colors: ['red', 'blue', 'green'],
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
},
series: {
point: {
events: {
mouseOver: function() {
var chart = this.series.chart;
if (!chart.lbl) {
chart.lbl = chart.renderer.label('')
.attr({
padding: 10,
})
.css({
color: 'red',
})
.add();
}
chart.lbl
.show()
.attr({
text: this.y + '%'
});
}
}
},
},
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}],
innerSize: '80%'
}],
});
Thanks

Here's your code to display value in between circle.
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: ''
},
exporting:{
enabled:false
},
tooltip: {
enabled:false
},
colors:['red', 'blue', 'green'],
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
},
series: {
point: {
events: {
mouseOver: function () {
var chart = this.series.chart;
if (!chart.lbl) {
chart.lbl = chart.renderer.label('')
.attr({
padding: 10,
})
.css({
color: 'red',
})
.add();
}
chart.lbl
.show()
.attr({
text: this.y + '%'
});
}
}
},
},
},
tooltip: {
borderWidth: 0,
backgroundColor: 'none',
headerFormat: '',
shadow: false,
style: {
fontSize: '16px'
},
pointFormat: '<span style="font-size:40px;color:black; font-weight: bold">{point.y}%</span><br><span>50 Kg</span>{point.custom.customParam}',
positioner: function (labelWidth) {
return {
x: (this.chart.chartWidth - labelWidth) / 2,
y: this.chart.plotHeight/2
};
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}],
innerSize:'80%'
}],
});

Related

Highcharts - Xrange chart events issue

I'm using Highcharts' x-range chart module to render a range of multiple values. I have a couple of issues in implementing it.
The hover and select states are not having any effect on the chart
The legend icon is not showing the color of the data
Code below:
var myChart7 = Highcharts.chart('sample', {
chart: {
type: 'xrange',
},
title: null,
xAxis: {
opposite: true,
labels: {
useHTML: true,
formatter: function() {
return this.value + "ms";
},
}
},
yAxis: {
title: {
text: ''
},
labels: {
enabled: true,
},
categories: [],
reversed: true
},
tooltip: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
enabled: true
},
allowPointSelect: true,
states: {
hover: {
color: '#a4edba'
},
select: {
color: '#EFFFEF',
borderColor: 'black',
dashStyle: 'dot'
}
},
pointWidth: 15,
borderRadius: 10,
dashStyle: 'Solid',
}
},
legend: {
enabled: true,
align: 'left',
},
series: [{
color: '#C4D9FF',
name: 'Sample 1',
data: [{
x: 0,
x2: 90,
y: 0,
response: '200',
color: '#C4D9FF',
borderColor: '#789CDF',
}],
},
{
color: '#FFD7C5',
name: 'Sample 2',
data: [{
x: 5,
x2: 70,
y: 1,
response: '200',
color: '#FFD7C5',
borderColor: '#F99B6F',
}],
}, {
color: '#DCFFF5',
name: 'Sample 3',
data: [{
x: 35,
x2: 70,
y: 2,
response: '400',
color: '#DCFFF5',
borderColor: '#35C097',
}],
}
],
});
<div id="sample">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.4/highstock.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.4/modules/xrange.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.4/highcharts-more.js"></script>
JSFiddle link
I don't know if I'm implementing it in the right or wrong way. Please guide me. TIA.
I'm working on Chrome version 85 on mac. Haven't tested it on other browsers.
Those features hasn't been implemented in the version of the Highcharts which you are using. In the current version everything works fine: https://jsfiddle.net/BlackLabel/trxjw4np/
In the x-range series type the legend item doesn't inherit the color from the series, but you can set it programmatically.
Demo: https://jsfiddle.net/BlackLabel/trxjw4np/
events: {
load() {
let chart = this;
chart.legend.allItems.forEach(item => {
item.legendSymbol.css({
fill: item.userOptions.color
})
})
}
}
API: https://api.highcharts.com/highcharts/chart.events.load

How do I style the series labels on a Highcharts pie chart?

I am trying to change the font-weight of the series labels on a pie chart, since the font we are using has a pretty terrible rendering of font-weight: bold:
This is what I have tried so far (based on guidance from https://api.highcharts.com/highcharts/plotOptions.pie.label):
plotOptions: {
pie: {
label: {
style: {
fontWeight: 500,
}
}
}
},
It seems to have no effect.
I'm using this for my global Highcharts config:
import * as Highcharts from "highcharts";
import * as HC_Series from 'highcharts/modules/series-label';
HC_Series(Highcharts);
Highcharts.setOptions({
chart: {
style: {
fontFamily: '"Neue Helvetica W05", "M Hei HK W42", Arial, Helvetica, sans-serif',
},
},
});
I am using Highcharts 6.2.0, highcharts-angular 2.4.0.
You need to change dataLabels and not labels . The Documentation is broken
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
style: {
fontWeight: 500,
}
}
}
},
Fiddle
it was under the plot options:
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name}: {point.percentage:.1f} %',
style: {
fontWeight: '100',
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'blue'
}
}
}
},
Working example below:
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares in January, 2018'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name}: {point.percentage:.1f} %',
style: {
fontWeight: '100',
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'blue'
}
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Chrome',
y: 61.41,
sliced: true,
selected: true
}, {
name: 'Internet Explorer',
y: 11.84
}, {
name: 'Firefox',
y: 10.85
}, {
name: 'Edge',
y: 4.67
}, {
name: 'Safari',
y: 4.18
}, {
name: 'Sogou Explorer',
y: 1.64
}, {
name: 'Opera',
y: 1.6
}, {
name: 'QQ',
y: 1.2
}, {
name: 'Other',
y: 2.61
}]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

how to draw hour and minute value (hh:mm) pie chart using highcharts,javascript

how to draw hh:mm pie chart using highcharts for bellow table
You could try this approach, we get the total amount of time, then create a highcharts chart from the individual points:
const data = [
{
name: 'Line Clear - Line maintenance',
value: '06:29',
color: '#eef441'
},
{
name: 'Incoming Supply Failure (ICF)',
value: '14:44',
color: '#f44242'
},
{
name: '33 KV Line Breakdown',
value: '02:13',
color: '#41f48b'
},
{
name: 'Line Clear - SS maintenance',
value: '00:10',
color: '#4176f4'
},
{
name: 'Momentary Interruptions',
value: '01:11',
color: '#e541f4'
}
];
var totalTimeSeconds = data.reduce((sum,row) => {
return sum + 1.0*moment.duration(row.value).asSeconds();
}, 0.0);
var dataSeries = data.map((row) => {
return {
name: row.name + " (" + row.value +")",
y: moment.duration(row.value).asSeconds() / totalTimeSeconds,
color: row.color
};
});
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Reason Type'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Reason',
colorByPoint: true,
data: dataSeries
}]
});
Here's a JSFiddle that demonstrates this: Reason-Chart
*Actually i'am generating pie chart for table using table id.
So i added another column as seconds,generated table like bellow image.
The bellow Script is used to generate pie chart
<div class="row" style="margin-left: 0px;text-align: center;">
<div id="durationGraphcontainer" style="height: 310px; margin: 0 auto;margin-bottom: 10px;width: 100%"></div>
</div>
// Duration Graph
Highcharts.chart('durationGraphcontainer', {
data: {
table: 'durationGraph'
},
chart: {
type: 'pie'
},
title: {
text : 'Inetrruption Reason Type Graph'
},
yAxis: {
allowDecimals: false,
title: {
text: 'Million Units'
},
stackLabels: {
enabled: true,
align: 'center'
}
},
legend: {
enabled: true,
floating: true,
verticalAlign: 'top',
align:'left',
layout: 'vertical',
y: 100,
labelFormatter: function() {
return this.name + " - " + this.percentage.toFixed(2) + "%";
}
},
tooltip: {
pointFormat: '<b>{point.percentage:.2f}%</b>',
formatter: function () {
return this.point.name.toUpperCase();
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: false,
format: '{point.percentage:.2f} %',
} ,
innerSize: 100,
depth: 45,
showInLegend: true
},
},
series:[
{
type: 'pie',
dataLabels: {
verticalAlign: 'top',
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function () {
return this.point.y.toFixed(2);
}
}
},{point: {
events: {
click: function() {
}
}
}
}],
credits: {
enabled: false
}
});*

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]
}]
});

How to make Extjs area, line charts curves to have radius, as they are too sharply curved

I am developing a mixed charts component for Extjs, and the curves are like too sharp. I could not find a configuration for the curves to have radius. If you have dealt with something like can you provide some way to make the curves to me smooth a little. Here is my code:
Ext.define('Ext.vcops.rootCause.RootCauseScoreChart', {
extend : 'Ext.chart.Chart',
initMembers : function() {
this.store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'score', 'noiseIndex', 'line1', 'line2', 'line3'],
data: generateData()
});
this.axes = [{
type: 'Numeric',
minimum: 0,
maximum: 100,
constrain: false,
dashSize: 0,
majorTickSteps: 7,
position: 'left',
title: 'Score',
grid: true
},{
type: 'Category',
position: 'bottom',
grid: true,
label: {
renderer: function(name) {
return '';
}
}
}];
this.series = [{
type: 'area',
highlight: false,
axis: 'left',
xField: 'name',
yField: ['score'],
style: {
opacity: 1
}
}, {
type: 'line',
axis: 'left',
shadowAttributes: false,
xField: 'name',
yField: 'noiseIndex',
style: {
stroke: '#000000',
'stroke-width': 1,
opacity: 1,
'stroke-dasharray': 10
},
showMarkers: false
}, {
type: 'line',
axis: 'left',
shadowAttributes: false,
showInLegend: false,
xField: 'name',
yField: 'line1',
style: {
stroke: '#FFDD16',
'stroke-width': 2,
opacity: 1
},
showMarkers: false
}, {
type: 'line',
axis: 'left',
shadowAttributes: false,
showInLegend: false,
xField: 'name',
yField: 'line2',
style: {
stroke: '#F1592A',
'stroke-width': 2,
opacity: 1
},
showMarkers: false
}, {
type: 'line',
axis: 'left',
shadowAttributes: false,
showInLegend: false,
xField: 'name',
yField: 'line3',
style: {
stroke: '#EE1C25',
'stroke-width': 2,
opacity: 1
},
showMarkers: false
}];
this.themeAttrs.colors = ["#65B9E0", "#94ae0a", "#115fa6", "#a61120", "#ff8809", "#ffd13e", "#a61187", "#24ad9a", "#7c7474", "#a66111"];
},
initComponent : function() {
this.initMembers();
var config = {
insetPadding: 0,
legend: {
position: 'right',
boxStroke : 'transparent',
boxFill: 'transparent'
},
listeners: {
select: {
fn: function(me, selection) {
//TODO zoom logi here
}
}
}
};
Ext.apply(this, Ext.apply(config, this.initialConfig));
Ext.vcops.rootCause.RootCauseScoreChart.superclass.initComponent.apply(this, arguments);
}
});
I use line chart with fill=true, it's the same effect as area but with curved areas.
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.application({
name: 'PanelHeaderItems',
launch: function() {
var graphStore = Ext.create('Ext.data.Store', {
fields: ['kg', 'ha'],
data: [{
"kg": "0.23",
"ha": "90"
}, {
"kg": "0.4",
"ha": "20"
}, {
"kg": "0.6",
"ha": "70"
}, {
"kg": "0.8",
"ha": "56"
}, {
"kg": "0.95",
"ha": "100"
}]
});
wizardStep3Chart = new Ext.chart.CartesianChart({
width: 400,
height: 300,
animation: true,
store: graphStore,
legend: {
position: 'right'
},
axes: [{
type: 'numeric',
position: 'left',
grid: true,
fields: ['ha'],
renderer: function(v) {
return v;
}
}, {
type: 'numeric',
position: 'bottom',
grid: true,
adjustByMajorUnit: false,
fields: ['kg'],
label: {
rotate: {
degrees: -45
}
}
}],
series: [{
type: 'line',//<-----------
smooth:true,//<-----------
fill:true,//<-----------
axis: 'left',
xField: 'kg',
yField: 'ha',
style: {
opacity: 0.80
},
highlight: {
fillStyle: '#125489',
lineWidth: 2,
strokeStyle: '#fff'
},
tooltip: {
trackMouse: true,
style: 'background: #fff',
renderer: function(storeItem, item) {
this.setHtml(storeItem.get('ha') + ': ' + storeItem.get('kg'));
}
}
}],
renderTo: Ext.getBody()
});
}
});
}
});
Use the smooth: true option on the line series.

Categories