Official Support Area, Q&As, Discussions, Suggestions and Bug reports.
Forum's Guidelines
to point 3: I found the data labels plugin but no documentation how to use it. I figured it out to implement the value on top but don't understand how to use the formatter.
"options"=>array(
"plugins"=>array(
"datalabels"=>array(
"labels"=> array(
"values"=> array(
"color"=> "black",
"anchor" => "end",
"offset"=>"0",
"align"=>"top",
"font"=>array(
"size"=>"12",
"weight" => "bold",
)
),
),
)
),
),
How do I also achieve point 1 and 2?
Hi Thomas,
The fault is mine. I forgot to check to sidebar info. Regarding your points 1 and 2 please try the ticks option of yAxes which have all the min, max, and custom label options:
options: {
scales: {
yAxes: [{
ticks: {
min: 0,
max: 5,
stepSize: 1,
suggestedMin: 0.5,
suggestedMax: 5.5,
callback: function(label, index, labels) {
switch (label) {
case 0:
return 'ZERO';
case 1:
return 'ONE';
case 2:
return 'TWO';
case 3:
return 'THREE';
case 4:
return 'FOUR';
case 5:
return 'FIVE';
}
}
}
}]
}
}
Of course, you have to convert this json into php array before using it with Chartjs widgets.
Answer source: https://stackoverflow.com/questions/37708374/how-do-i-customize-y-axis-labels-on-a-chart-js-line-chart
It didn't work. What did I miss?
"options"=>array(
"scales" => array(
"yAxes" => array(
"ticks" => array(
"min"=>0,
"max"=> 5,
"stepSize"=> 1,
"suggestedMin"=> 0.5,
"suggestedMax"=> 5.5,
"callback" => "function(label, index, labels) {
switch (label) {
case 0:
return 'ZERO';
case 1:
return 'ONE';
case 2:
return 'TWO';
case 3:
return 'THREE';
case 4:
return 'FOUR';
case 5:
return 'FIVE';
}
}"
)
)
),
),
I think you missed that yAxes is an array of object in the json. So in php array it should have been:
"yAxes" => array(
array(
"ticks" => array(
"min"=>0,
"max"=> 5,
"stepSize"=> 1,
"suggestedMin"=> 0.5,
"suggestedMax"=> 5.5,
"callback" => "function(label, index, labels) {
switch (label) {
case 0:
return 'ZERO';
case 1:
return 'ONE';
case 2:
return 'TWO';
case 3:
return 'THREE';
case 4:
return 'FOUR';
case 5:
return 'FIVE';
}
}"
)
)
)
Perfect, that worked.
Now for the last part, how do I format the data label to two decimals?
"plugins"=>array(
"datalabels"=>array(
"labels"=> array(
"values"=> array(
"value" => "value+value",
"formatter"=> "value+value",
"color"=> "black",
"decimals" => '2',
"anchor" => "end",
"offset"=>"0",
"align"=>"top",
"font"=>array(
"size"=>"12",
"weight" => "bold",
)
),
),
"formatter" => "function(value, context) {
return round(value, 2)"
)
),
In case somebody is interested:
"datalabels"=>array(
"labels"=> array(
"values"=> array(
"color"=> "black",
"decimals" => '2',
"anchor" => "end",
"offset"=>"0",
"align"=>"top",
"font"=>array(
"size"=>"12",
"weight" => "bold",
)
),
),
"formatter" => "function(value, context) {
var result = value.toFixed(2);
return result;
}"
),
Let KoolReport help you to make great reports. It's free & open-source released under MIT license.
Download KoolReport View demo