Develop Reference

Add second series to highchart master detail

I'm using highcharts to create a master-detail chart, could you help me how to add another series type area to the chart? i have used example from official site, but i cant imagine how to add second area to this chart
const priceChart1 = Highcharts.getJSON(
'https://cdn.jsdelivr.net/gh/highcharts/highcharts#v7.0.0/samples/data/usdeur.json',
data => {
let detailChart;
// create the detail chart
function createDetail(masterChart) {
// prepare the detail chart
var detailData = [],
detailStart = data[0][0];
masterChart.series[0].data.forEach(point => {
if (point.x >= detailStart) {
detailData.push(point.y);
}
});
// create a detail chart referenced by a global variable
detailChart = Highcharts.chart('detail-container', {
chart: {
zoomType: "x",
spacingLeft: 10,
spacingRight: -20,
borderRadius: 10,
backgroundColor: "#F3F3F3",
borderColor: "#335cad",
height: priceChartHeight,
style: { fontFamily: "Manrope" },
style: {
position: 'absolute'
},
resetZoomButton: {
position: {
// align: 'right', // by default
// verticalAlign: 'top', // by default
x: -40,
y: 5
},
theme: {
fill: '#377DED',
stroke: 'transparent',
r: 0,
style: {
color: 'white',
borderRadius: 10
},
states: {
hover: {
fill: '#41739D',
style: {
color: 'white'
},
},
},
},
},
marginBottom: 90,
reflow: false,
marginLeft: 10,
style: {
position: 'absolute'
}
},
credits: {
enabled: false
},
title: {
text: null,
align: 'left'
},
subtitle: {
text: null,
align: 'left'
},
xAxis: {
type: 'datetime',
visible: false,
},
yAxis: {
title: {
text: null,
},
opposite: true,
gridLineColor: "rgba(87, 87, 87, 0.15)",
gridLineDashStyle: "dash",
left: -40
},
tooltip: {
formatter: function () {
var point = this.points[0];
return '' + '<br/>' + ' <span style="font-weight: 700;font-size: 14px; line-height: 19px; color: #377DED;"> ' + Highcharts.numberFormat(point.y, 2) + '</span> ' + '<span style="font-size: 9px; font-weight: 300; line-height: 12px; color: rgba(51,51,51, 0.25)">Nominal</span>' + '<br/> ' + '<span style="font-size: 9px; font-weight: 300; line-height: 12px; color: rgba(51,51,51, 0.25)">' + Highcharts.dateFormat('%e %B %Y', this.x) + '</span>' },
shared: true,
borderRadius: 5,
borderColor: 'transparent',
shadow: false,
backgroundColor: '#fff'
},
legend: {
enabled: false
},
plotOptions: {
series: {
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 3
}
}
}
}
},
series: [
{
name: 'Nominal',
data: detailData,
type: 'area',
},
],
exporting: {
enabled: false
}
}); // return chart
}
// create the master chart
function createMaster() {
Highcharts.chart('master-container', {
chart: {
reflow: false,
borderWidth: 0,
backgroundColor: null,
spacingLeft: 10,
spacingRight: 30,
borderRadius: 10,
zoomType: 'x',
events: {
// listen to the selection event on the master chart to update the
// extremes of the detail chart
selection: function (event) {
var extremesObject = event.xAxis[0],
min = extremesObject.min,
max = extremesObject.max,
detailData = [],
xAxis = this.xAxis[0];
// reverse engineer the last part of the data
this.series[0].data.forEach(point => {
if (point.x > min && point.x < max) {
detailData.push([point.x, point.y]);
}
});
// move the plot bands to reflect the new detail span
xAxis.removePlotBand('mask-before');
xAxis.addPlotBand({
id: 'mask-before',
from: data[0][0],
to: min,
color: 'rgba(0, 0, 0, 0)'
});
xAxis.removePlotBand('mask-after');
xAxis.addPlotBand({
id: 'mask-after',
from: max,
to: data[data.length - 1][0],
color: 'rgba(0, 0, 0, 0)'
});
xAxis.addPlotBand({
id: 'mask-after',
from: min,
to: max,
color: 'rgba(255, 255, 255, 1)',
borderColor: "#377DED",
borderWidth: 2
});
detailChart.series[0].setData(detailData);
console.log(min)
console.log(max)
return false;
}
}
},
title: {
text: null
},
accessibility: {
enabled: false
},
xAxis: {
type: "datetime",
labels: { format: '{value:%b %e }' },
crosshair: {
color: '#377DED80'
},
lineWidth: 0, minorGridLineWidth: 0, lineColor: 'transparent', minorTickLength: 0, tickLength: 0,
top: -5,
showLastTickLabel: true,
maxZoom: 14 * 24 * 3600000, // fourteen days
plotBands: [{
id: 'mask-before',
from: data[0][0],
to: data[data.length - 1][0],
color: 'rgba(0, 0, 0, 0)'
}],
title: {
text: null
},
},
yAxis: {
gridLineWidth: 0,
labels: {
enabled: false
},
title: {
text: null
},
min: 0.6,
showFirstLabel: false
},
tooltip: {
borderRadius: 50,
borderColor: 'red'
},
legend: {
enabled: false
},
credits: {
enabled: false
},
plotOptions: {
series: {
fillColor: {
linearGradient: [0, 0, 0, 70],
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, 'rgba(255,255,255,0)']
]
},
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
enableMouseTracking: false
}
},
series: [{
type: 'area',
name: 'USD to EUR',
pointInterval: 24 * 3600 * 1000,
pointStart: data[0][0],
data: data
}],
exporting: {
enabled: false
}
}, masterChart => {
createDetail(masterChart);
}); // return chart instance
}
// make the container smaller and add a second container for the master chart
const container = document.getElementById('price-chart-main');
container.style.position = 'relative';
container.innerHTML += '<div id="detail-container" style="height: 100%"></div><div id="master-container" style="height: 90px; position: absolute; bottom: 0; width: 100%"></div>';
// create master and in its callback, create the detail chart
createMaster();
}
);
there is example that i used https://www.highcharts.com/demo/dynamic-master-detail

