CODEWITHSUNDEEP
javascriptamcharts
user20152015
user20152015

Reputation: 344

Amcharts - Column Chart to rotate to horizontal bar chart below 600px - styling issues

I am trying to make Amcharts chart which will be a column chart and for mobile and tablet screen width (less than 600px) will rotate and become a horizontal bar chart

I am facing some problems as follows -

  1. The bar is not readable since the category labels and value bars overlap. I would like them to be separate with category labels to be above the value bars to make them more readable. How can I do that ?

  2. Spacing between bars is very less How can I increase spacing between the bars to make them more readable ?

I do not want to use Jquery and I am new to javascript. Would appreciate if you can show in a jsfiddle or a snippet.

This is my codepen - https://codepen.io/anon/pen/pWMorr and this is my snippet - 

var chart = AmCharts.makeChart( "chartdiv", {
    "type": "serial",
	"theme": "light",
  "addClassNames": true,
  "marginRight": 70,
  "panEventsEnabled": false,
  "titles": [{
    "text": "Click on Country to see Visitor details"
  }],
     "dataProvider": [
      {
    "country": "USA",
    "visits": 3025,
    "color": "#FF0F00",
    "url": "https://codepen.io/"
  }, {
    "country": "China",
    "visits": 1882,
    "color": "#FF6600",
    "url": "https://codepen.io/"
  }, {
    "country": "Japan",
    "visits": 1809,
    "color": "#FF9E01",
    "url": "https://codepen.io/"
  }, {
    "country": "Germany",
    "visits": 1322,
    "color": "#FCD202",
    "url": "https://codepen.io/"
  }, {
    "country": "UK",
    "visits": 1122,
    "color": "#F8FF01",
    "url": "https://codepen.io/"
  }, {
    "country": "France",
    "visits": 1114,
    "color": "#B0DE09",
    "url": "https://codepen.io/"
  }, {
    "country": "India",
    "visits": 984,
    "color": "#04D215",
    "url": "https://codepen.io/"
  }, {
    "country": "Spain",
    "visits": 711,
    "color": "#0D8ECF",
    "url": "https://codepen.io/"
  }, {
    "country": "Netherlands",
    "visits": 665,
    "color": "#0D52D1",
    "url": "https://codepen.io/"
  }, {
    "country": "Russia",
    "visits": 580,
    "color": "#2A0CD0",
    "url": "https://codepen.io/"
  }, {
    "country": "South Korea",
    "visits": 443,
    "color": "#8A0CCF",
    "url": "https://codepen.io/"
  }, {
    "country": "Canada",
    "visits": 441,
    "color": "#CD0D74",
    "url": "https://codepen.io/"
  }
  ],
    "responsive": {
    "enabled": true,
	"rules": [
	{
      "maxWidth": 600,
      "overrides": {
        "rotate": true,
		"creditsPosition": "bottom-right",
		 "columnSpacing": 20,
		"minMarginLeft": 38,
		   "depth3D": 0,
		"angle": 0,
		"legend": {
			"enabled": true,
			"useGraphSettings": true,
			"labelText": "Country",
			"fontSize": 14
		},
		"categoryAxis": {
			"inside": true,
			"fontSize": 13,
			"gridPosition": "start",
			"startOnAxis": true,
			"gridAlpha": 0,
			"minVerticalGap": 5
		}
      }
    }
	]
  },
  "valueAxes": [{
    "axisAlpha": 0,
    "position": "left",
    "title": "No. of Visitors"
  }],
  "startDuration": 1,
  "graphs": [{
    "balloonText": "[[category]]: <b>[[value]]</b>",
	"fillColorsField": "color",
    "fillAlphas": 0.9,
    "lineAlpha": 0.2,
    "type": "column",
	"urlField": "url",
	"urlTarget": "_blank",
    "valueField": "visits"
  }],
  "depth3D": 10,
	"angle": 45,
  "chartCursor": {
    "categoryBalloonEnabled": false,
    "cursorAlpha": 0,
    "zoomable": false
  },
  "categoryField": "country",
  "categoryAxis": {
    "gridPosition": "start",
	"classNameField": "Ctglabel",
	"labelRotation": 45,
	"minHorizontalGap": 50,
	"title": "Country",
	"urlTarget": "_blank",
    "listeners": [{
      "event": "clickItem",
      "method": function(event) {
		window.open(event.serialDataItem.dataContext.url, '_blank');
      }
    }]
  },
  "export": {
    "enabled": true
  }
  } );
