I'm going to prepare a stacked column charts report using highcharts. The problem is my data types are different.
Please, view image example
Could you help me create a chart like image. please
You can achieve this using Stacked Group in Highchart by handling data section properly.
Here, I tried to build same chart as you required. You can handle legend and other of the chart.
This should help you. I also created fiddle demo which you can access using below link.
Fiddle Demo: http://jsfiddle.net/t4u8b8co/1/
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: ''
},
legend: {
enabled: false
},
xAxis: {
categories: [
['19603', '19666'], '19603', '19603'
]
},
yAxis: {
title: {
text: 'Good or Bad'
}
},
plotOptions: {
column: {
stacking: 'percent'
}
},
series: [{
name: 'Jane',
data: [244, 23, 4],
stack: '19603'
}, {
name: 'John',
data: [306, 522, 546],
stack: '19603'
}, {
name: 'Jane',
data: [376],
stack: 'female'
}, {
name: 'Janet',
data: [174],
stack: 'female'
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Related
I have generated a bar chart with Highcharts.
On this bar chart, I'm using an annotation to mark the 50% threshold with these words: "conformité partielle".
The problem is that in the data table, I don't want an "annotations" column.
Is there a way to avoid this?
Thanks very much for your help.
The option to exclude from the generated table, as well as other data export formats is includeInDataExport: false.
To exclude a data series it should be added to that series object, at the top level.
To exclude annotation labels, it should be placed in the labelOptions object, inside the annotation object:
document.addEventListener('DOMContentLoaded', function () {
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4],
//includeInDataExport: false
}, {
name: 'John',
data: [5, 7, 3],
}],
annotations: [{
labels: [{
point: { x: 2, y: 5, yAxis: 0 },
text: 'My annotation'
}],
labelOptions: {
includeInDataExport: false
}
}],
exporting: {
showTable: true
}
});
});
<script src="https://code.highcharts.com/highcharts.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>
<div id="container" style="width:100%; height:300px;"></div>
The above is the standard solution for this question. What follows might be relevant for a larger category of related problems that
require the manipulation of the generated table in non-standard ways.
If one has to manipulate the table after its html was generated, one may add a handler for the chart's render event. The annotation can be deleted this way:
document.addEventListener('DOMContentLoaded', function () {
Highcharts.chart('container', {
chart: {
type: 'bar',
events: {
render() {
const tableDiv = this.dataTableDiv,
seriesLength = this.series.length;
if(tableDiv && tableDiv.querySelectorAll('thead th').length === seriesLength+2){
tableDiv.querySelectorAll('th:last-child, td:last-child, tbody>tr:last-child').forEach(el=>el.remove())
}
}
},
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4],
}, {
name: 'John',
data: [5, 7, 3],
}],
annotations: [{
labels: [{
point: { x: 2, y: 5, yAxis: 0 },
text: 'My annotation'
}]
}],
exporting: {
showTable: true
}
});
});
<script src="https://code.highcharts.com/highcharts.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>
<div id="container" style="width:100%; height:300px;"></div>
One has to take into consideration the fact that the handler for render is typically called multiple times, including for instance when the mouse pointer moves inside the chart div - so if the table content is to be modified by addition or deletion one has to make sure that it happens only once. In this case we delete the last column and the last row of the table only when the number of rows is equal to the number of series + 2 -- this assumes that no series has {includeInDataExport: false}. Alternative conditions can be thought of, like searching for the text of the annotation.
Finally, a mention should be made for the exportData
event handler, that might be useful in some cases. The problem in this particular case is that it doesn't offer access to the table heads and indeed the argument doesn't contain anything about the annotations (although it is filled up in the same object after the execution of the handler).
Since at the time when exportData handler is called, the chart's dataTableDiv was created, albeit it is empty, one can exploit it in a rather hacky manner:
document.addEventListener('DOMContentLoaded', function () {
Highcharts.chart('container', {
chart: {
type: 'bar',
events: {
exportData: function() {
const tableDiv = this.dataTableDiv,
seriesLength = this.series.length;
setTimeout(function(){
if(tableDiv && tableDiv.querySelectorAll('thead th').length === seriesLength+2){
tableDiv.querySelectorAll('th:last-child, td:last-child, tbody>tr:last-child').forEach(el=>el.remove())
}
}, 0);
}
}
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4],
}, {
name: 'John',
data: [5, 7, 3],
}],
annotations: [{
labels: [{
point: { x: 2, y: 5, yAxis: 0 },
text: 'My annotation'
}]
}],
exporting: {
showTable: true
}
});
});
<script src="https://code.highcharts.com/highcharts.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>
<div id="container" style="width:100%; height:300px;"></div>
I am trying to add anchor tag in tooltip of highstock flags.
I am facing couple of problems with that:
Anchor tags are not displayed in tooltip.
When I try to hover over the tooltip, the tooltip disappears.
My code looks like:
$.getJSON('https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/usdeur.json', function (data) {
var year = new Date(data[data.length - 1][0]).getFullYear(); // Get year of last data point
// Create the chart
Highcharts.stockChart('container', {
rangeSelector: {
selected: 4
},
title: {
text: 'USD to EUR exchange rate'
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
series: [{
name: 'USD to EUR',
data: data,
id: 'dataseries',
tooltip: {
valueDecimals: 4
}
},{
type: 'flags',
data: [{
x: Date.UTC(year, 11, 1),
title: 'B',
text: 'make me clickable'
}, {
x: Date.UTC(year, 11, 1),
title: 'B',
text: '<a>make me clickable</a>'
}],
shape: 'circlepin',
onSeries: 'dataseries',
width: 16,
tooltip: {
pointFormat: '{point.text}'
} ,
style:{
border:'1px solid green'
}
}]
});
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px"></div>
What am I doing wrong?
You have to set useHTML to true for the tooltip. To easier hover on tooltip, increase hideDelay value and disable stickyTracking on series:
tooltip: {
useHTML: true,
hideDelay: 5000
}
Live demo: http://jsfiddle.net/BlackLabel/ncrgwvzu/
API:
https://api.highcharts.com/highstock/series.line.stickyTracking
https://api.highcharts.com/highstock/tooltip.useHTML
I am using highcharts to create a graph. I am able to display the output but I am unable to remove the label . I am not able to figure out how to get rid of the label.
//document.getElementById('container').style.visibility='visible';
Highcharts.chart('container', {
chart: {
type: 'area'
},
title: {
text: 'Stock Price',
},
subtitle: {
text: '<a style=\"color:blue;\" href=\"https://www.alphavantage.co\">Source: Alpha Vantage</a>'
},
xAxis: {
type: 'datetime',
showLastLabel: true,
endOnTick: true,
categories: [ "05/30", "05/31", "06/01", "06/02", "06/05", "06/06", "06/07", "06/08"],
labels:{
step:2},
},
yAxis: [{
title: {
text: 'Stock Price'
},
labels: {
enabled: false
},
},{
title: {
text: 'Volume ',
},
labels: {
format: '{value}m',
enabled: false,
},
opposite:true,
}],
plotOptions: {
labels: {
enabled: false,
},
line: {
enableMouseTracking: false
},
series: {
marker: {
enabled: false
},}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
series: [{
labels: {
enabled: false,
},
name: 'Tokyo',
type: 'area',
color: '#F66464',
data: [4,5,6,7,8,9,1],
}, {
name: 'London',
type: 'column',
color: '#FFFFFF',
yAxis: 1,
data: [1,2,3],
}]
});
<!DOCTYPE html>
<html>
<body>
<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/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
I tried disabling the label but it doesn't seem to work.
I want to get rid of the labels ("Tokyo" written in white) in the following output.
You were so close. The label can be removed by including this:
label: {
enabled: false,
},
in your series, or in the plotOptions if you want to remove all labels.
You typed labels with an s, which is unfortunately not correct.
API on series label: https://api.highcharts.com/highcharts/plotOptions.series.label
https://api.highcharts.com/highcharts/series.line.label
Go through this docs.
You need to make series.lable.enabled = false;
I have a page with multiple charts. When I scroll down to print a chart, the page returns focus to the top of the page, not the chart I just printed. Haven't found anything on the boards related to this, so hoping someone has encountered this and has a suggestion.
Here is an example: http://jsfiddle.net/ND5xf/
Scroll down to the third chart and choose to print. You can either print it or cancel the window. The page will return focus to the first chart.
HTML:
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container1" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<div id="container2" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<div id="container3" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Javascript:
$(function () {
$('#container1').highcharts({
chart: {
type: 'line'
},
title: {
text: 'Line Chart'
},
xAxis: {
categories: ['Category 1', 'Category 2', 'Category 3']
},
series: [{
data: [7.0, 6.9, 9.5]
}, {
data: [-0.2, 0.8, 5.7]
}]
});
});
$(function () {
$('#container2').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Bar Chart'
},
xAxis: {
categories: ['Category 1', 'Category 2', 'Category 3']
},
series: [{
data: [107, 31, 635]
}, {
data: [133, 156, 947]
}]
});
});
$(function () {
$('#container3').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Column Chart'
},
xAxis: {
categories: ['Category 1', 'Category 2', 'Category 3']
},
series: [{
data: [49.9, 71.5, 106.4]
}, {
data: [83.6, 78.8, 98.5]
}]
});
});
Highcharts prints a single chart by hiding everything else on the page and then printing. It looks like that in this shuffle of DOM elements a potential scroll bar is forgotten. The only fix I can see (without modifying the source) is to take control of the printing yourself and reset the scroll position.
exporting: {
buttons: {
contextButton: {
menuItems: [{
text: 'Print Chart',
onclick: function() {
var scrollPos = $(document).scrollTop();
this.print();
setTimeout(function(){
$(document).scrollTop(scrollPos)
}, 1001); // Highcharts has a 1s delay before display elements again
}
}]
}
}
}
See fiddle here (try the 3rd chart).
I was working with the D3 graphing library, but due to its lack of native IE8 support, I would like to switch to HighCharts.
Using D3, I was able to create the following graph using CSS classes with the 'fill' property.
There are 5 series of values that have produced that graph; the first defines the top of the light gray area, the second defines the top of the dark gray area, the third defines the blue line, etc.
Is it possible to create something similar using HighCharts?
Probably as you can see here at http://www.highcharts.com/demo/area-negative
Html:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px;
height: 400px; margin: 0 auto"></div>
Javascript/jQuery:
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
text: 'Area chart with negative values'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
credits: {
enabled: false
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, -2, -3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, -2, 5]
}]
});
});
Link to jsfiddle: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/area-negative/