Develop Reference

Show another bar chart on clicking a particular bar in the main bar chart without disappearing of original bar chart ReactJS

import React, {
useState
} from "react";
import {
render
} from "react-dom";
import HighchartsReact from "highcharts-react-official";
import Highcharts from "highcharts";
import drilldown from "highcharts/modules/drilldown.js";
drilldown(Highcharts);
export const DrillDown = () => {
const [chartOptions, setChartOptions] = useState({
chart: {
type: "bar",
height: 650,
events: {
drilldown: function(e) {
console.log(e.seriesOptions)
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
Ingredients: {
name: "Ingredients",
color: " #ff0000",
data: [
["Nutrients", 22],
["Sweetners", 13],
["Organic/Natural", 2]
],
enableMouseTracking: false
},
Taste: {
name: "Taste",
color: " #ff0000",
data: [
["Baby's Choice", 37],
["Parent's Choice", 5]
],
enableMouseTracking: false
}
},
drilldowns1 = {
Ingredients: {
name: "Ingredients",
color: "#C8C6C6",
data: [
["Nutrients", 4],
["Sweetners", 2],
["Organic/Natural", 2]
],
enableMouseTracking: false
},
Taste: {
name: "Taste",
color: "#C8C6C6",
data: [
["Baby's Choice", 9],
["Parent's Choice", 4]
],
enableMouseTracking: false
}
},
drilldowns2 = {
Ingredients: {
name: "Ingredients",
color: "yellow",
data: [
["Nutrients", 0],
["Sweetners", 0],
["Organic/Natural", 0]
],
enableMouseTracking: false
},
Taste: {
name: "Taste",
color: "yellow",
data: [{
name: "Baby's Choice",
y: 0,
drilldown: true
},
{
name: "Parent's Choice",
y: 0,
drilldown: true
}
],
enableMouseTracking: false
}
},
drilldowns3 = {
Ingredients: {
name: "Ingredients",
color: "green",
data: [
["Nutrients", 25],
["Sweetners", 12],
["Organic/Natural", 18]
],
enableMouseTracking: false
},
Taste: {
name: "Taste",
color: "green",
data: [{
name: "Baby's Choice",
y: 42,
drilldown: true
},
{
name: "Parent's Choice",
y: 8,
drilldown: true
}
],
enableMouseTracking: false
}
},
series = drilldowns[e.point.name],
series1 = drilldowns1[e.point.name],
series2 = drilldowns2[e.point.name],
series3 = drilldowns3[e.point.name];
chart.addSingleSeriesAsDrilldown(e.point, series);
chart.addSingleSeriesAsDrilldown(e.point, series1);
chart.addSingleSeriesAsDrilldown(e.point, series2);
chart.addSingleSeriesAsDrilldown(e.point, series3);
chart.applyDrilldown();
}
}
}
},
title: {
text: "Category Drivers",
align: "left",
style: {
fontWeight: "200",
fontSize: "2vw"
}
},
xAxis: {
type: "category",
style: {
fontSize: "6vw"
}
},
yAxis: {
min: 0,
labels: {
formatter: function() {
return this.axis.defaultLabelFormatter.call(this) + "%";
},
},
tickInterval: 10,
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: "gray",
textOutline: 'none'
}
}
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: ( // theme
Highcharts.defaultOptions.title.style &&
Highcharts.defaultOptions.title.style.color
) || 'gray',
textOutline: 'none'
}
},
legend: {
enabled: true,
reversed: true
},
tooltip: {
enabled: false
},
plotOptions: {
bar: {
stacking: "normal"
},
series: {
borderWidth: 0,
dataLabels: {
enabled: false,
style: {
textShadow: false,
fontSize: "1vw"
}
},
states: {
hover: {
enabled: false
}
}
}
},
series: [{
name: "Negative",
color: " #ff0000",
data: [{
name: "Baby Tolerance",
y: 12,
drilldown: false
},
{
name: "Ingredients",
y: 16,
enableMouseTracking: true,
drilldown: true
},
{
name: "Health Benefits",
y: 6,
drilldown: false
},
{
name: "Taste",
y: 9,
enableMouseTracking: true,
drilldown: true
},
{
name: "Peer Recommendation",
y: 0.5,
drilldown: false
},
{
name: "Expert Advocacy",
y: 2,
drilldown: false
},
{
name: "Brand Value",
y: 3.5,
drilldown: false
},
{
name: "Convenience",
y: 2,
drilldown: false
},
{
name: "Price",
y: 3.5,
drilldown: false
}
],
enableMouseTracking: false
},
{
name: "Mixed",
color: "#bfbfbf",
data: [{
name: "Baby Tolerance",
y: 8,
drilldown: false
},
{
name: "Ingredients",
y: 4,
enableMouseTracking: true,
drilldown: true
},
{
name: "Health Benefits",
y: 3,
drilldown: false
},
{
name: "Taste",
y: 3,
enableMouseTracking: true,
drilldown: true
},
{
name: "Peer Recommendation",
y: 11,
drilldown: false
},
{
name: "Expert Advocacy",
y: 3,
drilldown: false
},
{
name: "Brand Value",
y: 0.5,
drilldown: false
},
{
name: "Convenience",
y: 3,
drilldown: false
},
{
name: "Price",
y: 0.5,
drilldown: false
}
],
enableMouseTracking: false
},
{
name: "Neutral",
color: "#ffc000",
data: [{
name: "Baby Tolerance",
y: 1,
drilldown: false
},
{
name: "Ingredients",
y: 0,
enableMouseTracking: true,
drilldown: true
},
{
name: "Health Benefits",
y: 0,
drilldown: false
},
{
name: "Taste",
y: 0,
enableMouseTracking: true,
drilldown: true
},
{
name: "Peer Recommendation",
y: 0,
drilldown: false
},
{
name: "Expert Advocacy",
y: 0,
drilldown: false
},
{
name: "Brand Value",
y: 0,
drilldown: false
},
{
name: "Convenience",
y: 0,
drilldown: false
},
{
name: "Price",
y: 0,
drilldown: false
}
],
enableMouseTracking: false
},
{
name: "Positive",
color: " #00b050",
data: [{
name: "Baby Tolerance",
y: 20,
drilldown: false
},
{
name: "Ingredients",
y: 15,
enableMouseTracking: true,
drilldown: 'sad'
},
{
name: "Health Benefits",
y: 11,
drilldown: false
},
{
name: "Taste",
y: 7,
enableMouseTracking: true,
drilldown: 'dsa'
},
{
name: "Peer Recommendation",
y: 5,
drilldown: false
},
{
name: "Expert Advocacy",
y: 11,
drilldown: false
},
{
name: "Brand Value",
y: 11,
drilldown: false
},
{
name: "Convenience",
y: 6,
drilldown: false
},
{
name: "Price",
y: 3,
drilldown: false
}
],
enableMouseTracking: false
}
],
drilldown: {
series: []
}
});
return ( <
div >
<
HighchartsReact highcharts = {
Highcharts
}
options = {
chartOptions
}
/> <
/div>
);
};
I am using recharts for designing the graphs in reactJS. I tried using drilldown function from highcharts to achieve another bar chart on clicking a particular bar of the original bar chart but I don't want the original graph to disappear. I want the original graph to decrease itsenter image description here size and show the new bar chart on its right side.
Here is the code I have written.
And I don't want the original graph to disappear.
Here are the attached images that will be helpful.
On clicking the verbatim button, I have to achieve this
enter image description here
Any kind of help will be appreciated.

