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.

ApexCharts: Line graph overflowing out of Y axes

Hope you guys are doing okay.
I am working on a line graph from Apex Charts and every thing seems to be working fine except one issue.
The lines cross-over/overflows on the y axes whereas they are supposed to stay between the y axes. I have tried adding offsetX to almost everything but it just doesn't seem to work.
What is it that I am doing wrong here? How can I fix it?
Here's CODEPEN.
Here's an image of the issue:
Here's the snippet:
const lineChartEl = document.querySelector('#line-chart');
const lineChartOptions = {
chart: {
height: '380',
width: "100%",
type: "line",
dropShadow: {
enabled: true,
enabledOnSeries: undefined,
top: 0,
left: 0,
blur: 3,
color: '#000',
opacity: 0.35
},
foreColor: 'red', // numbers color
toolbar: {
show: true,
offsetX: -30,
offsetY: 0,
tools: {
download: true,
selection: true,
zoom: false,
zoomin: false,
zoomout: false,
pan: false,
reset: true | '<img src="/static/icons/reset.png" width="20">',
customIcons: []
},
export: {
csv: {
filename: 'data',
columnDelimiter: ',',
headerCategory: 'category',
headerValue: 'value',
dateFormatter(timestamp) {
return new Date(timestamp).toDateString()
}
},
svg: {
filename: 'data',
},
png: {
filename: 'data',
}
}
},
autoSelected: 'zoom'
},
legend: {
position: 'top'
},
grid: {
show: true,
padding: {
left: 0,
right: 0
},
borderColor: "rgba(0,0,0,0.1)"
},
colors: ['red', 'blue', 'yellow'],
stroke: {
width: 2,
},
tooltip: {
theme: "dark"
},
series: [{
name: "Cost",
data: [0, 1042, 2120, 3340, 4013, 5012, 6750, 7520, 8055, 9210]
},
{
name: "Revenue",
data: [1131, 2311, 3143, 4565, 6012, 7750, 8520, 9055, 10210, 7530]
},
{
name: "Profit %",
data: [2, 5, 3, 4, 6, 3.4, 2.2, 5.2, 1.3, 3.8]
}
],
yaxis: [{
title: {
text: "Cost / Revenue"
},
seriesName: "Cost",
tickAmount: 5,
axisBorder: {
show: true,
color: 'red'
},
axisTicks: {
show: true,
color: 'blue'
},
crosshairs: {
show: true,
position: 'back',
stroke: {
color: '#b6b6b6',
width: 1,
dashArray: 0,
},
},
tooltip: {
enabled: true,
offsetX: 0,
},
},
{
title: {
text: "Kilograms"
},
seriesName: "Weight 1",
show: false
},
{
title: {
text: "Profit %"
},
opposite: true,
tickAmount: 5,
seriesName: "Profit %",
axisBorder: {
show: true,
color: 'red'
},
axisTicks: {
show: true,
color: 'blue'
},
crosshairs: {
show: true,
position: 'back',
stroke: {
color: '#b6b6b6',
width: 1,
dashArray: 0,
},
},
tooltip: {
enabled: true,
offsetX: 0,
},
},
],
xaxis: {
tickPlacement: 'on',
axisBorder: {
color: 'red',
},
axisTicks: {
color: 'blue',
},
tooltip: {
enabled: false,
}
},
};
const lineChart = new ApexCharts(lineChartEl, lineChartOptions);
lineChart.render();
<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.27.3/apexcharts.min.js"></script>
<div id="line-chart"></div>

