Thanks to this helpful post, I was able to re-format the legend so that clicking a legend item shows only that item, rather than hiding it and showing all other items.
Once the user clicks on a legend item, I'd like for the user to be able to click a button and once again see all of the legend items.
Here's the fiddle: http://jsfiddle.net/scheltense/qb13g51u/1/
And the code:
$(function () {
$('#container').highcharts({
credits: {
position: {
align: 'right',
x: -10,
y: -1
},
text: 'Source: Federal Emergency Management Agency',
href: 'http://www.FEMA.gov'
},
chart: {
type: 'area'
},
title: {
text: 'Federal Disaster Declarations: 2001-2013',
align: 'left',
x: 25,
y: 5
},
subtitle: {
text: 'The Federal Emergency Management Agency (FEMA) uses these categories to classify federal disasters delcarations.',
align: 'left',
x: 25,
y: 30
},
legend: {
backgroundColor: '#F5F3F2',
layout: 'vertical',
symbolHeight: 8,
symbolWidth: 10,
align: 'left',
verticalAlign: 'top',
floating: true,
x: 62,
y: 72,
padding: 3,
itemMarginTop: 3,
itemMarginBottom: 3,
itemStyle: {
lineHeight: '8px',
color: '#000000',
fontWeight: 'normal'
},
reversed: true
},
xAxis: {
categories: ['2001', '\'02', '\'03', '\'04', '\'05', '\'06', '\'07', '\'08', '\'09', '\'10', '\'11', '\'12', '\'13', '\'14*'],
tickmarkPlacement: 'on',
title: {
enabled: true
}
},
yAxis: {
title: {
text: 'Declarations'
},
max: 100,
labels: {
formatter: function () {
return this.value;
}
}
},
tooltip: {
shared: false,
valueSuffix: ''
},
plotOptions: {
area: {
events:
{
legendItemClick: function(event)
{
var seriesIndex = this.index;
var series = this.chart.series;
for (var i = 0; i < series.length; i++)
{
if (series[i].index != seriesIndex)
{
series[i].hide();
}
else
{
series[i].show();
}
}
return false;
}
},
stacking: 'normal',
lineColor: '#E5E2E0',
lineWidth: 0,
marker: {
enabled: false
}
}
},
series: [{
name: 'Other',
color: '#9fcad3',
data: [6, 5, 2, 3, 0, 4, 1, 1, 1, 1, 8, 4, 6, 0],
marker: {
symbol: 'circle'
}
}, {
name: 'Hurricane',
color: '#bb6b85',
data: [0, 4, 8, 14, 11, 0, 0, 8, 1, 1, 14, 15, 2, 0],
marker: {
symbol: 'circle'
}
}, {
name: 'Severe Winter Weather',
color: '#bba16b',
data: [4, 5, 6, 1, 2, 1, 5, 5, 5, 12, 5, 0, 3, 11],
marker: {
symbol: 'circle'
}
}, {
name: 'Flood',
color: '#6b85bb',
data: [5, 4, 0, 1, 2, 2, 1, 3, 3, 7, 19, 3, 15, 2],
marker: {
symbol: 'circle'
}
}, {
name: 'Severe Storm and Tornado',
color: '#6bbba1',
data: [27, 25, 35, 42, 30, 45, 56, 56, 48, 55, 50, 25, 36, 15],
marker: {
symbol: 'circle'
}
}]
}, function (chart) {
var point = chart.series[0].data[8],
text = chart.renderer.text(
'*through Aug. 5, 2014',
point.plotX + chart.plotLeft - 280,
point.plotY + chart.plotTop + 316
).attr({
zIndex: 5
})
.css({
color: '#909090',
fontSize: '10px'
})
.add(),
box = text.getBBox();
});
});
This is the portion of the code that shows only the legend item that has been clicked:
plotOptions: {
area: {
events:
{
legendItemClick: function(event)
{
var seriesIndex = this.index;
var series = this.chart.series;
for (var i = 0; i < series.length; i++)
{
if (series[i].index != seriesIndex)
{
series[i].hide();
}
else
{
series[i].show();
}
}
return false;
}
},
This is my first JavaScript project, so I apologize if the question is unclear, and I appreciate any help that can be provided.
Thanks very much.
The series object has a show() function (http://api.highcharts.com/highcharts#Series.show).
Assuming your button has an id of showall:
$('#showall').on('click', function() {
var series = $('#container').highcharts().series;
for(i=0;i<series.length;i++) {
if (!series[i].visible) series[i].show();
}
});
http://jsfiddle.net/qb13g51u/2/
Related
I am attempting to create the following chart:
However I can't seem to get the plotbands to work in this way; right now, they fill the entire axis:
I am not sure if I should use annotations instead, but so far I haven't gotten it to work. What can I try next?
Highcharts.chart('container',{
credits: {
enabled: false
},
title: {
text: "hello world",
style: {
visibility: 'hidden'
}
},
chart: {
type: 'line',
width: 400,
},
legend: {
enabled: false
},
exporting: {
enabled: true,
allowHTML:true,
chartOptions: {
chart: {
marginLeft: 175,
marginRight: 175
},
plotOptions: {
line: {
dataLabels: {
style: {
fontSize: 14
},
verticalAlign: "top",
useHTML: true
}
}
}
}
},
yAxis: {
startOnTick: false,
endOnTick: false,
gridLineWidth: 2,
tickWidth: 2,
tickLength: 20,
plotBands: [{
color: 'rgba(231, 23, 60, 0.5)', // Color value
from: 5, // Start of the plot band
to: 6.2 // End of the plot band
},
{
color: 'rgba(53, 101, 237, 0.5)', // Color value
from: 1, // Start of the plot band
to: 3 // End of the plot band
}
],
title: {
align: 'high',
offset: -40,
text: 'mmol/L',
style: {
fontWeight: "bold",
fontSize: 15
},
rotation: 0,
y: -20
},
min: 0,
max: 7,
labels: {
x: -10,
y: -3,
formatter: function () {
if (this.value != 0) {
if (this.value < 8) {
return this.value;
}
}
},
style: {
fontWeight: "400",
lineHight: "20",
padding: "0",
fontSize: "13"
}
}
},
annotations: [{
shapes: [{
point: '0',
type: 'circle',
r: 10
}, {
point: '3',
type: 'rect',
width: 20,
height: 20,
x: -10,
y: -25
}, {
fill: 'none',
stroke: 'red',
strokeWidth: 3,
type: 'path',
points: ['0', '1', {
x: 6,
y: 195,
xAxis: 0,
yAxis: 0
}],
markerEnd: 'arrow'
}],
labels: [{
point: {
x: 6,
y: 195,
xAxis: 0,
yAxis: 0
}
}]
}],
xAxis: {
gridLineColor: 'transparent',
accessibility: {
rangeDescription: 'Range: 2010 to 2020'
},
categories: [2018, 2019]
},
plotOptions: {
line: {
dataLabels: {
style: {
fontSize: 14
},
verticalAlign: "top",
useHTML: true,
format: '<div style="max-width: 10ch; text-align: center;">{y}<br/>mmol/L</div>'
}
}
},
series: [{
name: '',
color: "black",
data: [5.4, 3],
showInLegend: false,
dataLabels: {
enabled: true,
useHTML: true,
}
}],
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/annotations.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
This kind of plotBand shape is not possible from the API level, but you can simulate it in several ways. Example configurations:
SVG Renderer:
chart: {
events: {
render() {
const chart = this;
if (chart.rects) {
chart.rects = chart.rects.destroy();
}
chart.rects = chart.renderer.g('rects').attr({
zIndex: 1
}).add();
let x = chart.xAxis[0].toPixels(1),
y = chart.yAxis[0].toPixels(4),
width = chart.xAxis[0].toPixels(2) - chart.xAxis[0].toPixels(1),
height = chart.yAxis[0].toPixels(2) - chart.yAxis[0].toPixels(4);
chart.rect = chart.renderer.rect(x, y, width, height)
.attr({
fill: 'grey'
}).add(chart.rects)
chart.rect = chart.renderer.rect(chart.xAxis[0].toPixels(3), y, width, height)
.attr({
fill: 'grey'
}).add(chart.rects)
}
}
},
Demo:
https://jsfiddle.net/BlackLabel/wst607ub/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer
Annotations:
annotations: [{
draggable: false,
shapes: [{
points: [{
x: 1,
y: 2,
xAxis: 0, // xAxis reference used, use xAxis value
yAxis: 0 // yAxis reference used, use xAxis value
}, {
x: 2,
y: 2,
xAxis: 0,
yAxis: 0
}, {
x: 2,
y: 4,
xAxis: 0,
yAxis: 0
}, {
x: 1,
y: 4,
xAxis: 0,
yAxis: 0
}],
type: 'path'
}]
}]
Demo:
https://jsfiddle.net/BlackLabel/uvxzp6o7/
API Reference:
https://api.highcharts.com/highcharts/annotations
Polygon series:
series: [{
name: 'Polygons',
type: 'polygon',
color: 'grey',
showInLegend: false,
enableMouseTracking: false,
states: {
inactive: {
opacity: 1,
},
},
data: [
[1, 2],
[2, 2],
[2, 4],
[1, 4],
null, // allows multiple polygons
[3, 2],
[4, 2],
[4, 4],
[3, 4],
]
}]
Demo:
https://jsfiddle.net/BlackLabel/4n7ep3k2/
API Reference:
https://api.highcharts.com/highcharts/series.polygon
Take note that annotations and polygon series require the module to be included.
Using ApexCharts, I have the following options
this.chartOptions = {
xaxis: {
labels: {
show: true,
style: {
fontSize: '12px',
fontWeight: 700
},
},
},
yaxis: {
show: false
},
series: [
{
data: [8, 7, 10, 8, 16, 9, 10, 5]
},
{
data: [9, 15, 10, 10, 15, 11, 14, 10]
},
{
data: [8, 15, 9, 10, 15, 11, 13, 10]
},
]
chart: {
type: 'radar',
toolbar: {
show: false
}
},
markers: {
size: 0,
strokeWidth: 0
},
fill: {
colors: ['#157FF8', '#16B264', '#FF576F']
},
stroke: {
show: true,
width: [6, 1, 1],
colors: ['#157FF8', 'transparent', 'transparent']
},
plotOptions: {
radar: {
polygons: {
fill: {
colors: ['#fff']
}
}
}
},
legend: {
show: false
}
};
I would expect that the strokes of my graphs would be 6 for the first series and 1 for the next two, but they're all 6.
How do I set the stroke widths of a radar chart with multiple data entries?
I have a group chart
I want to show images on top of each
So there are only two images, so the value in xaxis subcategories if the value is negative i want to show image2 and if value is positive show image1
I have seen this answer but cant figure out this in group chart
highchart: add images to top of chart on every column
My group chart Fiddle
http://jsfiddle.net/KWPsv/90/
My Code:
Highcharts.setOptions({
colors: [
'#5a9bd4',
'#faa75b',
'#7ac36a',
'#9e67ab',
'#f15a60',
'#ce7058',
'#d77fb4'
]
});
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Chart Title'
},
credits: {
enabled: false
},
legend: {},
tooltip: {
shared: true,
formatter: function() {
var s = [],
xAxis = this.points[0].series.xAxis,
categoryIndex = xAxis.categories.indexOf(this.x),
title = this.x,
subTitle = xAxis.options.subtitles[categoryIndex];
s.push(title + '<br>');
s.push(subTitle + '<br>');
$.each(this.points, function(i, point) {
s.push('<span style="color:#D31B22;font-weight:bold;">' + point.series.name + ' : ' +
point.y + '<span>');
});
return s.join(' and ');
},
},
plotOptions: {
series: {
shadow: false,
borderWidth: 0,
pointPadding: 0
}
},
xAxis: {
subtitles: ['2', '-1', '4', '-3', '7'],
categories: ['MainTask 1', 'MainTask2', 'MainTask3', 'MainTask4', 'MainTask5'],
lineColor: '#999',
lineWidth: 1,
tickColor: '#666',
tickLength: 3,
title: {
text: 'X Axis Title',
style: {
color: '#333'
}
}
},
yAxis: {
lineColor: '#999',
lineWidth: 1,
tickColor: '#666',
tickWidth: 1,
tickLength: 3,
gridLineColor: '#ddd',
title: {
text: 'Y Axis Title',
rotation: 0,
margin: 50,
style: {
color: '#333'
}
}
},
series: [{
y: 0,
mydata: 10,
name: 'Designation 1',
data: [7, 12, 16, 32, 64]
}, {
y: 0,
mydata: 20,
name: 'Designation 2',
data: [16, 32, 64, 7, 12]
}, {
y: 0,
mydata: 30,
name: 'Designation 3',
data: [32, 64, 7, 12, 16],
}, {
mydata: 13,
name: 'Designation 4',
data: [7, 12, 16, 32, 64]
}, {
y: 0,
mydata: 23,
name: 'Designation 5',
data: [16, 32, 64, 7, 12]
}, {
y: 0,
mydata: 22,
name: 'Designation 6',
data: [32, 64, 7, 12, 16]
}]
});
Simply use Renderer.image to add an image on a chart. You can do that for example on load event.
API Reference:
http://api.highcharts.com/highcharts/chart.events.load
http://api.highcharts.com/highcharts/Renderer.image
Example:
http://jsfiddle.net/kudxL3kh/
I use annotation.js in order to add customer input text data. My source code is given below... But I cannot create save text data when the customer presses the Done button. How do I change this source code to solve my problem?
$(function () {
var options = {
chart: {
width: 980,
borderWidth: 5,
borderColor: '#e8eaeb',
borderRadius: 0,
renderTo: 'container',
backgroundColor: '#f7f7f7',
marginTop: 50
},
xAxis: {
min: 0,
max: 10
},
title: {
style: {
'fontSize': '1em'
},
useHTML: true,
x: -27,
y: 8,
text: '<span class="chart-title"> Drag and drop on a chart to add annotation <span class="chart-href"> Black Label </span> <span class="chart-subtitle">plugin by </span></span>'
},
annotations: [{
title: {
text: '<span style="">drag me anywhere <br> dblclick to remove</span>',
style: {
color: 'red'
}
},
anchorX: "left",
anchorY: "top",
allowDragX: true,
allowDragY: true,
x: 515,
y: 155
}, {
title: 'drag me <br> horizontaly',
anchorX: "left",
anchorY: "top",
allowDragY: false,
allowDragX: true,
xValue: 4,
yValue: 10,
shape: {
type: 'path',
params: {
d: ['M', 0, 0, 'L', 110, 0],
stroke: '#c55'
}
}
}, {
title: 'on point <br> drag&drop <br> disabled',
linkedTo: 'high',
allowDragY: false,
allowDragX: false,
anchorX: "center",
anchorY: "center",
shape: {
type: 'circle',
params: {
r: 40,
stroke: '#c55'
}
}
}, {
x: 100,
y: 200,
title: 'drag me <br> verticaly',
anchorX: "left",
anchorY: "top",
allowDragY: true,
allowDragX: false,
shape: {
type: 'rect',
params: {
x: 0,
y: 0,
width: 55,
height: 40
}
}
}],
series: [{
data: [13, 4, 5, {
y: 1,
id: 'high'
},
2, 1, 3, 2, 11, 6, 5, 13, 6, 9, 11, 2, 3, 7, 9, 11]
}]
};
var chart = new Highcharts.StockChart(options);
});
I am trying to customize highcharts
1) I need to change the height of the plotlines
2) Show the marker value inside the marker image itself at a specific place(Inside the white circles at the top)
This is what I have achieved so far
Highcharts.setOptions({
global: {
useUTC: false
}
});
/*function updateData(x,y)
{
var series = chart.series[0];
series.addPoint([x, y], true, true);
}*/
var chart;
$(function () {
var color = '#AA34FF';
$('#container').highcharts({
chart: {
events: {
load: function(event) {
_bindCustomEvents();
}
},
backgroundColor: 'transparent'
},
series: [
{
color:
{
linearGradient:
{
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops:
[
/*[0, '#a83e3e'],
[0.21, '#d34e47'],
[0.40, '#edbb5a'],
[0.57, '#e2e57a'],
[0.76, '#8dcc63'],
[1, '#7ab237']*/
[0, '#7ab237'],
[0.21, '#8dcc63'],
[0.40, '#e2e57a'],
[0.57, '#edbb5a'],
[0.76, '#d34e47'],
[1, '#a83e3e']
]
},
lineWidth: 4,
marker: {
enabled: false,
fillColor: '#FFFFFF',
lineWidth: 2,
lineColor: null,
},
type: 'spline',
data: [1, 2, 5, 3, 6, 7, 4],
backgroundColor: 'transparent',
plotShadow : false
},
{
name: '',
marker: {
symbol: 'diamond'
},
//same inmage for all points
marker: {
symbol: 'url(http://fc08.deviantart.net/fs71/f/2014/016/b/9/top_marker_by_skyrbe-d72ewk0.png)'
},
data: [8,8,8,8,8,8,8],
type:'scatter'
},
{
name: '',
marker: {
symbol: 'diamond'
},
//same inmage for all points
marker: {
symbol: 'url(http://fc03.deviantart.net/fs71/f/2014/016/f/a/bottom_marker_by_skyrbe-d72ew7w.png)'
},
data: [-1,-1,-1,-1,-1,-1,-1],
type:'scatter'
}
],
xAxis: {
categories: [
'Sun',
'Mon',
'Tue',
'Wed',
'Thu',
'Fri',
'Sat'
],
title: {
enabled: true,
text: null,
},
labels: {
style: {
fontFamily: 'gestaregular',
fontSize: '16px',
color:'#fff'
}
},
plotLines: [
{ // mark the weekend
color: 'rgba(255,255,255,0.3)',
width: 1,
value: 0,
dashStyle: 'dash',
zIndex:10
},
{
color: 'rgba(255,255,255,0.3)',
width: 1,
value: 1,
dashStyle: 'dash',
zIndex:10
},
{
color: 'rgba(255,255,255,0.3)',
width: 1,
value: 2,
dashStyle: 'dash',
zIndex:10
},
{
color: 'rgba(255,255,255,0.3)',
width: 1,
value: 3,
dashStyle: 'dash',
zIndex:10
},
{
color: 'rgba(255,255,255,0.3)',
width: 1,
value: 4,
dashStyle: 'dash',
zIndex:10
},
{
color: 'rgba(255,255,255,0.3)',
width: 1,
value: 5,
dashStyle: 'dash',
zIndex:10
},
{
color: 'rgba(255,255,255,0.3)',
width: 1,
value: 6,
dashStyle: 'dash',
zIndex:10
}],
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
},
yAxis: {
labels: {
enabled: false
},
title: {
enabled: true,
text: null,
}
},
legend: {
enabled: false
},
minorTickLength: 0,
tickLength: 0
});
});
function _bindCustomEvents()
{
var chart = $('#container').highcharts();
chart.setTitle({ text: ''});
$('.highcharts-axis').hide();
$('.highcharts-grid').hide();
$('.highcharts-axis').find('path').hide();
}
FIDDLE LINK
This is how I want it to look like : Instead of '2' in the top circles , it should be the corresponding value from the center spline [1, 2, 5, 3, 6, 7, 4]
1) The plotLines are infinite. The extend as far as the plot area is. So, to limit this, how about you change your yAxis max:
yAxis: {
max: 8,
labels: {
enabled: false
},
title: {
enabled: true,
text: null
}
},
Or, you could create a column series on the points you want and give them a certain value for the height you want. Making the columns thin to mimic your plotLines will help like so:
series: [{
name: '',
type: 'column',
pointWidth: 1,
borderWidth: 0,
data: [8, 8, 8, 8, 8, 8, 8]
},
...
2) Which values in the circles (I am guessing)? The "Series 1: XX"? Or the whole tooltip?
EDIT:
For question 2 you can do this with a formatter function on the dataLabel for the scatter series (your circles). Here is the function:
var customFormatPoint = function (pointX, seriesIndex) {
var theChart = $('#container').highcharts();
var yValue = null;
var points = theChart.series[seriesIndex].options.data[pointX];
return points;
};
You call this from:
series: [{
name: '',
type: 'column',
pointWidth: 1,
borderWidth: 0,
dataLabels: {
enabled: true,
formatter: function () {
return customFormatPoint(this.point.x, 1);
}
},
data: [7.70, 7.70, 7.70, 7.70, 7.70, 7.70, 7.70]
}, {...
Key element here is that you have this.point.x which is that scatter point's xAxis location. You then need to send in which index the series is that contains the y value you want to show in the dataLabel.
I have also removed the plotLines and created a series that just contains the bars with width of 1 and no border. I had to mess around to get the end of the bar (its max value) to coincide with the scatter circle diameter.
Please see this jsFiddle.