Get data in pie chart after click on column chart

I have been working on charts, My requirement is when i click on column i want to display data in pie chart format. Initially its working good means i am getting static data in the column chart, But i want to display data in pie chart like circle. i will place code which is working good in column format. But i want it in pie format. Initially column should be in column format, When i click on any on the column data should be display in pie format.
Thanks in advance
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script>
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruits',
y: 2,
drilldown: 'fruits'
}, {
name: 'Cars',
y: 4,
drilldown: 'cars'
}]
}],
drilldown: {
series: [{
id: 'animals',
data: [{
name: 'Mammals',
y: 4,
drilldown: 'mammals'
},
['Reptiles', 2],
['Vertebrates', 1]
]
},
// trying to get data in pie chart after click on any of the column
Highcharts.chart('container', {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
id: 'mammals',
data: [['Cats', 3], ['Dogs', 2], ['Platypus', 1]]
{
id: 'mammals',
data: [{
name: 'cats',
y: 4,
drilldown: 'cats'
},
['one', 2],
['two', 1]
]
},
// third drill down
{
id: 'cats',
data: [['Cats1', 3], ['Dogs1', 2], ['Platypus1', 1]]
},{
id: 'fruits',
data: [
['Apples', 4],
['Oranges', 2]
]
},
},
// end
{
id: 'cars',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
});
</script>
// working good in column format
<script>
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruits',
y: 2,
drilldown: 'fruits'
}, {
name: 'Cars',
y: 4,
drilldown: 'cars'
}]
}],
drilldown: {
series: [{
id: 'animals',
data: [{
name: 'Mammals',
y: 4,
drilldown: 'mammals'
},
['Reptiles', 2],
['Vertebrates', 1]
]
},
// second drill down
{
id: 'mammals',
data: [['Cats', 3], ['Dogs', 2], ['Platypus', 1]]
}, {
id: 'mammals',
data: [{
name: 'cats',
y: 4,
drilldown: 'cats'
},
['one', 2],
['two', 1]
]
},
// third drill down
{
id: 'cats',
data: [['Cats1', 3], ['Dogs1', 2], ['Platypus1', 1]]
},{
id: 'fruits',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: 'cars',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
});
</script>

How to get Category name when click on the chart stack area in High charts?

I need to get Category name (Age>90 Days,Age<90 Days,Age<60 Days,Age<30 Days,Age<14 Days,Age<7 Days) when click on the related area of the graph.
For example when I click on the red area it want to alert "Age > 90 Days".
Graph Image is here!!!
Here is the my Hi chart code.
Highcharts.chart('ageContainer', {
chart: {
type: 'area',
},
colors: ['#39AA59', '#CEAE22', '#3E90BC','#B787E6','#ea780e','#F85858'].reverse(),
title: {
text: 'Age of queued patches during the last year'
},
xAxis: {
categories: lastMonthsName,
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
title: {
text: 'Patch count'
},
labels: {
formatter: function () {
return this.value;
}
}
},
tooltip: {
split: true,
valueSuffix: ' patches'
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
}
},
series: [{
name: 'Age > 90 Days',
data: getData[5]
},{
name: 'Age < 90 Days',
data: getData[4]
},{
name: 'Age < 60 Days',
data: getData[3]
},{
name: 'Age < 30 Days',
data: getData[2]
},{
name: 'Age < 14 Days',
data: getData[1]
},{
name: 'Age < 7 Days',
data: getData[0]
}]});