Adding a new series to a master-detail chart is very simple. You need to only add a new data set and connect it to the right series. For example:
var detailData = [
[],
[]
],
detailStart = data1[0][0];
masterChart.series.forEach((s, index) => {
s.points.forEach(point => {
if (point.x >= detailStart) {
detailData[index].push(point.y);
}
});
});
// create a detail chart referenced by a global variable
detailChart = Highcharts.chart('detail-container', {
chart: {
type: 'area',
...
},
...,
series: [{
data: detailData[0]
}, {
data: detailData[1]
}]
});
Live demo: https://jsfiddle.net/BlackLabel/97dxakfe/
API Reference: https://api.highcharts.com/highcharts/series

Echart icon in series tooltip

So i have the following configuration:
const frequencyChartoption = {
title: {},
tooltip: {},
legend: {
data: ['Frekvens', 'Vigtighed']
},
xAxis: {
type: 'category',
data: ['marker_01', 'marker_02'],
axisLabel: {
formatter: function (value) {
return '{' + value + '| }\n{value|}';
},
margin: 20,
rich: {
value: {
lineHeight: 30,
align: 'center'
},
marker_01: {
height: 20,
align: 'center',
backgroundColor: {
image: icons.marker_01
}
},
marker_02: {
height: 20,
align: 'center',
backgroundColor: {
image: icons.maker_02
}
},
}
}
},
yAxis: {},
series: [{
name: 'Frekvens',
type: 'bar',
data: frequencyChartFrequencyScore,
tooltip: icons.marker_01,
itemStyle: {
normal: {
color: colors[0],
label: {
interval: 5,
show: true,
position: 'top',
formatter: '\n{c}'
}
}
}
},
{
name: 'Vigtighed',
type: 'bar',
data: frequencyChartImportance,
itemStyle: {
normal: {
color: colors[1],
label: {
show: true,
position: 'top',
formatter: '\n{c}'
}
}
}
}
]
};
Now as you can see i am using two images as my xAxis
Now i wish to make these show up on my tooltip when i hover over the chart. However i am not quite sure how to do that and was hoping some of you might be able to help?

