CODEWITHSUNDEEP
javascripthighcharts
Arun
Arun

Reputation: 1472

Change the style of Highchart stacked colum chart

I plot a stacked column Highchart. The chart is working fine but there is some style issues. The Y-axis names are showing above the chart so the subtitle is not showing I need to show the Y-axis names below.How can I change this?Thanks in advance for help...

Here is my code

 <script type="text/javascript">

    $(function () {
        $('#chart_div').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Material Vs Subcategory'
            },
            subtitle: {
                text: 'Source: www.test.com'
            },
            xAxis: {
                categories: ['Air Filtration','Clothing','Sporting Goods','Home Furnishings','Paint','Storage','Toys and Games']
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Number of Products'
                },
                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',
                    dataLabels: {
                        enabled: false,
                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                    }
                }
            },

            series: [{
             name: 'Unclassifiable',
             data: [0, 1, 0, 0, 1, 0, 0]
         },{
                  name: 'Aluminium',
                  data: [0, 0, 0, 0, 0, 0, 0]
             },{
                  name: 'Calcium',
                  data: [0, 0, 0, 1, 0, 0, 0]
              },{
                  name: 'Copper',
                  data: [0, 0, 0, 0, 0, 0, 0]
              },{
                  name: 'Gold',
                  data: [0, 1, 0, 0, 1, 1, 0]
              },{
                  name: 'Iron',
                  data: [0, 0, 0, 0, 0, 0, 0]
              },{
                  name: 'Platinum',
                  data: [0, 0, 0, 0, 1, 0, 1]
              },{
                  name: 'Silver',
                  data: [0, 3, 3, 0, 0, 0, 0]
              },{
                  name: 'Steel',
                  data: [1, 0, 0, 1, 0, 0, 0]
              },{
                  name: 'Unknown',
                  data: [0, 1, 0, 0, 1, 0, 0]
              }]

        });
    });

</script>

Upvotes: 0

Views: 231

Answers (2)

sbozzie
sbozzie

Reputation: 727

Taking out the "Floating" and x/y positions makes it look a little cleaner too:

    legend: {
        verticalAlign: 'bottom',
        backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
        borderColor: '#CCC',
        borderWidth: 1,
        shadow: false
    },

http://jsfiddle.net/38Mkf/1/

Upvotes: 1

YOU
YOU

Reputation: 123791

Is that you want verticalAlign: bottom on legend part?

legend: {
    align: 'right',
    x: -70,
    verticalAlign: 'bottom',
    y: 20,
    floating: true,
    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
    borderColor: '#CCC',
    borderWidth: 1,
    shadow: false
},

http://jsfiddle.net/38Mkf/

Upvotes: 1

Related Questions