Check plotOptions.area.events.click for more info.Also see plotOptions.area.trackByArea. Your post does not contain live example. Using official example to give solutions.Hope this helps
Highcharts.chart('container', {
chart: {
type: 'area'
},
title: {
text: 'Historic and Estimated Worldwide Population Growth by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
title: {
text: 'Billions'
},
labels: {
formatter: function() {
return this.value / 1000;
}
}
},
tooltip: {
split: true,
valueSuffix: ' millions'
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
},
series: {
cursor: 'pointer',
trackByArea: true,
stickyTracking: false,
events: {
click: function(event) {
alert(this.name)
}
}
}
},
series: [{
name: 'Asia',
data: [502, 635, 809, 947, 1402, 3634, 5268]
}, {
name: 'Africa',
data: [106, 107, 111, 133, 221, 767, 1766]
}, {
name: 'Europe',
data: [163, 203, 276, 408, 547, 729, 628]
}, {
name: 'America',
data: [18, 31, 54, 156, 339, 818, 1201]
}, {
name: 'Oceania',
data: [2, 2, 2, 6, 13, 30, 46]
}]
});
<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>

Show Column and line chart together in drill down using highcharts

I am trying to show column chart and line chart in combination in drill down using highcharts , but not getting success, but when applying this without drill down, it is easily showing both charts.
I am using this code:
$(function () {
var defaultTitle = "Total Distance By Site";
var drilldownTitle = "Ave. Journey Distance By Vehicle Type";
var ydrillupTitle = "km";
var ydrilldownTitle = "";
var xdrillupcat = ['Site A', 'Site B', 'Site C', 'Site D'];
var xdrilldowncat = ['Waste', 'Medium Truck', 'Mid-Sized', 'Car'];
var chart = new Highcharts.Chart({
chart: {
type: 'column',
renderTo: 'totdisbyloc',
events: {
drilldown: function(e) {
chart.setTitle({ text: drilldownTitle });
chart.xAxis[0].setCategories(xdrilldowncat);
chart.yAxis[0].axisTitle.attr({
text: ydrilldownTitle
});
},
drillup: function(e) {
chart.setTitle({ text: defaultTitle });
chart.xAxis[0].setCategories(xdrillupcat);
chart.yAxis[0].axisTitle.attr({
text: ydrillupTitle
});
}
}
},
title: {
text: defaultTitle
},
subtitle: {
text: ''
},
xAxis: {
categories: xdrillupcat
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: ydrillupTitle
}
},
plotOptions: {
column: {
stacking: 'normal',
showInLegend: true
}
},
series:[
{
name:'Car',
tooltip: {
headerFormat: '<span style="font-size:11px">{}</span>',
pointFormat: '<span>Car</span>: <b>{point.y}</b> of total: {point.stackTotal}<br/>'
},
data: [{
name: "Car",
title: "Ave. Journey Distance By Car",
y: 5,
drilldown: "Car"
}, {
name: "Mid-Sized",
title: "Ave. Journey Distance By Mid-Sized",
y: 4,
drilldown: "Mid-Sized"
}, {
name: "Medium Truck",
title: "Ave. Journey Distance By Medium Truck",
y: 3,
drilldown: "Medium Truck"
}, {
name: "Large Truck",
title: "Ave. Journey Distance By Large Truck",
y: 6,
drilldown: "Large Truck"
}]
},
{
name:'Mid-Sized',
tooltip: {
headerFormat: '<span style="font-size:11px">{}</span>',
pointFormat: '<span>Mid-Sized</span>: <b>{point.y}</b> of total: {point.stackTotal}<br/>'
},
data: [{
name: "Car",
title: "Ave. Journey Distance By Car",
y: 2,
drilldown: "Car"
}, {
name: "Mid-Sized",
title: "Ave. Journey Distance By Mid-Sized",
y: 2,
drilldown: "Mid-Sized"
}, {
name: "Medium Truck",
title: "Ave. Journey Distance By Medium Truck",
y: 3,
drilldown: "Medium Truck"
}, {
name: "Large Truck",
title: "Ave. Journey Distance By Large Truck",
y: 2,
drilldown: "Large Truck"
}]
},
{
name:'Medium Truck',
tooltip: {
headerFormat: '<span style="font-size:11px">{}</span>',
pointFormat: '<span>Medium Truck</span>: <b>{point.y}</b> of total: {point.stackTotal}<br/>'
},
data: [{
name: "Car",
y: 4,
drilldown: "Car"
}, {
name: "Mid-Sized",
y: 5,
drilldown: "Mid-Sized"
}, {
name: "Medium Truck",
y: 3,
drilldown: "Medium Truck"
}, {
name: "Large Truck",
y: 7,
drilldown: "Large Truck"
}]
},
{
name:'Large Truck',
tooltip: {
headerFormat: '<span style="font-size:11px">{}</span>',
pointFormat: '<span>Large Truck</span>: <b>{point.y}</b> of total: {point.stackTotal}<br/>'
},
data: [{
name: "Car",
y: 5,
drilldown: "Car"
}, {
name: "Mid-Sized",
y: 3,
drilldown: "Mid-Sized"
}, {
name: "Medium Truck",
y: 4,
drilldown: "Medium Truck"
}, {
name: "Large Truck",
y: 7,
drilldown: "Large Truck"
}]
}
],
drilldown: {
series: [
{
title: "Ave. Journey Distance by Car",
showInLegend: false,
name: "Car",
type: "column",
id: "Car",
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}: {point.y}'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{}</span>',
pointFormat: '<span>{point.name}</span>: <b>{point.y}</b> of total<br/>'
},
data: [
["Large Truck", 24],
["Medium Truck", 17],
["Mid-Sized", 8],
["Car", 10]
]
},
{
title: "Ave. Journey Distance by Car",
showInLegend: false,
name: "Car",
type: "spline",
id: "Car",
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}: {point.y}'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{}</span>',
pointFormat: '<span>{point.name}</span>: <b>{point.y}</b> of total<br/>'
},
data: [
["Large Truck", 22],
["Medium Truck", 15],
["Mid-Sized", 6],
["Car", 8]
]
},
{
title: "Ave. Journey Distance by Mid-Sized",
name: "Mid-Sized",
showInLegend: false,
type: "column",
id: "Mid-Sized",
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}: {point.y}'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{}</span>',
pointFormat: '<span>{point.name}</span>: <b>{point.y}</b> of total<br/>'
},
data: [
["Large Truck", 24],
["Medium Truck", 17],
["Mid-Sized", 8],
["Car", 10]
]
},
{
title: "Ave. Journey Distance by Medium Truck",
name: "Medium Truck",
showInLegend: false,
type: "column",
id: "Medium Truck",
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}: {point.y}'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{}</span>',
pointFormat: '<span>{point.name}</span>: <b>{point.y}</b> of total<br/>'
},
data: [
["Large Truck", 24],
["Medium Truck", 17],
["Mid-Sized", 8],
["Car", 10]
]
},
{
title: "Ave. Journey Distance by Large Truck",
name: "Large Truck",
showInLegend: false,
type: "column",
id: "Large Truck",
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}: {point.y}'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{}</span>',
pointFormat: '<span>{point.name}</span>: <b>{point.y}</b> of total<br/>'
},
data: [
["Large Truck", 24],
["Medium Truck", 17],
["Mid-Sized", 8],
["Car", 10],
]
}
]
}
// ... more options
});
});

