Related
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.
I need to make bar chart with multiple ranges in same row.
This is an example from https://apexcharts.com/javascript-chart-demos/timeline-charts/advanced/
My problem is that i need Xaxis in integer type not 'datetime' as it is in this example. When i change Xaxis type to integer chart does not show as i want it because there will be created for every range new column.
This is my output.
var options = {
series: [
{
name: 'Bob',
data: [
{
x: 'Design',
y: [
4,9
]
},
{
x: 'Code',
y: [
5,7
]
},
{
x: 'Code',
y: [
0,1
]
},
{
x: 'Test',
y: [
9,10
]
},
{
x: 'Test',
y: [
4,7
]
},
{
x: 'Validation',
y: [
2,5
]
},
{
x: 'Design',
y: [
1,2
]
}
]
},
{
name: 'Joe',
data: [
{
x: 'Design',
y: [
1,2
]
},
{
x: 'Test',
y: [
4,6
]
},
{
x: 'Code',
y: [
7,9
]
},
{
x: 'Deployment',
y: [
1,5
]
},
{
x: 'Design',
y: [
4,7
]
}
]
},
{
name: 'Dan',
data: [
{
x: 'Code',
y: [
3,5
]
},
{
x: 'Validation',
y: [
2,3
]
},
]
}
],
chart: {
height: 450,
type: 'rangeBar'
},
plotOptions: {
bar: {
horizontal: true,
barHeight: '80%'
}
},
xaxis: {
min: 0,
max: 10
},
stroke: {
width: 1
},
fill: {
type: 'solid',
opacity: 0.6
},
legend: {
position: 'top',
horizontalAlign: 'left'
}
};
This is my code. In other words i need to have for example for 'Bob' in 'Design' two bars. One in range 1-2 and second in range 4-9. Can somebody help me? Is it even posible with apexcharts?
I have an array of objects that need to be filtered through, and displayed depending on which checkbox is selected. I can get it to work with a one dimension array, when I nest deeper I don't understand how to get everything working again.
This is the initial function that filters the array:
computed: {
selectedFilters: function() {
let filters = [];
let checkedFilters = this.shopFilters.filter(obj => obj.checked);
checkedFilters.forEach(element => {
filters.push(element.value);
});
return filters;
}
}
Tis is the data it pulls from:
shopFilters: [
{
name: 'price',
categories: [
{
checked: false,
value: 'Under $50'
},
{
checked: false,
value: '$50 to $100'
},
{
checked: false,
value: '$100 to $150'
},
{
checked: false,
value: '$150 to $200'
},
{
checked: false,
value: 'Over $200'
},
]
},
{
name: 'sports',
categories: [
{
checked: false,
value: 'lifestyle'
},
{
checked: false,
value: 'running'
},
{
checked: false,
value: 'basketball'
},
{
checked: false,
value: 'football'
},
{
checked: false,
value: 'soccer'
},
{
checked: false,
value: 'training & gym'
},
{
checked: false,
value: 'skateboarding'
},
{
checked: false,
value: 'baseball / softball'
},
{
checked: false,
value: 'golf'
}
]
}
]
This is the function that filters through the product data in another file to display on the page:
methods: {
getfilteredData: function() {
this.filteredData = data;
let filteredDataByfilters = [];
// first check if filters where selected
if (this.selectedFilters.length > 0) {
filteredDataByfilters= this.filteredData.filter(obj => this.selectedFilters.every(val => obj.indexOf(val) >= 0));
this.filteredData = filteredDataByfilters;
}
}
}
What the data looks like:
const data = [
{
name: 'SNKR 001',
gender: 'Men',
price: 100,
sport: 'running',
width: 'Wide',
colors: ['black', 'white', 'green', 'pink'],
sizes: [3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9, 9.5, 10, 10.5, 11, 11.5, 12, 12.5, 13, 14, 15],
image: '../assets/images/shoe-1.png'
},
{
name: 'SNKR 002',
gender: 'Men',
price: 100,
sport: 'running',
width: 'Wide',
colors: ['black', 'white', 'green', 'pink'],
sizes: [3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9, 9.5, 10, 10.5, 11, 11.5, 12, 12.5, 13, 14, 15],
image: '../assets/images/shoe-1.png'
},
{
name: 'SNKR 003',
gender: 'Men',
price: 100,
sport: 'training & gym',
width: 'Wide',
colors: ['black', 'white', 'green', 'pink'],
sizes: [3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9, 9.5, 10, 10.5, 11, 11.5, 12, 12.5, 13, 14, 15],
image: '../assets/images/shoe-1.png'
},
{
name: 'SNKR 004',
gender: 'Men',
price: 100,
sport: 'lifestyle',
width: 'Wide',
colors: ['black', 'white', 'green', 'pink'],
sizes: [3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9, 9.5, 10, 10.5, 11, 11.5, 12, 12.5, 13, 14, 15],
image: '../assets/images/shoe-1.png'
}
];
export default data;
You can merge all filter into 1 array:
const categories = this.shopFilters.map(item => item.categories)
const flatFilters = [].concat.apply([], categories)
then the filter will become flat:
flatFilters: [{
checked: false,
value: 'Under $50'
},
{
checked: false,
value: '$50 to $100'
},
{
checked: false,
value: '$100 to $150'
},
{
checked: false,
value: '$150 to $200'
},
{
checked: false,
value: 'Over $200'
},
{
checked: false,
value: 'lifestyle'
},
{
checked: false,
value: 'running'
},
{
checked: false,
value: 'basketball'
},
{
checked: false,
value: 'football'
},
{
checked: false,
value: 'soccer'
},
{
checked: false,
value: 'training & gym'
},
{
checked: false,
value: 'skateboarding'
},
{
checked: false,
value: 'baseball / softball'
},
{
checked: false,
value: 'golf'
}
]
then use can apply old logic
computed: {
selectedFilters: function() {
let filters = [];
const categories = this.shopFilters.map(item => item.categories)
const flatFilters = [].concat.apply([], categories)
let checkedFilters = flatFilters.filter(obj => obj.checked);
checkedFilters.forEach(element => {
filters.push(element.value);
});
return filters;
}
I have a stacked column chart in Highcharts with several categories. In the xAxis categories, I just want to show 'Delhi', 'Jammu & Kashmir', 'Madhya Pradesh', 'Maharashtra', 'West Bengal' and 'Kerala' when the chart is loaded for the first time. The user can then select other categories (like 'Andhra Pradesh' by clicking a button). So I want that all categories other than the initial categories to be invisible.
Here is a snippet of the object that I've created. Data is getting displayed for all categories, irrespective of their visibility.
Where am I going wrong?
var revenueComposition = [{
name: 'Grants in Aid',
data: [{
name: 'Delhi',
y:6.4
}, {
name: 'Jammu & Kashmir',
y:57
}, {
name: 'Kerala',
y: 12
}, {
name: 'Madhya Pradesh',
y: 18.7
}, {
name: 'Maharashtra',
y: 13.5
}, {
name: 'West Bengal',
y: 24.6}, {
name: 'Andhra Pradesh',
y: 29.9,
visible: false
}, {
name: 'Bihar',
y: 26.9,
visible: false
}, {
name: 'Chhattisgarh',
y: 21.3,
visible: false
}, {
name: 'Gujarat',
y: 11.9,
visible: false
}, {
name: 'Haryana',
y: 10.2,
visible: false
}, {
name: 'Karnataka',
y: 11.1,
visible: false
}, {
name: 'Odisha',
y: 23.8,
visible: false
}, {
name: 'Punjab',
y: 11.1,
visible: false
}, {
name: 'Rajasthan',
y: 18.3,
visible: false
}, {
name: 'Telangana',
y: 11.2,
visible: false
}, {
name: 'Uttar Pradesh',
y: null,
visible: false
}],
},
I want to build up a Highchart step-by-step. I got it working, but I'm not happy with the way it gets animated. The animation origin is the y-axis in this case, but I want the bars to rise up from the x-axis.
They do rise up from the x-axis when I have data visible on load. However, I want to start with an empty chart.
http://jsfiddle.net/ueC9g/1/
This is how I initialize highcharts:
new Highcharts.Chart ({
chart: {
type: 'column',
renderTo: 'columnChart'
},
title: {
text: 'Great chart'
},
xAxis: {
categories: ['<5', '5-9', '10-14','15-19','20-24','25-29','30-39','40-49','50-59','60-69','>69'],
min: 0,
max: 10,
title: {
text: 'Age'
},
showEmpty: true
},
yAxis: {
title: {
text: 'Some numbers'
},
min: 0,
max: 20,
showEmpty: true,
alternateGridColor: '#eee'
},
series: [{
name: 'male',
data: [1, 1, 5, 8, 10, 15, 19, 14, 10, 8, 4]
}, {
name: 'female',
data: [2, 1, 3, 4, 5, 6, 8, 4, 4, 3, 2]
}],
plotOptions: {
column: {
events: {
}
}
},
credits: {
enabled: false
}
});
When showing/hiding series, highcharts animates the change to the axis instead of the series itself. I can't find anyway to change this behavior. As a workaround, instead of showing/hiding the series why not add it as new on the click:
var i = 0;
$('#addBar').click(function(){
try {
if (i == 0) {
columnChart.addSeries({name:'male',data:[1, 1, 5, 8, 10, 15, 19, 14, 10, 8, 4]});
}
else if (i == 1) {
columnChart.addSeries({name:'female',data:[2, 1, 3, 4, 5, 6, 8, 4, 4, 3, 2]});
}
i++;
} catch(e){
console.dir(e);
}
});
I'd set up an initial empty series in my config too, so that the axes draw on start:
series: [{visible: false, showInLegend: false}],
See updated fiddle here.
Please familair with this example: http://jsfiddle.net/VcJ4K/5/
$.each(chart.series[0].data, function(i, point) {
window.setInterval(function() {
point.update(point.y2);
}, 500);
});