You can fix it by removing padding inside grid options:
const lineChartEl = document.querySelector('#line-chart');
const lineChartOptions = {
chart: {
height: '380',
width: "100%",
type: "line",
dropShadow: {
enabled: true,
enabledOnSeries: undefined,
top: 0,
left: 0,
blur: 3,
color: '#000',
opacity: 0.35
},
foreColor: 'red', // numbers color
toolbar: {
show: true,
offsetX: -30,
offsetY: 0,
tools: {
download: true,
selection: true,
zoom: false,
zoomin: false,
zoomout: false,
pan: false,
reset: true | '<img src="/static/icons/reset.png" width="20">',
customIcons: []
},
export: {
csv: {
filename: 'data',
columnDelimiter: ',',
headerCategory: 'category',
headerValue: 'value',
dateFormatter(timestamp) {
return new Date(timestamp).toDateString()
}
},
svg: {
filename: 'data',
},
png: {
filename: 'data',
}
}
},
autoSelected: 'zoom'
},
legend: {
position: 'top'
},
grid: {
show: true,
borderColor: "rgba(0,0,0,0.1)"
},
colors: ['red', 'blue', 'yellow'],
stroke: {
width: 2,
},
tooltip: {
theme: "dark"
},
series: [{
name: "Cost",
data: [0, 1042, 2120, 3340, 4013, 5012, 6750, 7520, 8055, 9210]
},
{
name: "Revenue",
data: [1131, 2311, 3143, 4565, 6012, 7750, 8520, 9055, 10210, 7530]
},
{
name: "Profit %",
data: [2, 5, 3, 4, 6, 3.4, 2.2, 5.2, 1.3, 3.8]
}
],
yaxis: [{
title: {
text: "Cost / Revenue"
},
seriesName: "Cost",
tickAmount: 5,
axisBorder: {
show: true,
color: 'red'
},
axisTicks: {
show: true,
color: 'blue'
},
crosshairs: {
show: true,
position: 'back',
stroke: {
color: '#b6b6b6',
width: 1,
dashArray: 0,
},
},
tooltip: {
enabled: true,
offsetX: 0,
},
},
{
title: {
text: "Kilograms"
},
seriesName: "Weight 1",
show: false
},
{
title: {
text: "Profit %"
},
opposite: true,
tickAmount: 5,
seriesName: "Profit %",
axisBorder: {
show: true,
color: 'red'
},
axisTicks: {
show: true,
color: 'blue'
},
crosshairs: {
show: true,
position: 'back',
stroke: {
color: '#b6b6b6',
width: 1,
dashArray: 0,
},
},
tooltip: {
enabled: true,
offsetX: 0,
},
},
],
xaxis: {
tickPlacement: 'on',
axisBorder: {
color: 'red',
},
axisTicks: {
color: 'blue',
},
tooltip: {
enabled: false,
}
},
};
const lineChart = new ApexCharts(lineChartEl, lineChartOptions);
lineChart.render();
<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.27.3/apexcharts.min.js"></script>
<div id="line-chart"></div>

React Apex Line Chart Multiple Series

