Make equal distance for bars with different width Highchart

Question

I made a drilldown bar chart where the bars have different pointWidth.I want to have different widths for each bar because they have different percentage range. But after I drew it, I found they have regular interval but uneven distribution. The blank space between bars are not equally and I cannot see all the bars.

I also tried pointPadding, but I still feel the space between the bars is too wide.So I decided to use pointwidth in this code in order to customize bar width.

I wonder how to make the interval between them equally so I can see all the bars aligning perfectly. Or maybe using pointPadding but shorten the blank space between bars.

Here is the code.

 Highcharts.chart('container', { chart: { type: 'column' }, title: { text: 'Demo Demo Demo', margin:50 }, xAxis: { type: 'category', title: { enabled: true, text: "Percentage Range" } }, yAix: { title: { enabled: true, text: "Number of Schools" } }, legend: { enabled: false }, plotOptions: { series: { borderWidth: 0, grouping: false,//divide series into three individual series dataLabels: { enabled: true } } }, series: [{ name: 'Number of Schools', colorByPoint: true, // pointPadding: 0.1, pointWidth:27.24, tooltip: { headerFormat: '<span><strong>Percentage Arange: {point.key}</strong></span>', pointFormat: '<br><span style="color:{point.color}">\●</span> {series.name}: <b>{point.y}</b>' }, data: [{ name: '100-97%', y: 50, color: "#E96A50", drilldown: '100-97%', }] }, { name: 'Number of Schools', colorByPoint: true, // pointPadding: 0.1, pointWidth:18.16, tooltip: { headerFormat: '<span><strong>Percentage Arange: {point.key}</strong></span>', pointFormat: '<br><span style="color:{point.color}">\●</span> {series.name}: <b>{point.y}</b>' }, data: [{ name: '97-95%', y: 33, color: "#E96A50", drilldown: '97-95%' }] }, { name: 'Number of Schools', colorByPoint: true, // pointPadding: 0.4, pointWidth:18.16, tooltip: { headerFormat: '<span><strong>Percentage Arange: {point.key}</strong></span>', pointFormat: '<br><span style="color:{point.color}">\●</span> {series.name}: <b>{point.y}</b>' }, data: [{ name: '95-93%', y: 33, color: "#E96A50", drilldown: '95-93%' }] }, { name: 'Number of Schools', colorByPoint: true, // pointPadding: 0.4, pointWidth:27.24, tooltip: { headerFormat: '<span><strong>Percentage Arange: {point.key}</strong></span>', pointFormat: '<br><span style="color:{point.color}">\●</span> {series.name}: <b>{point.y}</b>' }, data: [{ name: '93-90%', y: 24, color: "#E96A50", drilldown: '93-90%' }] }, { name: 'Number of Schools', colorByPoint: true, // pointPadding: 0.3, pointWidth:90.8, tooltip: { headerFormat: '<span><strong>Percentage Arange: {point.key}</strong></span>', pointFormat: '<br><span style="color:{point.color}">\●</span> {series.name}: <b>{point.y}</b>' }, data: [{ name: '90-80%', y: 42, color: "#F2B04E", drilldown: '90-80%' }] }, { name: 'Number of Schools', colorByPoint: true, // pointPadding: 0.3, pointWidth:90.8, tooltip: { headerFormat: '<span><strong>Percentage Arange: {point.key}</strong></span>', pointFormat: '<br><span style="color:{point.color}">\●</span> {series.name}: <b>{point.y}</b>' }, data: [{ name: '80-70%', y: 12, color: "#F2B04E", drilldown: '80-70%' }] }, { name: 'Number of Schools', colorByPoint: true, // pointPadding: 0, pointWidth:272, tooltip: { headerFormat: '<span><strong>Percentage Arange: {point.key}</strong></span>', pointFormat: '<br><span style="color:{point.color}">\●</span> {series.name}: <b>{point.y}</b>' }, data: [{ name: '70-40%', y: 36, color: "#80AB7F", drilldown: '70-40%' }] }, { name: 'Number of Schools', colorByPoint: true, // pointPadding: 0, pointWidth:272, tooltip: { headerFormat: '<span><strong>Percentage Arange: {point.key}</strong></span>', pointFormat: '<br><span style="color:{point.color}">\●</span> {series.name}: <b>{point.y}</b>' }, data: [{ name: '40-10%', y: 37, color: "#284E62", drilldown: '40-10%' }] }], drilldown: { //drillUpButton Option drillUpButton: { relativeTo: 'spacingBox', position: { y: 10, x: 0 }, theme: { color: "#5ab7f5", fill: 'white', 'stroke-width': 2, stroke: '#5ab7f5', r: 5, states: { hover: { color: 'white', fill: '#5ab7f5' }, select: { fill: '#5ab7f5' } } } }, series: [{id:"100-97%", data: [ ["Global Education Academy Middle (Los Angeles Unified)",100], ["Public Policy Charter (Los Angeles Unified)",100], ["NEW Academy of Science and Arts (Los Angeles Unified)",99.9], ["Puente Charter (Los Angeles Unified)",99.7], ["Alliance College-Ready Middle Academy 4 (Los Angeles Unified)",99.4] ]}, {id:"97-95%", data:[ ["Aspire Juanita Tate Academy Charter (Los Angeles Unified)",96.9], ["Summit Preparatory Charter (Los Angeles Unified)",96.9], ["Animo College Preparatory Academy (Los Angeles Unified)",96.9], ["Alliance Ouchi-O'Donovan 6-12 Complex (Los Angeles Unified)",96.9], ["Animo Ellen Ochoa Charter Middle (Los Angeles Unified)",96.9] ]}, {id:"95-93%", data:[ ["Celerity Octavia Charter (Los Angeles Unified)",94.9], ["KIPP Vida Preparatory Academy (Los Angeles Unified)",94.8], ["Aspire Pacific Academy (Los Angeles Unified)",94.8], ["Vista Charter Middle (Los Angeles Unified)",94.8], ["Aspire Junior Collegiate Academy (Los Angeles Unified)",94.7] ]},{id:"93-90%", data: [ ["Aspire Firestone Academy Charter (Los Angeles Unified)",92.9], ["USC East College Prep (Los Angeles Unified)",92.8], ["Collegiate Charter High School of Los Angeles (Los Angeles Unified)",92.6], ["KIPP Sol Academy (Los Angeles Unified)",92.6], ["Alliance Leadership Middle Academy (Los Angeles Unified)",92.5] ]}, {id:"90-80%", data: [ ["KIPP Iluminar Academy (Los Angeles Unified)",89.8], ["Rise Kohyang Middle (Los Angeles Unified)",89.8], ["Los Angeles Leadership Primary Academy (Los Angeles Unified)",89.6], ["KIPP Empower Academy (Los Angeles Unified)",89.6], ["Lou Dantzler Preparatory Charter Middle (Los Angeles Unified)",89.6], ]}, {id:"80-70%", data:[ ["Fenton Academy for Social and Emotional Learning (Los Angeles Unified)",79.9], ["Magnolia Science Academy 7 (Los Angeles Unified)",79.6], ["New Millennium Secondary (Los Angeles Unified)",78.7], ["PUC Community Charter Middle and PUC Community Charter Early College High (Los Angeles Unified)",77.4], ["Animo Westside Charter Middle (Los Angeles Unified)",76.4], ]}, {id:"70-40%", data: [ ["Emelita Academy Charter (Los Angeles Unified)",68.7], ["View Park Preparatory Accelerated High (Los Angeles Unified)",67.5], ["Metro Charter (Los Angeles Unified)",66.8], ["Calvert Charter for Enriched Studies (Los Angeles Unified)",66.2], ["Grover Cleveland Charter High (Los Angeles Unified)",66.1], ]},{id:"40-10%", data: [ ["Robert A. Millikan Middle School, Performing Arts Magnet & Science Academy STEM (Los Angeles Unified)",39.3], ["Darby Avenue Charter (Los Angeles Unified)",38.6], ["Westside Innovative School House Charter Middle (Los Angeles Unified)",38.6], ["El Oro Way Charter For Enriched Studies (Los Angeles Unified)",36.3], ["Serrania Avenue Charter For Enriched Studies (Los Angeles Unified)",36.1], ]}] } }); 

 .highcharts-drillup-button text tspan{ fill: #5ab7f5; } .highcharts-drillup-button:hover text tspan{ fill: white; } 

 <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> 

Answer 1

There is dedicated region in the chart where the columns are rendered.If that column width is increased then it will overlap each other.So safe side use pointPadding to give desired width with in region. So again coming to shorten the blank space between bars this is also not possible as mentioned above.

 Highcharts.chart('container', { chart: { type: 'column' }, title: { text: 'Demo Demo Demo', margin: 50 }, xAxis: { type: 'category', title: { enabled: true, text: "Percentage Range" } }, yAix: { title: { enabled: true, text: "Number of Schools" } }, legend: { enabled: false }, plotOptions: { series: { borderWidth: 0, grouping: false, //divide series into three individual series , groupPadding: 0, dataLabels: { enabled: true } } }, series: [{ name: 'Number of Schools', colorByPoint: true, // pointPadding: 0.1, pointWidth: 27.24, tooltip: { headerFormat: '<span><strong>Percentage Arange: {point.key}</strong></span>', pointFormat: '<br><span style="color:{point.color}">\●</span> {series.name}: <b>{point.y}</b>' }, data: [{ name: '100-97%', y: 50, color: "#E96A50", drilldown: '100-97%', }] }, { name: 'Number of Schools', colorByPoint: true, pointPadding: 0.1, //pointWidth:18.16, tooltip: { headerFormat: '<span><strong>Percentage Arange: {point.key}</strong></span>', pointFormat: '<br><span style="color:{point.color}">\●</span> {series.name}: <b>{point.y}</b>' }, data: [{ name: '97-95%', y: 33, color: "#E96A50", drilldown: '97-95%' }] }, { name: 'Number of Schools', colorByPoint: true, pointPadding: 0.4, //pointWidth:18.16, tooltip: { headerFormat: '<span><strong>Percentage Arange: {point.key}</strong></span>', pointFormat: '<br><span style="color:{point.color}">\●</span> {series.name}: <b>{point.y}</b>' }, data: [{ name: '95-93%', y: 33, color: "#E96A50", drilldown: '95-93%' }] }, { name: 'Number of Schools', colorByPoint: true, pointPadding: 0.4, //pointWidth:27.24, tooltip: { headerFormat: '<span><strong>Percentage Arange: {point.key}</strong></span>', pointFormat: '<br><span style="color:{point.color}">\●</span> {series.name}: <b>{point.y}</b>' }, data: [{ name: '93-90%', y: 24, color: "#E96A50", drilldown: '93-90%' }] }, { name: 'Number of Schools', colorByPoint: true, pointPadding: 0.3, //pointWidth:90.8, tooltip: { headerFormat: '<span><strong>Percentage Arange: {point.key}</strong></span>', pointFormat: '<br><span style="color:{point.color}">\●</span> {series.name}: <b>{point.y}</b>' }, data: [{ name: '90-80%', y: 42, color: "#F2B04E", drilldown: '90-80%' }] }, { name: 'Number of Schools', colorByPoint: true, pointPadding: 0.3, //pointWidth:90.8, tooltip: { headerFormat: '<span><strong>Percentage Arange: {point.key}</strong></span>', pointFormat: '<br><span style="color:{point.color}">\●</span> {series.name}: <b>{point.y}</b>' }, data: [{ name: '80-70%', y: 12, color: "#F2B04E", drilldown: '80-70%' }] }, { name: 'Number of Schools', colorByPoint: true, pointPadding: 0, //pointWidth:272, tooltip: { headerFormat: '<span><strong>Percentage Arange: {point.key}</strong></span>', pointFormat: '<br><span style="color:{point.color}">\●</span> {series.name}: <b>{point.y}</b>' }, data: [{ name: '70-40%', y: 36, color: "#80AB7F", drilldown: '70-40%' }] }, { name: 'Number of Schools', colorByPoint: true, pointPadding: 0, //pointWidth:272, tooltip: { headerFormat: '<span><strong>Percentage Arange: {point.key}</strong></span>', pointFormat: '<br><span style="color:{point.color}">\●</span> {series.name}: <b>{point.y}</b>' }, data: [{ name: '40-10%', y: 37, color: "#284E62", drilldown: '40-10%' }] }], drilldown: { //drillUpButton Option drillUpButton: { relativeTo: 'spacingBox', position: { y: 10, x: 0 }, theme: { color: "#5ab7f5", fill: 'white', 'stroke-width': 2, stroke: '#5ab7f5', r: 5, states: { hover: { color: 'white', fill: '#5ab7f5' }, select: { fill: '#5ab7f5' } } } }, series: [{ id: "100-97%", data: [ ["Global Education Academy Middle (Los Angeles Unified)", 100], ["Public Policy Charter (Los Angeles Unified)", 100], ["NEW Academy of Science and Arts (Los Angeles Unified)", 99.9], ["Puente Charter (Los Angeles Unified)", 99.7], ["Alliance College-Ready Middle Academy 4 (Los Angeles Unified)", 99.4] ] }, { id: "97-95%", data: [ ["Aspire Juanita Tate Academy Charter (Los Angeles Unified)", 96.9], ["Summit Preparatory Charter (Los Angeles Unified)", 96.9], ["Animo College Preparatory Academy (Los Angeles Unified)", 96.9], ["Alliance Ouchi-O'Donovan 6-12 Complex (Los Angeles Unified)", 96.9], ["Animo Ellen Ochoa Charter Middle (Los Angeles Unified)", 96.9] ] }, { id: "95-93%", data: [ ["Celerity Octavia Charter (Los Angeles Unified)", 94.9], ["KIPP Vida Preparatory Academy (Los Angeles Unified)", 94.8], ["Aspire Pacific Academy (Los Angeles Unified)", 94.8], ["Vista Charter Middle (Los Angeles Unified)", 94.8], ["Aspire Junior Collegiate Academy (Los Angeles Unified)", 94.7] ] }, { id: "93-90%", data: [ ["Aspire Firestone Academy Charter (Los Angeles Unified)", 92.9], ["USC East College Prep (Los Angeles Unified)", 92.8], ["Collegiate Charter High School of Los Angeles (Los Angeles Unified)", 92.6], ["KIPP Sol Academy (Los Angeles Unified)", 92.6], ["Alliance Leadership Middle Academy (Los Angeles Unified)", 92.5] ] }, { id: "90-80%", data: [ ["KIPP Iluminar Academy (Los Angeles Unified)", 89.8], ["Rise Kohyang Middle (Los Angeles Unified)", 89.8], ["Los Angeles Leadership Primary Academy (Los Angeles Unified)", 89.6], ["KIPP Empower Academy (Los Angeles Unified)", 89.6], ["Lou Dantzler Preparatory Charter Middle (Los Angeles Unified)", 89.6], ] }, { id: "80-70%", data: [ ["Fenton Academy for Social and Emotional Learning (Los Angeles Unified)", 79.9], ["Magnolia Science Academy 7 (Los Angeles Unified)", 79.6], ["New Millennium Secondary (Los Angeles Unified)", 78.7], ["PUC Community Charter Middle and PUC Community Charter Early College High (Los Angeles Unified)", 77.4], ["Animo Westside Charter Middle (Los Angeles Unified)", 76.4], ] }, { id: "70-40%", data: [ ["Emelita Academy Charter (Los Angeles Unified)", 68.7], ["View Park Preparatory Accelerated High (Los Angeles Unified)", 67.5], ["Metro Charter (Los Angeles Unified)", 66.8], ["Calvert Charter for Enriched Studies (Los Angeles Unified)", 66.2], ["Grover Cleveland Charter High (Los Angeles Unified)", 66.1], ] }, { id: "40-10%", data: [ ["Robert A. Millikan Middle School, Performing Arts Magnet & Science Academy STEM (Los Angeles Unified)", 39.3], ["Darby Avenue Charter (Los Angeles Unified)", 38.6], ["Westside Innovative School House Charter Middle (Los Angeles Unified)", 38.6], ["El Oro Way Charter For Enriched Studies (Los Angeles Unified)", 36.3], ["Serrania Avenue Charter For Enriched Studies (Los Angeles Unified)", 36.1], ] } ] } }); 

 .highcharts-drillup-button text tspan { fill: #5ab7f5; } .highcharts-drillup-button:hover text tspan { fill: white; } 

 <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>