Highchart configure appearance when x-axis has many categories -
i choose bar chart, because graph has many categories, think it's better aproach column chart.
i choose following source code making start:
however, when put many categories, category labels overlapped 1 each other. firstly solved making container higher. result not expect, because got lot of "padding" between beginning of graph , first category label, between last label , end of graph:
see fiddle:
the code below:
$(function () { var categories = ["analogo","analogo klorner","aÑadir una pieza ","aÑadir resto piezas","arandela de oro","arandela zocalo","cajita","calcinable","calcinable diametro 4","calcinable klorner","carilla empres","completa definitiva","completa provisional ","compostura","compostura protesis","compostura simple","corona circonio","corona circonio sobre implante","corona empress sin metal","corona jacket ceramica","corona metal ceramica","corona provisional cementada","corona sobre implante","cubeta de resina","esqueletico bilateral 1-3 pzas","esqueletico bilateral 3-5 pzas","esqueletico bilateral 5-8 pzas","esqueletico bilateral 8-14 pzas","esqueletico unilateral 1-3 pzas","ferula de blanqueamiento","ferula descarga","gancho unidad","implante provisional atornillado","meryland pieza","parcial acrilico 10 pzas o muÑon","parcial acrilico de 1-3 pzas","parcial acrilico de 4 pzas","parcial acrilico de 5 pzas","parcial acrilico de 6 pzas","parcial acrilico de 7 pzas","parcial acrilico de 8 pzas","parcial acrilico de 9 pzas","parcial acrilico prov. 10 pzas o muÑÓn","parcial acrilico prov. de 1-3 pzas","parcial acrilico prov. de 4 pzas","parcial acrilico prov. de 5 pzas","parcial acrilico prov. de 6 pzas","parcial acrilico prov. de 7 pzas","perno muÑon colado","perno muÑon doble colado","pilar angulado","protesis hibrida","rebase protesis","reparacion arcada ceramica","reparacion ceramica","replica diametro 5 mm","sobredentadura con locator","soldadura","tornillo avinent","tornillo klorner","tornillo titanio","varios"]; $('#container').highcharts({ chart: { type: 'bar' }, title: { text: 'stacked bar chart' }, xaxis: { categories: categories }, yaxis: { min: 0, title: { text: 'total fruit consumption' } }, legend: { backgroundcolor: '#ffffff', reversed: true }, plotoptions: { series: { stacking: 'normal' } }, series: [ { name:'company-3', data: [ [categories.indexof("ferula descarga"),13],[categories.indexof("esqueletico bilateral 8-14 pzas"),1],[categories.indexof("esqueletico bilateral 5-8 pzas"),3],[categories.indexof("parcial acrilico prov. de 7 pzas"),1],[categories.indexof("corona circonio sobre implante"),14],[categories.indexof("gancho unidad"),76],[categories.indexof("esqueletico bilateral 3-5 pzas"),1],[categories.indexof("completa provisional "),36],[categories.indexof("parcial acrilico de 4 pzas"),15],[categories.indexof("analogo"),1],[categories.indexof("parcial acrilico prov. de 1-3 pzas"),3],[categories.indexof("corona circonio"),27],[categories.indexof("aÑadir 1ª pieza "),1],[categories.indexof("meryland pieza"),5],[categories.indexof("tornillo titanio"),37],[categories.indexof("completa definitiva"),1],[categories.indexof("corona provisional cementada"),16],[categories.indexof("sobredentadura con locator"),3],[categories.indexof("tornillo avinent"),44],[categories.indexof("reparacion ceramica"),2],[categories.indexof("arandela de oro"),8],[categories.indexof("corona sobre implante"),651],[categories.indexof("varios"),30],[categories.indexof("corona metal ceramica"),67],[categories.indexof("arandela zocalo"),30],[categories.indexof("parcial acrilico de 6 pzas"),1],[categories.indexof("replica diametro 5 mm"),1],[categories.indexof("parcial acrilico 10 pzas o mÁs"),1],[categories.indexof("parcial acrilico de 1-3 pzas"),19],[categories.indexof("esqueletico bilateral 1-3 pzas"),2],[categories.indexof("parcial acrilico prov. 10 pzas o mÁs"),1],[categories.indexof("aÑadir resto piezas"),1],[categories.indexof("corona jacket ceramica"),6],[categories.indexof("protesis hibrida"),44] ]}, { name:'company-5', data: [ [categories.indexof("calcinable"),2],[categories.indexof("corona metal ceramica"),4],[categories.indexof("gancho unidad"),11],[categories.indexof("varios"),2],[categories.indexof("corona sobre implante"),26],[categories.indexof("completa definitiva"),1],[categories.indexof("analogo"),3],[categories.indexof("parcial acrilico prov. 10 pzas o mÁs"),1],[categories.indexof("tornillo titanio"),20],[categories.indexof("pilar angulado"),2],[categories.indexof("parcial acrilico de 1-3 pzas"),3],[categories.indexof("calcinable diametro 4"),18],[categories.indexof("tornillo avinent"),1],[categories.indexof("parcial acrilico de 5 pzas"),1] ]}, { name:'company-6.', data: [ [categories.indexof("protesis hibrida"),28],[categories.indexof("completa provisional "),1],[categories.indexof("implante provisional atornillado"),1],[categories.indexof("reparacion ceramica"),5],[categories.indexof("corona jacket ceramica"),3],[categories.indexof("tornillo klorner"),1],[categories.indexof("perno muÑon colado"),2],[categories.indexof("ferula descarga"),14],[categories.indexof("corona empress sin metal"),4],[categories.indexof("corona provisional cementada"),16],[categories.indexof("corona circonio sobre implante"),1],[categories.indexof("parcial acrilico de 4 pzas"),1],[categories.indexof("completa definitiva"),1],[categories.indexof("corona circonio"),4],[categories.indexof("varios"),2],[categories.indexof("calcinable klorner"),1],[categories.indexof("corona metal ceramica"),25],[categories.indexof("analogo klorner"),1],[categories.indexof("corona sobre implante"),322],[categories.indexof("sobredentadura con locator"),9],[categories.indexof("carilla empres"),2],[categories.indexof("gancho unidad"),2] ]}, { name:'company-7', data: [ [categories.indexof("calcinable"),1],[categories.indexof("corona sobre implante"),2],[categories.indexof("corona metal ceramica"),6],[categories.indexof("reparacion ceramica"),3],[categories.indexof("protesis hibrida"),1] ]} ] }); }); just know: - on navigator can see category labels, jsfiddle of them.
- not series have data, thats why put data in series expression categories.indexof().
Comments
Post a Comment