I am currently using Apex Line Chart to generate 6 series. The issue I am running into is that there are 3 pairs that share a y-axis title and ticks with its partner. If I display 2 series and they are partners their title and ticks display twice on the y axis. The only viable solution that I can think to implement is to have only one of each partner have a display on always, but ideally i want to hide the y axis when the partners aren't selected and display when they are selected. If anyone can help with the latter solution I would be very grateful
const options = {
chart: {
id: 'lineChart',
background: theme.palette.background.paper,
},
colors: [blue, yellow, green, red, pink, neonGreen],
height: '500px',
markers: {
size: 5,
},
series: [
{
name: 'Whopper fat',
data: whopperFatSeriesData,
},
{
name: 'Whopper Calories',
data: whopperCaloriesSeriesData,
},
{
name: 'Whopper Cost',
data: whopperCostSeriesData,
},
{
name: 'McDouble fat',
data: mcDoubleFatSeriesData,
},
{
name: 'McDouble Calories',
data: mcDoubleCaloriesSeriesData,
},
{
name: 'McDouble Cost',
data: mcDoubleCostSeriesData,
},
],
stroke: {
width: 2,
},
theme: {
mode: theme.palette.type,
},
tooltip: {
shared: true,
custom: function ({ dataPointIndex }: { dataPointIndex: number }) {
return renderToStaticMarkup(
<CustomTooltip data={whopperFatSeriesData} dataPointIndex={dataPointIndex}></CustomTooltip>,
)
},
},
title: {
text: 'Cloud Usage',
offsetY: -8,
style: {
fontSize: '24px',
},
},
xaxis: {
type: 'datetime',
title: {
text: '',
offsetY: 8,
style: {
fontSize: '15px',
},
},
labels: {
formatter: function (value: any, timestamp: any, index: any) {
return moment.utc(timestamp).format('DD-MMM-YY')
},
},
},
yaxis: [
{
max: getMaxCalories,
seriesName: 'Whopper Fat',
title: {
text: 'Whopper Fat (g)',
offsetX: -8,
style: {
fontSize: '15px',
},
},
decimalsInFloat: 3,
},
{
title: {
text: 'Whopper Calories (kc)',
opposite: -8,
style: {
fontSize: '15px',
color: yellow,
},
},
decimalsInFloat: 2,
opposite: true,
axisBorder: {
show: true,
color: yellow,
},
axisTicks: {
show: true,
},
showAlways: false,
},
{
title: {
text: 'Cost ($)',
offsetX: -8,
style: {
fontSize: '15px',
color: green,
},
},
decimalsInFloat: 2,
opposite: true,
axisBorder: {
show: true,
color: green,
},
axisTicks: {
show: true,
},
showAlways: false,
},
{
max: getMaxCalories,
title: {
text: 'McDouble fat (g)',
offsetX: -8,
style: {
fontSize: '15px',
},
show: false,
},
decimalsInFloat: 3,
show: false,
},
{
title: {
text: 'McDouble Calories (kc)',
opposite: -8,
style: {
fontSize: '15px',
color: yellow,
},
},
decimalsInFloat: 2,
opposite: true,
axisBorder: {
show: true,
color: yellow,
},
axisTicks: {
show: true,
},
showAlways: false,
},
{
title: {
text: 'Cost ($)',
offsetX: -8,
style: {
fontSize: '15px',
color: green,
},
},
decimalsInFloat: 2,
opposite: true,
axisBorder: {
show: true,
color: green,
},
axisTicks: {
show: true,
},
showAlways: false,
},
],
}
Image of Chart

boxplot catergories don't line up Highcharts

I am having a problem, with the categories of two box plots. From the following fiddle: http://jsfiddle.net/Taylby/wxpqsr9b/4/
$(function () {
$('#container').highcharts({
chart: {
type: 'boxplot',
inverted: true
},
title: {
text: 'Medication Prescription between start date and stop date'
},
legend: {
enabled: true
},
xAxis: {
categories: ["Males","Females"],
title: {
text: 'Cohort'
},
max:1
},
yAxis: {
title: {
text: 'Interval between events'
},
plotLines: [{
value: 2413.8,
color: 'gray',
width: 1,
height: 100,
label: {
text: "Males Average",
align: 'center',
style: {
color: 'gray'
}
}},
{
value: 16149.474524390858,
color: 'gray',
width: 1,
height: 100,
label: {
text: 'males +3SDs',
align: 'center',
style: {
color: 'gray'
}
}},
{
value: -11321.87452439086,
color: 'gray',
width: 1,
height: 100,
label: {
text: 'females -3SDs',
align: 'center',
style: {
color: 'gray'
}
}},
{
value: 1706.6,
color: 'gray',
width: 1,
height: 100,
label: {
text: 'C2 +3SDs',
align: 'center',
style: {
color: 'gray'
}
}}
],
},
series: [{
name: "Males",
data: [
[0,21,69,413,11566]
]
}, {
name: "Females",
data:[
[5,22,70,581,7860]
]
}]
});
});
you can see that there are two groups, Males and Females - however the box plot doesn't line up with the label.
Much appreciated for any thoughts.

