Dual Axis Line and Column Chart with Dropdown

[manpreet2587]

Dear Friends,

We have been working on one client requirement where most of the graphs are Combination of line and column chart. We need drop down of minimum two level in each graph and sometimes it goes to three or four level. Now of value axis that is left side we displayed number value of column and on opposite right side we need to show percentage (%) of that value in the form of line. The issue is on the right side of value axis value remain same as of left axis instead of 1 to 100% in percentage if left side is A,B,C,D on right it shows again like A%,B%,C%,D% instead of 1to 100% and whenever we dig into bar graph the line doesn't appear on graph just column with percentage. We want to change it dynamically. We are implementing it in PHP in YII2.
Attached is screenshot for same.

[kamil.m]

Hi there,

Welcome to our forum and thank you for contacting us with your question.

I have prepared a simple demo for your use case. Please take a look at it, adjust to your requirements and let me know if that's what you were looking for.
Demo: https://jsfiddle.net/BlackLabel/sa4yuv79/

Best regards!

[manpreet2587]

Hi there,

Welcome to our forum and thank you for contacting us with your question.

I have prepared a simple demo for your use case. Please take a look at it, adjust to your requirements and let me know if that's what you were looking for.
Demo: https://jsfiddle.net/BlackLabel/sa4yuv79/

Best regards!

Thanks, for revert. I have two question on this.

1. How it will work in dynamic data specially for right axis? When I have to show percentage of bar.
2. How the both line and bar chat will work in drill down. On first load it show both bar and line chart. When i click on bar graph. It just shows percentage not line.

Regards,

[kamil.m]

Hello again,

1. It will work just fine, like any other numeric data. Just provide the correct percent values and everything will work like it does now.
2. I'm not sure if I fully understand you, but what you can see right now is the default behaviour of the drilldown module. Once you click on a chosen label it then drills down to a specific series. If you would like to drill down to multiple series, take a look at the demo and forum thread.

https://jsfiddle.net/gh/get/library/pur ... own-false/
https://api.highcharts.com/highcharts/d ... tDrilldown
viewtopic.php?t=34235

Regards!

[manpreet2587]

var options = {
series: [
{
name: "Overall City Count",
data: [<?=$arrayValue?>]
},
{
name: "Overall Citizen COunt ",
data: [<?=$arrayValue>]
}
],
chart: {
height: 400,
background: '#fff',
type: 'line',
dropShadow: {
enabled: true,
color: '#000',
top: 18,
left: 7,
blur: 10,
opacity: 0.2
},
toolbar: {
show: false
}
},
colors: ['#A393BF', '#549F93'],
dataLabels: {
enabled: true,
},
stroke: {
curve: 'smooth'
},
title: {
text: 'Month Wise Trend ',
align: 'center',
style: {
fontWeight: 'bold',
fontSize: '18px'
}
},
grid: {
borderColor: '#e7e7e7',
row: {
colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.5
},
},
markers: {
size: 1
},
xaxis: {
categories: <?=$arraycount?>,
// title: {
// text: 'Months'
// }
},
yaxis: {
title: {
text: '# of Patient',
style: {

fontSize: '12px',
fontWeight: 'bold'
},
},
min: 1,
max: 10
},
legend: {
position: 'bottom',
horizontalAlign: 'center',
floating: true,
offsetY: 10,
offsetX: -5
}
};

var chart = new ApexCharts(document.querySelector("#chart3"), options);
chart.render();
}

[manpreet2587]

Hello again,

1. It will work just fine, like any other numeric data. Just provide the correct percent values and everything will work like it does now.
2. I'm not sure if I fully understand you, but what you can see right now is the default behaviour of the drilldown module. Once you click on a chosen label it then drills down to a specific series. If you would like to drill down to multiple series, take a look at the demo and forum thread.

https://jsfiddle.net/gh/get/library/pur ... own-false/
https://api.highcharts.com/highcharts/d ... tDrilldown
viewtopic.php?t=34235

Regards!

Any update on this ?

[kamil.m]

I'm sorry but I don't understand. Your demo does not work, so I'd suggest recreating it in JSFiddle and making sure that it is working if you want to show us some issues/functionalities.

Is there anything more I can help you with?