using chart-dataset-override option in angular-chart.js

Question

I'am writing an application for budget management and i am using angular-chart.js.

i want to use a dataset to override the initial data(mainly to add new data to the graph and give diffrent color for each bar,label etc.)and set label and colors according to the value of the data. currently,i tried to do that hard coded but only the first value is being override.

here is the code i am using :

angular.module("app2", ["chart.js"]).controller("MixedChartCtrl",
function($scope) {
    $scope.colors = ['#45b7cd', '#ff6384', '#ff8e72'];

    $scope.labels = ['', ''];
    $scope.data = [65, 11];
    $scope.datasetOverride = [

        {
            label: 'Override Series A',
            borderWidth: 1,
            type: 'bar',
            data: [345]
        },
        {
            label: "Bar chart1",
            borderWidth: 1,
            type: 'bar',
            data: [45]
        }

    ];
});

Vince Bowdren · Accepted Answer · 2016-08-25 14:06:22Z

Hoping that yourquestion is, you want a fill color/label/something to each individual data (for each bar).

Above (your) code snippet is used when you have two data sets.
All these dataset properties will accept String when the same property value has to set for all data, and they will also accept Array[String] - when you want to set different property values for different data in the same dataset. (like below).

$scope.data = [65,11];
$scope.datasetOverride = [
{
  label: ['something', 'otherthing'],
  borderWidth: [1,2],
  backgroundColor: ['#FF4242','#2291ff']
}
]

so now I understood that you might be adding dynamically data.
so you have to push data into DATASET something like this:

$scope.data.push(345);

So if you want to set different properties for these you need to push the properties (arrays).

$scope.datasetOverride[0][label].push('someother thing');
$scope.datasetOverride[0][borderWidth].push(2);
$scope.datesetOverride[0][backgroundColor].push('#46bfb8');

This will add a bar with new color/label/etc beside the previous bars.

I hope I understood your question and this will help.

Collectives™ on Stack Overflow

using chart-dataset-override option in angular-chart.js

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