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/
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>
How i can increase legend symbol size, I have tried these properties
symbolHeight: 12
symbolWidth: 12
symbolRadius: 6 but these are not working for line chart.
code:https://jsfiddle.net/juvcfkmh/4/
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Round legend symbols'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr']
},
legend: {
symbolHeight: 12,
symbolWidth: 12,
symbolRadius: 6
},
series: [{
data: [1, 3, 2, 4]
}, {
data: [6, 4, 5, 3]
}, {
data: [2, 7, 6, 5]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
The legend appearance is based on a series marker, so you can for example create another series without data, define marker options and link the real series.
series: [{
...,
id: 'firstSeries',
marker: {
radius: 15
},
data: []
}, {
...,
linkedTo: 'firstSeries',
data: [...]
}]
Live demo: http://jsfiddle.net/BlackLabel/4yrk5dq1/
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>
I am using Highcharts stacked bar chart, but not getting the lines at the end of values as it is in below image, can someone help me on this using Highcharts in built API or methods.
http://i.stack.imgur.com/y3AVm.png
create image and change the sun.png in js code.
$(function () {
$('#container').highcharts({
title: {
text: 'Combination chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
},
labels: {
items: [{
html: 'Total fruit consumption',
style: {
left: '50px',
top: '18px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}]
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
type: 'bar',
name: 'Jane',
data: [3, 2, 1, 3, 4]
}, {
type: 'bar',
name: 'John',
data: [2, 3, 5, 7, 6]
}, {
type: 'bar',
name: 'Joe',
data: [4, 3, 3, 9, 0]
}, {
data: [9, 8, 9, 19, 10],
lineWidth: 0,
enableMouseTracking: false,
marker: {
symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
}
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<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>
I am looking for a way to create a bar chart where bars change color from light to dark depending on their value (length) as in following example:
Color can be set per point, so you could calculate what color a point should have and set it through data in chart's options.
$(function() {
var data = [1, 2, 3, 4, 5, 6, 7, 8, 9];
Highcharts.each(data, function(point, i) {
data[i] = [point, '#f' + point + '0'];
});
$('#container').highcharts({
series: [{
type: 'bar',
data: data,
keys: ['y', 'color']
}]
});
});
JSFiddle: http://jsfiddle.net/w8c8fxju/
Update: Color axis could be used.
Highcharts.chart('container',{
colorAxis: {
minColor: '#4f4',
maxColor: '#060'
},
series: [{
type: 'bar',
data: [1, 2, 3, 4, 5, 6, 7, 8, 9]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/coloraxis.js"></script>
<div id="container" style="height: 400px"></div>
JSFiddle: https://jsfiddle.net/BlackLabel/e7kqw481/