In Highcharts, I want to show different symbols next to point values to indicate certain notes. I use an additional attribute for the point ("note") and I can then use it in tooltips and dataLabels, as shown here:
Highcharts.chart('container', {
title: {
text: 'Title'
},
tooltip: {
formatter: function() {
return "<strong>" + this.series.name + "</strong><br /><strong>" + Highcharts.numberFormat(this.y, 2) + '' + '<b><sup>' + this.point.note + '</sup></b></strong>';
}
},
credits: {
text: 'Source: thesolarfoundation.com'
},
chart: {
borderWidth: 1,
borderColor: '#ccc',
spacingBottom: 30
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
pointStart: 2010,
dataLabels: {
useHTML: true,
enabled: true,
allowOverlap: true,
style: {
fontWeight: 'normal',
fontSize: '9px',
zIndex: 5
},
formatter: function() {
return Highcharts.numberFormat(this.y, 2) + "<sup>" + this.point.note.toLowerCase() + "</sup>";
}
}
}
},
series: [{
name: 'Series 1',
data: [{
id: "myID",
note: "",
y: 12.22,
value: 12.22
}, {
id: "myID",
note: "",
y: 13.11,
value: 13.11
}, {
id: "myID",
note: "*",
y: 14.99,
value: 14.99
}]
}],
exporting: {
showTable: true
}
});
https://jsfiddle.net/jmunger/o3bmyu5d/10/
Now I want to use the Export-data module to allow the user to see the data in table form. This works well, as shown in the jsFiddle above, but how could I add the same symbols/notes I show in tooltips and dataLabels in the table?
You can define the keys (API) for the series, which is used when creating the table.
For example, in your case you can set keys as follows (JSFiddle demo):
series: [{
name: 'Series 1',
keys: ['y', 'note'],
data: [...]
}]
Related
The 3 labels that I have on the horizontal stacked bar, the data flow for label 1 is different than label 2 and 3. Compare to label 2 and 3, label 1 colors flow is different.
When I hover over label 1 bars, I see correct title getting displayed in the tooltip that matches with the legend at the bottom:
However, when I hover the bar for label 2 and 3, which in this dark red, I still see "Strongly Agree" showing up in the tooltip, whereas it should have been "Strongly Disagree" if go by the legends at the bottom:
Is this something that is managable to fix it in higcharts? If so, can someone please help me how I would fix the tooltip title for label 2 and 3?
https://jsfiddle.net/samwhite/a4wtr0zb/
let chart = Highcharts.chart('container1_1', {
chart: {
type: 'bar',
height: 300
},
credits: {
enabled: false
},
yAxis: {
title: { text: 'Response Rate' },
max: 100,
maxPadding: 0,
labels: {
format: '{value}%'
},
gridLineWidth: 0,
minorGridLineWidth: 0
},
tooltip: {
formatter: function () {
return '<b>'+ tooltip_titles[0][this.series.index] + '</b><br/>' + 'Response Rate: ' + (100*this.point.y).toFixed(2) + '\%';
}
},
plotOptions: {
series: {
stacking: 'percent',
pointWidth: 20,
borderWidth: 0,
},
bar: {
states: {
inactive: {
enabled: true
},
hover: {
opacity: .9
}
}
}
},
legend: {
reversed: true,
align: 'right'
},
title: {
align: 'left',
text: 'Progress on Diversity, Inclusion, and Opportunity in our Workplace',
style: {
fontSize: '20px',
fontWeight: 'bold',
}
},
xAxis: {
categories: labels,
labels: {
style: {
fontSize: '1em',
color: '#000',
width: 370,
float: 'left'
}
}
},
series: [{
name: 'Strongly Agree',
color: colors[4],
data: []
}, {
name: 'Agree',
color: colors[3],
data: []
}, {
name: 'Neither Agree nor Disagree',
color: colors[2],
data: []
}, {
name: 'Disagree',
color: colors[1],
data: []
}, {
name: 'Strongly Disagree',
color: colors[0],
data: []
}]
});
I made 2 changes to the fiddle
Change tooltip
Change to show the series name instead of referencing a list
formatter: function () {
return '<b>'+ this.series.name + '</b><br/>' + 'Response Rate: ' + (100*this.point.y).toFixed(2) + '\%';
}
Change setData()
Remove all the "colors" from setData to ensure consistency across categories.
series.setData([
{
name: tooltip_titles[s],
//color: colors[s],
y: dept_data["102"][4-s]
},
{
name: tooltip_titles[s],
// color: colors[Math.abs(s - 4)],
y: dept_data["104"][4-s]
},
{
name: tooltip_titles[s],
// color: colors[Math.abs(s - 4)],
y: dept_data["105"][4-s]
}]);
Here's the result:
For the first one:
For the second one:
The updated fiddle is here:
I have a scatter chart in which there are some points in different series which overlap at exact points.
The x,y for both of these points in different series are same.
So I need to show both of them at the same time in tooltip.
However, the shared option only works when I'm not formatting the tooltip.
It doesn't work when I use pointFormat.
I tried to use formatter, but this just gives current point.
If I switch the chart to line chart, this gives points, which has all the points in the current position. With that, I can iterate and do the formatting.
Chart options:
{
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Height Versus Weight of 507 Individuals by Gender'
},
subtitle: {
text: 'Source: Heinz 2003'
},
xAxis: {
title: {
enabled: true,
text: 'Height (cm)'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Weight (kg)'
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: Highcharts.defaultOptions.chart.backgroundColor,
borderWidth: 1
}, tooltip: {
formatter: function () {
console.log(this);
return this.points.reduce(function (s, point) {
return s + '<br/>' + point.series.name + ': ' +
point.point.options.dynamicText;
}, '<b>' + this.x + '</b>');
},
crosshairs:true,
shared: true
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
}
}
},
series: [{
name: 'Female',
color: 'rgba(223, 83, 83, .5)',
data: [{x:161.2, y:51.6, dynamicText:"foo1"}]
}, {
name: 'Male',
color: 'rgba(119, 152, 191, .5)',
data: [{x:161.2, y:51.6, dynamicText:"foo2"}]
}]
}
https://jsfiddle.net/dushyantbangal/ojqde34x/17/
Shared tooltip does not work with scatter series - please check this issue: https://github.com/highcharts/highcharts/issues/1431
The simplest solution is to use line series type with lineWidth property set to 0:
plotOptions: {
series: {
lineWidth: 0,
states: {
hover: {
lineWidthPlus: 0
}
}
}
},
Live demo: http://jsfiddle.net/BlackLabel/3fda1nm4/
API Reference: https://api.highcharts.com/highcharts/series.line.lineWidth
Hi there I would like to draw a chart with a three lines in Highchart. Two of them can shows results as shown in the data [4.12,3.34,5.45] / [3.45,5.45,3.23] but the third line should be visibe without any comma. Resuls should be like [7,4,2]
code:
$(function () {
$('#container').highcharts({
title: {
text: '',
x: -20 //center
},
colors: ['blue', 'red'],
plotOptions: {
line: {
lineWidth: 3
},
tooltip: {
hideDelay: 200
}
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: [
''
]
},
yAxis: [{
min: 0,
title: {
text: ''
}
}, {
title: {
text: ''
},
opposite: true
}],
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y:.0f} h</b><br/>',
valueSuffix: ' h',
crosshairs: true,
shared: true
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 1
},
plotOptions: {
line: {
dataLabels: {
enabled: true,
formatter: function () {
return Highcharts.numberFormat(this.y,2);
}
},
enableMouseTracking: true
}
},
series: [{
name: '1',
color: 'rgba(51, 204, 204, 0.75)',
lineWidth: 2,
data: [4.12,3.34,5.45]
}, {
name: '2',
color: 'rgba(255, 77, 77,0.75)',
marker: {
radius: 6
},
data: [3.45,5.45,3.23]
},{
name: '3',
color:'#bfbfbf',
marker: {
radius: 6
},
data: [7.34,4.23,1.78]
}]
});
});
http://jsfiddle.net/bmv5e8v7/3/
Can you guys help in this?
In addition to what #BarbaraLaird wrote, you can also define format of data labels for only one series, like this:
dataLabels: {
format: '{y:.0f}'
}
API Reference:
http://api.highcharts.com/highcharts/plotOptions.series.dataLabels.format
Example:
http://jsfiddle.net/ozvgfkj0/
You can add a conditional to your dataLabels formatter function:
dataLabels: {
enabled: true,
formatter: function() {
if (this.series.name == '3')
return Highcharts.numberFormat(this.y, 0);
else
return Highcharts.numberFormat(this.y, 2);
}
},
http://jsfiddle.net/blaird/bmv5e8v7/4/
I would like to have something similar to the image below, but the columns representing the classes all stack together now. How do I separate them and allow them to load dynamically as well?
Also I need a legend that says green is band 1, yellow is band 2, orange is band 3 and red is band 4, how do i do that as well? My code is in the JS Fiddle page. I am not allowed to use jQuery, need to use pure JavaScript.
var options = {
chart: {
renderTo : 'container',
type: 'column'
},
title: {
text: 'Topic & Subtopic Mastery'
},
subtitle: {
text: 'Average Level-Stream Mastery vs Average Class Mastery'
},
xAxis: {
categories: topics
},
yAxis: {
min: 0,
max: 100,
title: {
text: 'Mastery'
}
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
shadow: true
},
tooltip: {
shared: true,
valueSuffix: ' %'
},
plotOptions: {
column: {
grouping: false,
shadow: false
}
},
series: resultsData
};
http://jsfiddle.net/kscwx139/2/
I came up with a solution you are looking for with specifying x and y axis data for level and giving appropriate width to the point.
$(function() {
var chart;
$(document).ready(function() {
var i = 0;
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
if (i == 0) {
i++;
return Highcharts.Color(color)
.setOpacity(1)
.get('rgba');
} else {
i++;
return Highcharts.Color(color)
.setOpacity(0.5)
.get('rgba');
}
});
var colors = Highcharts.getOptions().colors;
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
borderColor: null
},
title: {
text: 'Mailboxes over Quota'
},
subtitle: {
text: 'Mailbox Size in MB'
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
xAxis: {
categories: ["Overall Topic", "Topic 1", "Topic 2"],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Total',
align: 'high'
},
allowDecimals: false,
},
tooltip: {
formatter: function() {
return '' +
this.series.name + ': ' + Highcharts.numberFormat(this.y, 0, '.', ',');
}
},
legend: {
enabled: true
},
credits: {
enabled: false
},
series: [{
name: 'Level',
color: colors[0],
data: [{
y: 86,
x: 0.25
}, {
y: 80,
x: 1.25
}, {
y: 95,
x: 2.25
}],
pointWidth: 80
}, {
name: '4A',
data: [90, 88, 97]
}, {
name: '4B',
data: [95, 78, 92]
}, {
name: '4C',
data: [80, 69, 84]
}]
});
});
});
To show in label inside your column you can use below code.
plotOptions: {
column: {
dataLabels: {
enabled: true,
formatter: function() {
return this.series.name;
},
y: 25,
}
}
}
You can see it in action at this JSFIddle
Kindly take a look at following fiddle in which i tried to remove the categories but on removing categories its placing numbers instead of it by default and also showing those numbers in tooltip.
All I am trying to do is that categories or numbers doesnot display on chart or on tooltip and only stackedbar appears on the chart , So kindly let me know how can i do it .Thanks,
http://jsfiddle.net/EJFsH/3/
$(function () {
var data = [ {
name: 'Year 2008',
data: [0, 914, 4054, 732, 34]
}];
data = $.grep(data, function (category) {
return $.grep(category.data, function (item) {
return item > 0;
}).length > 0;
});
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -100,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: data
});
});
I'm not 100% sure of what you are asking for. But, to turn off the XAxis or yAxis labels, juse labels : {enabled:false} and to change the tooltips use tooltip:{formatter: function() {...}}
see this fiddle:
http://jsfiddle.net/6ypq4/
xAxis: {
title: {
text: null
},
labels : {
enabled: false
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify',
enabled: false
}
},
tooltip: {
formatter: function() {
return this.y + ' millions';
}
},