Highcharts Continuous Stacked Area chart

Source: Internet
Author: User

Description: Set two column chart spacing to 0

Highcharts Column chart, set the spacing of each column in the x-axis
Plotoption: {
Column: {
Set the width of each bar itself
Pointwidth:
The x-axis uses only one bar per point, and this property sets the spacing between the bars of the adjacent two points.
If the x-axis has 2 bars per point, this property sets the spacing between the right and left bars of the left-hand point.
0.5 means that if the x-axis is 100px long, the spacing is 100*0.5=50px
pointpadding:0.5
If the x-axis has two bars at a point, this property sets the spacing between the two bars.
grouppadding:0.5
}
}

The following settings:

pointpadding:0,
grouppadding:0,
borderwidth:0,

Code: $ (function () {    $(' #container '). Highcharts ({chart: {type:' Column '}, Title: {text:' Stacked Column chart '}, Xaxis: {categories: [' Apples ', ' oranges ', ' Pears ', ' grapes ', ' Bananas ']}, YAxis: {min:0, Title: {text:' Total fruit consumption '}, Stacklabels: {enabled:true, Style: {fontweight:' Bold ', Color: (Highcharts.theme&& Highcharts.theme.textColor) | | ' Gray '}}}, Legend: {align:' Right ', x:-70, VerticalAlign:' Top ', y:20, Floating:true, BackgroundColor: (Highcharts.theme&& Highcharts.theme.legendBackgroundColorSolid) | | ' White ', BorderColor:' #CCC ', BorderWidth:1, Shadow:false}, tooltip: {formatter:function() {                return' <b> ' + This. x + ' </b><br/> ' + This. Series.Name + ': ' + This. Y + ' <br/> ' + ' total: ' + This. Point.stacktotal; }}, Plotoptions: {column: {stacking:' Normal ', pointpadding:0, grouppadding:0, BorderWidth:0, DataLabels: {enabled:true, Color: (Highcharts.theme&& Highcharts.theme.dataLabelsColor) | | ' White '}}}, series: [{name:' John ', data: [5, 5, 5,NULL,NULL]}, {name:' Jane ', data: [NULL, 2, 2, 2,NULL]}, {name:' Joe ', data: [NULL,NULL, 4, 4, 4]        }]    });}); 

Highcharts Continuous Stacked Area chart

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.