Simply stated, a series may have a tooltip but the tooltip must be listed as an object with an identifying trigger (see tooltip documentation).
series: [{
name: 'Frekvens',
type: 'bar',
data: frequencyChartFrequencyScore,
tooltip: {
show: true,
trigger: 'axis',
formatter: (params) => {
// see tooltip.formatter for details
// you want to focus on the 'marker' property
return params[0].name;
}
}
}]
With this in mind, you can set two variables and print them as need be within the output of your tooltip. See the additional example below (from CodePen).
var myChart = echarts.init(document.getElementById("main"));
// specify chart configuration item and data
var option = {
title: {
text: "ECharts entry example"
},
tooltip: {
show: true,
trigger: "axis",
backgroundColor: 'rgba(0, 0, 0, 0.8)',
formatter: (params) => {
// create new marker
var icon0 = `<span data-tooltip="minimum" style="border-left: 2px solid #fff;display: inline-block;height: 12px;margin-right: 5px;width: 20px;"><span style="background-color:${params[0].color};display: block;height: 4px;margin-top: 4px;width: 20px;"></span></span>`;
var icon1 = `<span data-tooltip="implied-high" style="background-color:rgba(255,255,255,.75);border-radius: 2px;display: inline-block;height: 12px;margin-right:5px;width: 20px;"><span style="background-color:${params[0].color};border: 1px solid ${params[0].color};border-radius:50%;display:block;height:6px;margin-left:7px;margin-top:3px;width:6px;"></span></span>`;
console.log("params", params, params[0].name);
return `${icon0} ${params[0].name}
${icon1} ${params[0].value}`;
},
textStyle: {
fontWeight: 'bold',
fontSize: 18
}
},
legend: {
data: ["Sales"]
},
xAxis: {
data: ["shirt", "cardign", "chiffon shirt", "pants", "heels", "socks"]
},
yAxis: {},
series: [
{
name: "Sales",
type: "bar",
data: [5, 20, 36, 10, 10, 20]
}
]
};
// use configuration item and data specified to show chart
myChart.setOption(option);

Highcharts not working in ie 11

Please don't say question already asked. I searched alot but faild.
The charts displaying perfectly in chrome, Firefox, and edge but not displaying in IE 11 and less.
here is my code
Highcharts.chart('teledensity', {
chart: {
type: 'line'
},
colors: [graph_data.series_color_one,graph_data.series_color_two,graph_data.series_color_three],
title: {
text: 'title'
},
credits:{
enabled:false
},
xAxis: {
type: 'category',
labels: {
autoRotation: [0],
style: {
fontSize: '11px',
fontFamily: 'Verdana, sans-serif'
}
},
categories: graph_categories,
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'title of y-axis'
},
stackLabels: {
enabled: true,
formatter: function(){
// var val = this.total;
// return (val/1000000).toFixed(2);
},
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
},
legend: {
align: 'center',
x: 20,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: 'white',
// borderColor: '#CCC',
// borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}',
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
formatter: function(){
var val = this.y;
return (val/1000000).toFixed(2);
},
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
},
treshold: 1
}
},
series: [{
name: 'series one',
data: ['1','2','3'],
marker: {
lineWidth: 2,
lineColor: '#000',
fillColor: 'white'
}
}, {
name: 'series two',
data: ['1','2','3'],
marker: {
symbol: 'square'
},
}, {
name: 'series three',
data: ['1','2','3'],
marker: {
symbol: 'square'
},
}]
});

The problem was with the series you had given. I just changed your series as following.
series: [{
name: 'series one',
data: [1,2,3],
marker: {
lineWidth: 2,
lineColor: '#000',
fillColor: 'white'
}
}, {
name: 'series two',
data: [4,5,6],
marker: {
symbol: 'square'
},
}, {
name: 'series three',
data: [7,8,9],
marker: {
symbol: 'square'
},
}]
You can see that, you were given the data as a string data: ['1','2','3']. You can see the updated jsFiddle here.
Note: If jsFiddle is not loading in your IE browser, please try using draft version of jsFiddle.
I would also recommend you to style your container div, in your case teledensity with some height.
#teledensity {
min-width: 310px;
max-width: 800px;
height: 400px;
margin: 0 auto
}
Highcharts.chart('teledensity', {
chart: {
type: 'line'
},
title: {
text: 'title'
},
credits:{
enabled:false
},
xAxis: {
type: 'category',
labels: {
autoRotation: [0],
style: {
fontSize: '11px',
fontFamily: 'Verdana, sans-serif'
}
},
categories: ['2015','2016','2017'],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'title of y-axis'
},
stackLabels: {
enabled: true,
formatter: function(){
// var val = this.total;
// return (val/1000000).toFixed(2);
},
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
},
legend: {
align: 'center',
x: 20,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: 'white',
// borderColor: '#CCC',
// borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}',
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
formatter: function(){
var val = this.y;
return (val/1000000).toFixed(2);
},
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
},
treshold: 1
}
},
series: [{
name: 'series one',
data: [1,2,3],
marker: {
lineWidth: 2,
lineColor: '#000',
fillColor: 'white'
}
}, {
name: 'series two',
data: [4,5,6],
marker: {
symbol: 'square'
},
}, {
name: 'series three',
data: [7,8,9],
marker: {
symbol: 'square'
},
}]
});
#teledensity {
min-width: 310px;
max-width: 800px;
height: 400px;
margin: 0 auto
}
<div id="teledensity"></div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://highcharts.github.io/export-csv/export-csv.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>

