OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Highcharts –– 3D stacked column, multi series

  • Thread starter Thread starter JC-
  • Start date Start date
J

JC-

Guest
This question is about Highcharts 3D columns, described here: https://www.highcharts.com/demo/highcharts/3d-column-stacking-grouping

I want to show three series with 3D columns, series behind each other (z axis) so that the front columns are a stack of 2 series.

I can do stacked but columns are on x axis:


Code:
Highcharts.chart('container', {
    chart: {
        type: 'column',
        options3d: {
            enabled: true,
            alpha: 10,
            beta: 20,
            depth: 500,
            viewDistance: 5,
    }
        
    },

    xAxis: {
        categories: ['One', 'Two', 'Three', 'Four', 'Five']
    },

    plotOptions: {
        column: {
            stacking: 'normal'
        }

    },

    series: [{
        name: 'Community Tariff A',
    data: [21, 33, 27, 30, 30],
    stack: 'Billed'
  },{
        name: 'Community Tariff B',
    data: [64, 62, 51, 42, 35],
    stack: 'Billed' 
    },{
        name: 'Subsidized Tariff',
    data: [115, 125, 105, 99, 90],
    stack: 'Alternative1'
  }, {
      name: 'Regular Tariff',
    data: [145, 165, 135, 128, 116],
    stack: 'Alternative2'
  }
  ]
});

Code:
#container {
  height: 480px;
  width: 640px;
  margin: 0 auto;
}

Code:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>

<div id="container"></div>

https://jsfiddle.net/yfohmagd/

Or columns are on z axis but not stacked:


Code:
const chart = Highcharts.chart('container', {
  chart: {
    type: 'column',
    options3d: {
      enabled: true,
      alpha: 10,
      beta: 20,
      depth: 500,
      viewDistance: 5,
    }
  },

  xAxis: {
    categories: ['Jan', 'Feb', 'March', 'April', 'May'],
  },

  plotOptions: {
    series: {
        column: {
      stacking: 'normal'
      },
      groupZPadding: 10,
      depth: 100,
      groupPadding: 0,
      grouping: false,
      },
  },
  yAxis: {
        allowDecimals: false,
        min: 0,
        title: {
            text: 'EUR',
            skew3d: true,
            style: {
                fontSize: '16px'
            }
        }
  },
  series: [{
        name: 'Community Tariff A',
    data: [21, 33, 27, 30, 30],
    stack: 'Billed'
  },{
        name: 'Community Tariff B',
    data: [64, 62, 51, 42, 35],
    stack: 'Billed' 
    },{
        name: 'Subsidized Tariff',
    data: [115, 125, 105, 99, 90],
    stack: 'Alternative1'
  }, {
      name: 'Regular Tariff',
    data: [145, 165, 135, 128, 116],
    stack: 'Alternative2'
  }
  ]
});

Code:
#container {
  height: 480px;
  width: 640px;
  margin: 0 auto;
}

Code:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>

<div id="container"></div>

https://jsfiddle.net/wc0o27rt/1/

How do I combine them? Thank you!

<p>This question is about Highcharts 3D columns, described here:
<a href="https://www.highcharts.com/demo/highcharts/3d-column-stacking-grouping" rel="nofollow noreferrer">https://www.highcharts.com/demo/highcharts/3d-column-stacking-grouping</a></p>
<p>I want to show three series with 3D columns, series behind each other (z axis) so that the front columns are a stack of 2 series.</p>
<p>I can do stacked but columns are on x axis:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>Highcharts.chart('container', {
chart: {
type: 'column',
options3d: {
enabled: true,
alpha: 10,
beta: 20,
depth: 500,
viewDistance: 5,
}

},

xAxis: {
categories: ['One', 'Two', 'Three', 'Four', 'Five']
},

plotOptions: {
column: {
stacking: 'normal'
}

},

series: [{
name: 'Community Tariff A',
data: [21, 33, 27, 30, 30],
stack: 'Billed'
},{
name: 'Community Tariff B',
data: [64, 62, 51, 42, 35],
stack: 'Billed'
},{
name: 'Subsidized Tariff',
data: [115, 125, 105, 99, 90],
stack: 'Alternative1'
}, {
name: 'Regular Tariff',
data: [145, 165, 135, 128, 116],
stack: 'Alternative2'
}
]
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#container {
height: 480px;
width: 640px;
margin: 0 auto;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>

<div id="container"></div></code></pre>
</div>
</div>
</p>
<p><code>https://jsfiddle.net/yfohmagd/</code></p>
<p>Or columns are on z axis but not stacked:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const chart = Highcharts.chart('container', {
chart: {
type: 'column',
options3d: {
enabled: true,
alpha: 10,
beta: 20,
depth: 500,
viewDistance: 5,
}
},

xAxis: {
categories: ['Jan', 'Feb', 'March', 'April', 'May'],
},

plotOptions: {
series: {
column: {
stacking: 'normal'
},
groupZPadding: 10,
depth: 100,
groupPadding: 0,
grouping: false,
},
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'EUR',
skew3d: true,
style: {
fontSize: '16px'
}
}
},
series: [{
name: 'Community Tariff A',
data: [21, 33, 27, 30, 30],
stack: 'Billed'
},{
name: 'Community Tariff B',
data: [64, 62, 51, 42, 35],
stack: 'Billed'
},{
name: 'Subsidized Tariff',
data: [115, 125, 105, 99, 90],
stack: 'Alternative1'
}, {
name: 'Regular Tariff',
data: [145, 165, 135, 128, 116],
stack: 'Alternative2'
}
]
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#container {
height: 480px;
width: 640px;
margin: 0 auto;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>

<div id="container"></div></code></pre>
</div>
</div>
</p>
<p><code>https://jsfiddle.net/wc0o27rt/1/</code></p>
<p>How do I combine them? Thank you!</p>
 

Latest posts

Top