Displaying many on data the Y-Axis.

[ChimeraSolutions]

We would like to get your feedback on displaying many data on the Y-axis of bar chart.

We tried increasing the height of the charts with fixed width. But we did not like how the chart is displaying.

Please see the screenshot below.

please see our code below.

const options = {};

options.colorSet = "barChart4";
options.axisY = {
labelFormatter: this.addSymbols,
prefix: <code>${this.props.data.currency.base}</code>
};
options.axisX = {
interval: 1
};
options.data = [{
type: "bar",
// indexLabel: "{y}",
yValueFormatString: <code>${this.props.data.currency.base} #,##0.00</code>,
// dataPoints: this.state.data.chart,
dataPoints: [
{ label: "Israel", y: 17.8},
{ label: "United Arab Emirates", y: 22.8},
{ label: "Brazil", y: 22.8},
{ label: "Australia"},
{ label: "South Korea", y: 36.8},
{ label: "Germany", y: 41.1},
{ label: "Japan", y: 46.1},
{ label: "United Kingdom", y: 48.3},
{ label: "India", y: 55.9},
{ label: "Russia", y: 69.2},
{ label: "China", y: 215.7},
{ label: "United States", y: 611.2},
{ label: "Israel", y: 17.8},
{ label: "United Arab Emirates", y: 22.8},
{ label: "Brazil", y: 22.8},
{ label: "Australia"},
{ label: "South Korea", y: 36.8},
{ label: "Germany", y: 41.1},
{ label: "Japan", y: 46.1},
{ label: "United Kingdom", y: 48.3},
{ label: "India", y: 55.9},
{ label: "Russia", y: 69.2},
{ label: "China", y: 215.7},
{ label: "United States", y: 611.2},
{ label: "Israel", y: 17.8},
{ label: "United Arab Emirates", y: 22.8},
{ label: "Brazil", y: 22.8},
{ label: "Australia"},
{ label: "South Korea", y: 36.8},
{ label: "Germany", y: 41.1},
{ label: "Japan", y: 46.1},
{ label: "United Kingdom", y: 48.3},
{ label: "India", y: 55.9},
{ label: "Russia", y: 69.2},
{ label: "China", y: 215.7},
{ label: "United States", y: 611.2},
{ label: "Israel", y: 17.8},
{ label: "United Arab Emirates", y: 22.8},
{ label: "Brazil", y: 22.8},
{ label: "Australia"},
{ label: "South Korea", y: 36.8},
{ label: "Germany", y: 41.1},
{ label: "Japan", y: 46.1},
{ label: "United Kingdom", y: 48.3},
{ label: "India", y: 55.9},
{ label: "Russia", y: 69.2},
{ label: "China", y: 215.7},
{ label: "United States", y: 611.2},
{ label: "Israel", y: 17.8},
{ label: "United Arab Emirates", y: 22.8},
{ label: "Brazil", y: 22.8},
{ label: "Australia"},
{ label: "South Korea", y: 36.8},
{ label: "Germany", y: 41.1},
{ label: "Japan", y: 46.1},
{ label: "United Kingdom", y: 48.3},
{ label: "India", y: 55.9},
{ label: "Russia", y: 69.2},
{ label: "China", y: 215.7},
{ label: "United States", y: 611.2},
{ label: "Israel", y: 17.8},
{ label: "United Arab Emirates", y: 22.8},
{ label: "Brazil", y: 22.8},
{ label: "Australia"},
{ label: "South Korea", y: 36.8},
{ label: "Germany", y: 41.1},
{ label: "Japan", y: 46.1},
{ label: "United Kingdom", y: 48.3},
{ label: "India", y: 55.9},
{ label: "Russia", y: 69.2},
{ label: "China", y: 215.7},
{ label: "United States", y: 611.2},
{ label: "Israel", y: 17.8},
{ label: "United Arab Emirates", y: 22.8},
{ label: "Brazil", y: 22.8},
{ label: "Australia"},
{ label: "South Korea", y: 36.8},
{ label: "Germany", y: 41.1},
{ label: "Japan", y: 46.1},
{ label: "United Kingdom", y: 48.3},
{ label: "India", y: 55.9},
{ label: "Russia", y: 69.2},
{ label: "China", y: 215.7},
{ label: "United States", y: 611.2},
{ label: "Israel", y: 17.8},
{ label: "United Arab Emirates", y: 22.8},
{ label: "Brazil", y: 22.8},
{ label: "Australia"},
{ label: "South Korea", y: 36.8},
{ label: "Germany", y: 41.1},
{ label: "Japan", y: 46.1},
{ label: "United Kingdom", y: 48.3},
{ label: "India", y: 55.9},
{ label: "Russia", y: 69.2},
{ label: "China", y: 215.7},
{ label: "United States", y: 611.2},
{ label: "Israel", y: 17.8},
{ label: "United Arab Emirates", y: 22.8},
{ label: "Brazil", y: 22.8},
{ label: "Australia"},
{ label: "South Korea", y: 36.8},
{ label: "Germany", y: 41.1},
{ label: "Japan", y: 46.1},
{ label: "United Kingdom", y: 48.3},
{ label: "India", y: 55.9},
{ label: "Russia", y: 69.2},
{ label: "China", y: 215.7},
{ label: "United States", y: 611.2},
]
}];

[Indranil]

@chimerasolutions,

Since the interval is set to 1 the chart will render all corresponding labels which will result in overlapping. Removing the interval option will allow library to calculate the interval automatically and prevent it from overlapping.

___________
Indranil Deo
Team CanvasJS