Solved...!
As I was creating graph dynamically and I used .map() which is ES6 not supported by IE11 so I modify code
From
graph_series_data_one = series_data_one ?>.reverse().map(x => parseFloat(x));
graph_series_data_two = series_data_two ?>.reverse().map(x => parseFloat(x));
To
graph_series_data_one = series_data_one ?>.reverse().map(function (x) { return parseFloat(x); });
graph_series_data_two = series_data_two ?>.reverse().map(function (x) { return parseFloat(x); });
and it worked.
Thanks.

how to add hover effect in hightcharts?

can we add hover effect in hightcharts (donut chart) ..Can we add hover effect in donut chart shown in given url
http://c3js.org/samples/chart_donut.html
please check above link and hover any slice .it dark the selected slice and grey out the other as same effect in legend
can we do in highcharts
here is the code
http://jsfiddle.net/sk0603wj/
$(function () {
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Browser<br>shares<br>2015',
align: 'center',
verticalAlign: 'middle',
y: 40
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,
distance: -50,
style: {
fontWeight: 'bold',
color: 'white'
}
},
startAngle: -90,
endAngle: 90,
center: ['50%', '75%']
}
},
series: [{
type: 'pie',
name: 'Browser share',
innerSize: '50%',
data: [
['Firefox', 10.38],
['IE', 56.33],
['Chrome', 24.03],
['Safari', 4.77],
['Opera', 0.91],
{
name: 'Proprietary or Undetectable',
y: 0.2,
dataLabels: {
enabled: false
}
}
]
}]
});
});

It can be done, but it is not very straight forward. Here you can see the building blocks of this:
http://jsfiddle.net/3ehrgge7/2/
1) you need to to remember the reference to the chart
var hc = Highcharts.chart(...
2) Then you can use mouseOver and mouseOut events on the elements to modify the points of the series. Here is an example of mouse over event, that for all but hovered item updates the color to something.
plotOptions: {
pie: {
point:{
events:{
mouseOver:function(ev){
hc.series[0].points.forEach(
function(i){
if(ev.target !== i ){
i.update({color:'rgba(150,100,50,0.1)'});
}
}
)
}
}
},
states: {
hover: {
halo: {
size: 9,
opacity: 0.75
}
}
}
}
}
3) To make the desired effect, you have to have a table of colors that you will be assigning to your points.
I hope, this helps.

