Home forums Chart Support Displaying many on data the Y-Axis.

Tagged: 

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #28848

    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},
    ]
    }];
    #28853

    @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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.