Angular-chart customization

Question

I am using AngularJS v1.6.6 and angular-chart v.1.1.1 to display a chart in my application.

Here is the fiddle: https://jsfiddle.net/elenat82/w9gs3fqt/3/

And here is the code:

HTML:

<div class="container" ng-app="app" ng-controller="ChartCtrl">
<div class="row">
    <div class="col-md-6">
        <canvas 
        id="base" 
        class="chart-base" 
        chart-data="datas" 
        chart-labels="labelsdata" 
        chart-series="series" 
        chart-type="type" 
        chart-options="options">
        </canvas>
    </div>
    
</div>

JS:

angular.module("app", ["chart.js"])
.controller("ChartCtrl", function($scope) {

$scope.datas = [
                [132],
                [170],
                [2.50],
                [45.67],
                [154],
                [89],
                [111],
                [160],
                [94]
            ];
$scope.labelsdata = ["today"];
$scope.series = ["label1", "label2", "label3", "label4", "label5", "label6", "label7", "label8", "label9"];
if ($scope.labelsdata.length > 1) {
    $scope.type = 'line';
} 
else {
    $scope.type = 'bar';
}
$scope.options = {
            scales: {
                yAxes: [
                {id: 'y-axis-1',
                 type: 'linear', 
                 display: true,
                 position: 'left'},
                {id: 'y-axis-2',
                  type: 'linear' ,
                  display: true,
                  position: 'right'}
                    ]
                    }
                }

});

What I would like to do is to display the same Y axe on both sides of the chart, with the same scale, now the left Y axe is ok but the right one shows weird values.... I want right Y axe to be exactly the same I have on the left side. If I understand correctly this http://www.chartjs.org/docs/latest/axes/cartesian/#axis-id you can use separate Y axes for differents datasets but this is not what I want.

Also I would like to have the labels always shown, not only when I hover the bars, now it's hard to figure out what every bar is related to .....

Venu Duggireddy · Accepted Answer · 2018-03-21 14:43:41Z

1

You can define custom ticks for both sides of y-axis

https://jsfiddle.net/w9gs3fqt/13/

 var axis_ticks = {
       beginAtZero: true,
       max:200,
       min: 0,
       stepSize: 50
    };
    $scope.options = {
                scales: {
                    yAxes: [
                    {id: 'y-axis-1',
                     type: 'linear', 
                     display: true,
                     position: 'left',
                     ticks:axis_ticks
                     },
                    {id: 'y-axis-2',
                      type: 'linear' ,
                      display: true,
                      position: 'right',
                      ticks:axis_ticks
                      }
                                    ]
                        }
                    }

answered Mar 21, 2018 at 14:43

Venu Duggireddy

8067 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular-chart customization

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related