Here is a complete example of what you wanted to achieve in pure JavaScript using only Highcharts library.
const chart = Highcharts.chart('container', {
chart: {
events: {
load () {
colorAllGray.call(this)
}
}
},
plotOptions: {
series: {
point: {
events: {
mouseOver(e) {
colorAllGray.call(chart)
e.target.update({
color: Highcharts.getOptions().colors[e.target.index]
})
},
mouseOut() {
colorAllGray.call(chart)
}
}
},
},
},
series: [{
type: 'pie',
name: 'Browser share',
innerSize: '50%',
data: [
['Firefox', 10.38],
['IE', 56.33],
['Chrome', 24.03],
['Safari', 4.77],
['Opera', 0.91], {
name: 'Proprietary or Undetectable',
y: 0.2,
dataLabels: {
enabled: false
}
}
]
}]
})
function colorAllGray() {
this.series[0].points.forEach(function(point) {
point.update({
color: 'rgba(150,100,50,0.1)'
})
})
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; width: 500"></div>
Live example
https://jsfiddle.net/5eq6vx3f/

$(function () {
var hc = Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Browser<br>shares<br>2015',
align: 'center',
verticalAlign: 'middle',
y: 40
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
point:{
events:{
mouseOver:function(ev){
hc.series[0].points.forEach(
function(i){
if(ev.target !== i ){
if(i.color.indexOf('rgba') < 0) {
i.update({color: convertHex(i.color) + ",0.1)"});
}else{
i.update({color: i.color.replace('1)', '0.1)')});
}
}
}
)
},
mouseOut:function(ev){
hc.series[0].points.forEach(
function(i){
i.update({color: i.color.replace('0.1','1')});
}
)
}
}
},
states: {
hover: {
halo: {
size: 9,
opacity: 0.75
}
}
},
dataLabels: {
enabled: true,
distance: -50,
style: {
fontWeight: 'bold',
color: 'white'
}
},
startAngle: -90,
endAngle: 90,
center: ['50%', '75%']
}
},
series: [{
type: 'pie',
name: 'Browser share',
innerSize: '50%',
data: [
['Firefox', 10.38],
['IE', 56.33],
['Chrome', 24.03],
['Safari', 4.77],
['Opera', 0.91],
{
name: 'Proprietary or Undetectable',
y: 0.2,
dataLabels: {
enabled: false
}
}
],
color: ['rgba(12,181,236,1)', 'rgba(247,181,236,1)', 'rgba(128,133,233,1)', 'rgba(241,92,128,1)', 'rgba(241,181,236,1)', 'rgba(247,181,236,1)']
}]
});
function convertHex(hex){
hex = hex.replace('#','');
r = parseInt(hex.substring(0,2), 16);
g = parseInt(hex.substring(2,4), 16);
b = parseInt(hex.substring(4,6), 16);
result = 'rgba('+r+','+g+','+b+'';
return result;
}
});
http://jsfiddle.net/3ehrgge7/6/

How can I remove the white border from HighCharts pie chart?

I am using High-charts to show pie charts, can any one tell me how can I remove this white border around the radius. My code is given below also the screen shot image of chart.
I have no lot of experience with high-charts if anyone know this please help me. The documentation is also very tough to read and understand
$(function () {
$('#cashflow_graph').highcharts({
chart: {
type: 'pie',
backgroundColor:'red',
},
title: {
text: false
},
yAxis: {
title: {
text: false
}
},
plotOptions: {
pie: {
dataLabels: {
enabled: false
},
shadow: false,
center: ['50%', '50%']
},
series: {
states: {
hover: {
enabled: false,
halo: {
size: 0
}
}
}
},
},
credits: {
enabled: false
},
tooltip: {
enabled: false,
valueSuffix: '%'
},
series: [{
name: 'Cash Flow',
data: [
{
name: 'Incoming',
y: 40,
color: '#87b22e'
},
{
name: 'Outgoing',
y: 30,
color: 'black'
},
{
name: '',
y: 30,
color: 'white'
}
],
size: '80%',
innerSize: '80%',
dataLabels: {
enabled: false,
formatter: function () {
return false;
}
}
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/highcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/highcharts-more.src.js"></script>
<div id="cashflow_graph" style="height: 300px; width:100%;"></div>

You need to set the plotOptions.pie.borderWidth property to 0:
$(function() {
$('#cashflow_graph').highcharts({
chart: {
type: 'pie',
backgroundColor: 'red',
},
title: {
text: false
},
yAxis: {
title: {
text: false
}
},
plotOptions: {
pie: {
dataLabels: {
enabled: false
},
shadow: false,
center: ['50%', '50%'],
borderWidth: 0 // < set this option
},
series: {
states: {
hover: {
enabled: false,
halo: {
size: 0
}
}
}
},
},
credits: {
enabled: false
},
tooltip: {
enabled: false,
valueSuffix: '%'
},
series: [{
name: 'Cash Flow',
data: [{
name: 'Incoming',
y: 40,
color: '#87b22e'
}, {
name: 'Outgoing',
y: 30,
color: 'black'
}, {
name: '',
y: 30,
color: 'white'
}
],
size: '80%',
innerSize: '80%',
dataLabels: {
enabled: false,
formatter: function() {
return false;
}
}
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/highcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/highcharts-more.src.js"></script>
<div id="cashflow_graph" style="height: 300px; width:100%;"></div>