#chartdiv {
  width: 100%;
  height: 500px;
}
g.amcharts-category-axis tspan {
    cursor: pointer;
}
g.amcharts-category-axis text.amcharts-axis-label tspan:hover {
	text-decoration: underline;
	fill: red;
}
text.amcharts-axis-title {
    font-size: 13px;
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="//www.amcharts.com/lib/3/plugins/responsive/responsive.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<div id="chartdiv"></div>

Upvotes: 0

Views: 2321

Answers (1)

xorspark
xorspark

Reputation: 16012

The method is largely identical to the previous answer I gave. The only difference is that you need to tweak the chart settings to make the hidden label-only column with your label visible when the responsive rule kicks in but make it hidden by default for larger screen sizes.

  "responsive": {
    "enabled": true,
    "addDefaultRules": false, //add this so that the value labels still appear on even smaller screens
    "rules": [{
      "maxWidth": 600,
      "overrides": {
        "rotate": true,
        "creditsPosition": "bottom-right",
        "columnSpacing": 5,
        "minMarginLeft": 38,
        "depth3D": 0,
        "angle": 0,
        "graphs": [{
           "hidden": false //reveal the label-only column chart
        }, {
           "columnWidth": 1 //make this slightly larger to help with spacing
        }],
        "legend": {
          "enabled": true,
          "useGraphSettings": true,
          "labelText": "Country",
          "fontSize": 14
        },
        "categoryAxis": {
          "labelsEnabled": false, //remove the axis label and tick 
          "tickLength": 0
        }
      }
    }]
  },
  "graphs": [{ //invisible label only graph
    "labelText": "[[category]]",
    "labelPosition": "inside",
    "showBalloon": false,    
    "fillAlphas": 0,
    "lineAlpha": 0,
    "hidden": true, //hide by default for larger screen sizes
    "columnWidth": .6,
    "visibleInLegend": false,
   "showAllValueLabels": true, 
    "type": "column",
    "valueField": "visits"
  },
  // ...

Edit

To preserve the link label clicking that gets removed when the category axis labels are taken out, you need to add the urlField and urlTarget to the invisible graph. Due to how the underlying SVG is structured, you can't have the same hover effect on the label text, but you can set them red and underlined by default through CSS. You'll also need to make the hidden graph use a large enough value so that space occupied by the label is clickable. A good choice is to use the maximum value in your dataset. You can also set includeInMinMax to false so that the hidden value doesn't affect the axis scaling.

Edit #2 - added addDefaultRules: false to the responsive plugin. The default rules hides the value labels on smaller screens. You can either remove the default rules or redefine and override the rules that unset showAllValueLabels

Demo below - click on the resize chart button to trigger the rule

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "addClassNames": true,
  "marginRight": 70,
  "panEventsEnabled": false,
  "titles": [{
    "text": "Click on Country to see Visitor details"
  }],
  "dataProvider": [{
    "country": "USA",
    "visits": 3025,
    "hiddenvalue": 3025, // to ensure that the smaller bars' labels are fully clickable
    "color": "#FF0F00",
    "url": "https://codepen.io/"
  }, {
    "country": "China",
    "visits": 1882,
    "hiddenvalue": 3025,
    "color": "#FF6600",
    "url": "https://codepen.io/"
  }, {
    "country": "Japan",
    "visits": 1809,
    "hiddenvalue": 3025,
    "color": "#FF9E01",
    "url": "https://codepen.io/"
  }, {
    "country": "Germany",
    "visits": 1322,
    "hiddenvalue": 3025,
    "color": "#FCD202",
    "url": "https://codepen.io/"
  }, {
    "country": "UK",
    "visits": 1122,
    "hiddenvalue": 3025,
    "color": "#F8FF01",
    "url": "https://codepen.io/"
  }, {
    "country": "France",
    "visits": 1114,
    "hiddenvalue": 3025,
    "color": "#B0DE09",
    "url": "https://codepen.io/"
  }, {
    "country": "India",
    "visits": 984,
    "hiddenvalue": 3025,
    "color": "#04D215",
    "url": "https://codepen.io/"
  }, {
    "country": "Spain",
    "visits": 711,
    "hiddenvalue": 3025,
    "color": "#0D8ECF",
    "url": "https://codepen.io/"
  }, {
    "country": "Netherlands",
    "visits": 665,
    "hiddenvalue": 3025,
    "color": "#0D52D1",
    "url": "https://codepen.io/"
  }, {
    "country": "Russia",
    "visits": 580,
    "hiddenvalue": 3025,
    "color": "#2A0CD0",
    "url": "https://codepen.io/"
  }, {
    "country": "South Korea",
    "visits": 443,
    "hiddenvalue": 3025,
    "color": "#8A0CCF",
    "url": "https://codepen.io/"
  }, {
    "country": "Canada",
    "visits": 441,
    "hiddenvalue": 3025,
    "color": "#CD0D74",
    "url": "https://codepen.io/"
  }],
  "responsive": {
    "enabled": true,
    "rules": [{
      "maxWidth": 600,
      "overrides": {
        "rotate": true,
        "creditsPosition": "bottom-right",
        "columnSpacing": 5,
        "minMarginLeft": 38,
        "depth3D": 0,
        "angle": 0,
        "graphs": [{
          "hidden": false
        }, {
          "columnWidth": 1
        }],
        "legend": {
          "enabled": true,
          "useGraphSettings": true,
          "labelText": "Country",
          "fontSize": 14
        },
        "categoryAxis": {
          "labelsEnabled": false,
          "tickLength": 0
        }
      }
    }]
  },
  "valueAxes": [{
    "axisAlpha": 0,
    "position": "left",
    "title": "No. of Visitors"
  }],
  "startDuration": 1,
  "graphs": [{
    "labelText": "[[category]]",
    "labelPosition": "inside",
    "id": "label-only",
    "showBalloon": false,
    "fillAlphas": 0,
    "lineAlpha": 0,
    "hidden": true, //hide by default for larger screen sizes
    "columnWidth": .6,
    "visibleInLegend": false,
    "showAllValueLabels": true,
    "type": "column",
    "urlField": "url",
    "urlTarget": "_blank",
    "valueField": "hiddenvalue", //use hidden value to make labels clickable
    "includeInMinMax": false //make sure the graph doesn't affect the value axis min/max when zooming.
  }, {
    "balloonText": "[[category]]: <b>[[value]]</b>",
    "fillColorsField": "color",
    "fillAlphas": 0.9,
    "lineAlpha": 0.2,
    "type": "column",
    "urlField": "url",
    "urlTarget": "_blank",
    "valueField": "visits"
  }],
  "depth3D": 10,
  "angle": 45,
  "chartCursor": {
    "categoryBalloonEnabled": false,
    "cursorAlpha": 0,
    "zoomable": false
  },
  "categoryField": "country",
  "categoryAxis": {
    "gridPosition": "start",
    "classNameField": "Ctglabel",
    "labelRotation": 45,
    "minHorizontalGap": 50,
    "title": "Country",
    "urlTarget": "_blank",
    "listeners": [{
      "event": "clickItem",
      "method": function(event) {
        window.open(event.serialDataItem.dataContext.url, '_blank');
      }
    }]
  },
  "export": {
    "enabled": true
  }
});

document.getElementById('resize').addEventListener('click', function(e) {
  if (e.currentTarget.dataset.resized === "no") {
    document.getElementById("chartdiv").style.width = "500px";
    e.currentTarget.dataset.resized = "yes";
  } else {
    document.getElementById("chartdiv").style.width = "100%";
    e.currentTarget.dataset.resized = "no";
  }
});
#chartdiv {
  width: 100%;
  height: 500px;
}

g.amcharts-category-axis tspan {
  cursor: pointer;
}

g.amcharts-category-axis text.amcharts-axis-label tspan:hover, 
g.amcharts-graph-label-only text tspan {
  text-decoration: underline;
  fill: red;
}

text.amcharts-axis-title {
  font-size: 13px;
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="//www.amcharts.com/lib/3/plugins/responsive/responsive.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<button id="resize" data-resized="no">Resize chart</button>
<div id="chartdiv"></div>

Edit 3

Another solution is to use a CSS @media query to increase the chart height to expand the bar height when the responsive rule triggers the rotation. For example:

@media screen and (max-width: 480px) {
    #chartdiv {
      width: 100%;
      height: 700px;
    }
}

Upvotes: 3

Related Questions