You should add x index (first param in your data point).
series: [{
name: "Males",
data: [
[0, 0, 21, 69, 413, 11566]
]
}, {
name: "Females",
data: [
[1, 5, 22, 70, 581, 7860]
]
}]
Example: http://jsfiddle.net/wxpqsr9b/5/

How to set the legend series dynamically in kendo ui

How can we set the series with same field name having different values. So that the legends can be displayed with different values.
I had tried in this way code:
$(document).ready(function(){
var db = new kendo.data.DataSource({
data: data,
group: {
field: "studentmarks"
}
});
db.read();
$("#Chart").kendoChart({
theme: $(document).data("kendoSkin") || "silver",
dataSource: db,
aggregate: [{ field: "studentmarks", aggregate: "sum"}],
group: { field: "studentsmarks" },
title: {
text: "Studentdetails"
},
dateField: "time",
legend: {
position: "bottom"
},
chartArea: {
background: ""
},
seriesDefaults: {
type: "line",field:"ID"
},
series: [{
name: "marks",
data: data,
filter: "studentmarks",
color: "#FC0505",
width: 2,
visibleInLegend: "studentmarks",
markers: {
visible: false
},
tooltip: {
visible: true,
format: "{0}%"
}
}, {
name: "ID",
filter: "studentmarks",
data: data,
axis: "",
color: "#2605FC",
width: 2,
markers: {
visible: true
},
tooltip: {
visible: true,
format: "{0}"
}
}, {
name: "phone",
filter: "studentmarks",
data: data,
axis: "",
color: "#ED9AA5",
width: 2,
markers: {
visible: true
},
tooltip: {
visible: true,
format: "{0}%"
}
},
{
name: "cbs",
filter:"studentmarks",
data: data,
axis: "",
color: "#9AA5ED",
visible: true,
opacity: .4,
width: 2,
markers: {
visible: true
},
tooltip: {
visible: true,
format: "{0}%"
}
}],
valueAxis: [{
title: { text: "" },
name: "ID",
majorUnit: 0.5,
max: 5.0,
min: 0
}, {
name: "ink",
title: { text: "" },
min: 0,
max: 6727.14,
majorUnit: 1000,
minorUnit: 500
}],
navigator: {
series: {
type: "area",
color: "red",
field: "studentmarks",
//stack: "true",
//value:"",
data: data,
aggregate: "min",
name: "sai",
select: {
from: "2009-01-01 17:08:04",
to: "2013-12-24 20:30:26"
},
//labels: { color: "green", visible: false },
tooltip: { background: "green", format: "{0}", color: "white", visible: true }
}
}
});
});

Perhaps this will help?
var checkCookie = function(){
var chartData1 = [{
name: "Hans",
color: "black",
data: [1,2,3,4,5]
}]
var chartData2 = [{
name: "Hans",
color: "black",
data: [1,2,3,4,5]
}, {
name: "Franz",
color: "red",
data: [6,7,8,9,10]
}]
if (cookieThere) {
return chartData1
} else {
return chartData2
}
}
$("#chart").kendoChart({
theme: $(document).data("kendoSkin") || "default",
chartArea: {
background: "",
height: 150
},
legend: {position: "bottom"},
seriesDefaults: {
type: "column",
stack: true,
overlay: {gradient: "none"},
},
series: checkCookie(),
...
});

var mydata=checkCookie();
$("#chart").kendoChart({
theme: $(document).data("kendoSkin") || "default",
chartArea: {
background: "",
height: 150
},dataSource:{
data:mydata,
serverSorting: false,
group: {
field:"name",
},sort: [{field: "name", dir: "asc"},
schema:{
model:{
fields:{
"name":{"type":"string"},
"data":{"type":"number"}
}
}
}
},
legend: {position: "bottom"},
series: [{type:"column", field:"data", stack:true,colorField: "color"}],