Using dynamic drill down it is possible to use addSingleSeriesAsDrilldown function for each series and call chart.applyDrilldown(); at the end of drill down.
Example: http://jsfiddle.net/zn1o2xzL/

Highcharts datetime tick start and interval

The data starts at 6am on Monday and has a data point for each hour. I am having trouble getting the xAxis tick marks to read "6am Monday", and repeat every 24 hours.
Any tips? Here is a fiddle http://jsfiddle.net/4x136qxg/1/
Here is my main graphing function:
var dayInMilliseconds = 3600 * 1000 * 24;
$(function () {
$('#chart1').highcharts({
chart: {
type: 'area'
},
title: {
text: 'Orders'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
// month: '%A',
},
// tickInterval: dayInMilliseconds,
title: {
text: null
},
labels: {
align: 'left',
x: 3
},
// startOnTick: true,
// endOnTick: true,
// min: 1413352800000,
},
yAxis: {
title: {
text: null
},
min: 0,
},
legend: {
enabled: false
},
plotOptions: {
area: {
marker: {
enabled: false,
symbol: 'circle'
},
lineWidth: 0,
fillOpacity: 1,
// pointStart: 1413352800000,
},
},
series: [{
name: '1',
color: '#edc54b',
data: seriesData[0].data
},{
name: '2',
color: '#edc54b',
data: seriesData[1].data
},{
name: '3',
color: '#edc54b',
data: seriesData[2].data
},{
name: '4',
color: '#edc54b',
data: seriesData[3].data
},{
name: '5',
color: '#edc54b',
data: seriesData[4].data
},{
name: '6',
color: '#edc54b',
data: seriesData[5].data
},{
name: '7',
color: '#fbd046',
data: seriesData[6].data
}]
});
});