How to apply dollar sign in Y- axis in chart js?
1
I am working on chart js, I want to apply doller sign in Y axis, I tried options for that but it is not working, can anyone please help me for that, here is my code
function earning_one_time_purchase() {
var monthsData = {
labels: <?php echo $t->one_time_purchase_month_chart; ?>,
datasets: [
{
fillColor: "<?php echo $graph_color_code; ?>", //"rgba(172,194,132,0.4)",
strokeColor: "<?php echo $graph_line_color_code; ?>",
pointColor: "#fff",
pointStrokeColor: "#9DB86D",
data: <?php echo $t->one_time_purchase_amount_chart; ?>
}
],
options: {
scales: {
yAxes: [{
ticks: {
// Include a dollar sign in the ticks
callback: function(value, index, values) {
alert(value);
return '$' + value;
}
}
}]
}
}
};
var months = document.getElementById("eChart_1").getContext("2d");
new Chart(months).Line(monthsData);
}
javascript charts chart.js
edited Dec 28 at 3:08
Ana Liza Pandac
1,042619
asked Dec 27 at 14:07
Nikul Panchal
13911
add a comment |
1
I am working on chart js, I want to apply doller sign in Y axis, I tried options for that but it is not working, can anyone please help me for that, here is my code
function earning_one_time_purchase() {
var monthsData = {
labels: <?php echo $t->one_time_purchase_month_chart; ?>,
datasets: [
{
fillColor: "<?php echo $graph_color_code; ?>", //"rgba(172,194,132,0.4)",
strokeColor: "<?php echo $graph_line_color_code; ?>",
pointColor: "#fff",
pointStrokeColor: "#9DB86D",
data: <?php echo $t->one_time_purchase_amount_chart; ?>
}
],
options: {
scales: {
yAxes: [{
ticks: {
// Include a dollar sign in the ticks
callback: function(value, index, values) {
alert(value);
return '$' + value;
}
}
}]
}
}
};
var months = document.getElementById("eChart_1").getContext("2d");
new Chart(months).Line(monthsData);
}
javascript charts chart.js
edited Dec 28 at 3:08
Ana Liza Pandac
1,042619
asked Dec 27 at 14:07
Nikul Panchal
13911
add a comment |
1
1
1
I am working on chart js, I want to apply doller sign in Y axis, I tried options for that but it is not working, can anyone please help me for that, here is my code
function earning_one_time_purchase() {
var monthsData = {
labels: <?php echo $t->one_time_purchase_month_chart; ?>,
datasets: [
{
fillColor: "<?php echo $graph_color_code; ?>", //"rgba(172,194,132,0.4)",
strokeColor: "<?php echo $graph_line_color_code; ?>",
pointColor: "#fff",
pointStrokeColor: "#9DB86D",
data: <?php echo $t->one_time_purchase_amount_chart; ?>
}
],
options: {
scales: {
yAxes: [{
ticks: {
// Include a dollar sign in the ticks
callback: function(value, index, values) {
alert(value);
return '$' + value;
}
}
}]
}
}
};
var months = document.getElementById("eChart_1").getContext("2d");
new Chart(months).Line(monthsData);
}
javascript charts chart.js
edited Dec 28 at 3:08
Ana Liza Pandac
1,042619
asked Dec 27 at 14:07
Nikul Panchal
13911
I am working on chart js, I want to apply doller sign in Y axis, I tried options for that but it is not working, can anyone please help me for that, here is my code
function earning_one_time_purchase() {
var monthsData = {
labels: <?php echo $t->one_time_purchase_month_chart; ?>,
datasets: [
{
fillColor: "<?php echo $graph_color_code; ?>", //"rgba(172,194,132,0.4)",
strokeColor: "<?php echo $graph_line_color_code; ?>",
pointColor: "#fff",
pointStrokeColor: "#9DB86D",
data: <?php echo $t->one_time_purchase_amount_chart; ?>
}
],
options: {
scales: {
yAxes: [{
ticks: {
// Include a dollar sign in the ticks
callback: function(value, index, values) {
alert(value);
return '$' + value;
}
}
}]
}
}
};
var months = document.getElementById("eChart_1").getContext("2d");
new Chart(months).Line(monthsData);
}
javascript charts chart.js
javascript charts chart.js
edited Dec 28 at 3:08
Ana Liza Pandac
1,042619
asked Dec 27 at 14:07
Nikul Panchal
13911
edited Dec 28 at 3:08
Ana Liza Pandac
1,042619
asked Dec 27 at 14:07
Nikul Panchal
13911
edited Dec 28 at 3:08
Ana Liza Pandac
1,042619
edited Dec 28 at 3:08
Ana Liza Pandac
1,042619
edited Dec 28 at 3:08
Ana Liza Pandac
1,042619
1,042619
asked Dec 27 at 14:07
Nikul Panchal
13911
asked Dec 27 at 14:07
Nikul Panchal
13911
asked Dec 27 at 14:07
Nikul Panchal
13911
13911
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
If you are using version 1.x of Chart.js, you can customize the ticks using the scaleLabel key.
var options = {
scaleLabel: function(label){return '$' + label.value}
};
Note that when creating the chart, you should pass the options object as the second argument instead of including it in your monthsData.
const labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];
const initialData = [{'x':'Apr', 'y':40},{'x':'July', 'y':70},{'x':'Dec', 'y':120}];
const filledMonths = initialData.map((month) => month.x);
const dataSet = labels.map(month => {
const indexOfFilledData = filledMonths.indexOf(month);
if( indexOfFilledData !== -1) return initialData[indexOfFilledData].y;
return 0;
});
var monthsData = {
labels: labels,
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: dataSet
}
]
};
var options = {
scaleLabel: function(label){return '$' + label.value}
};
var ctx = document.getElementById("myChart").getContext("2d");
var chart = new Chart(ctx).Line(monthsData, options);<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.min.js"></script>
<canvas id="myChart" width="300" height="300"></canvas>answered Dec 28 at 1:56
Ana Liza Pandac
1,042619
You're welcome.
– Ana Liza Pandac
Dec 28 at 6:55
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53946380%2fhow-to-apply-dollar-sign-in-y-axis-in-chart-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
If you are using version 1.x of Chart.js, you can customize the ticks using the scaleLabel key.
var options = {
scaleLabel: function(label){return '$' + label.value}
};
Note that when creating the chart, you should pass the options object as the second argument instead of including it in your monthsData.
const labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];
const initialData = [{'x':'Apr', 'y':40},{'x':'July', 'y':70},{'x':'Dec', 'y':120}];
const filledMonths = initialData.map((month) => month.x);
const dataSet = labels.map(month => {
const indexOfFilledData = filledMonths.indexOf(month);
if( indexOfFilledData !== -1) return initialData[indexOfFilledData].y;
return 0;
});
var monthsData = {
labels: labels,
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: dataSet
}
]
};
var options = {
scaleLabel: function(label){return '$' + label.value}
};
var ctx = document.getElementById("myChart").getContext("2d");
var chart = new Chart(ctx).Line(monthsData, options);<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.min.js"></script>
<canvas id="myChart" width="300" height="300"></canvas>answered Dec 28 at 1:56
Ana Liza Pandac
1,042619
You're welcome.
– Ana Liza Pandac
Dec 28 at 6:55
add a comment |
1
If you are using version 1.x of Chart.js, you can customize the ticks using the scaleLabel key.
var options = {
scaleLabel: function(label){return '$' + label.value}
};
Note that when creating the chart, you should pass the options object as the second argument instead of including it in your monthsData.
const labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];
const initialData = [{'x':'Apr', 'y':40},{'x':'July', 'y':70},{'x':'Dec', 'y':120}];
const filledMonths = initialData.map((month) => month.x);
const dataSet = labels.map(month => {
const indexOfFilledData = filledMonths.indexOf(month);
if( indexOfFilledData !== -1) return initialData[indexOfFilledData].y;
return 0;
});
var monthsData = {
labels: labels,
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: dataSet
}
]
};
var options = {
scaleLabel: function(label){return '$' + label.value}
};
var ctx = document.getElementById("myChart").getContext("2d");
var chart = new Chart(ctx).Line(monthsData, options);<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.min.js"></script>
<canvas id="myChart" width="300" height="300"></canvas>answered Dec 28 at 1:56
Ana Liza Pandac
1,042619
You're welcome.
– Ana Liza Pandac
Dec 28 at 6:55
add a comment |
1
1
1
If you are using version 1.x of Chart.js, you can customize the ticks using the scaleLabel key.
var options = {
scaleLabel: function(label){return '$' + label.value}
};
Note that when creating the chart, you should pass the options object as the second argument instead of including it in your monthsData.
const labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];
const initialData = [{'x':'Apr', 'y':40},{'x':'July', 'y':70},{'x':'Dec', 'y':120}];
const filledMonths = initialData.map((month) => month.x);
const dataSet = labels.map(month => {
const indexOfFilledData = filledMonths.indexOf(month);
if( indexOfFilledData !== -1) return initialData[indexOfFilledData].y;
return 0;
});
var monthsData = {
labels: labels,
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: dataSet
}
]
};
var options = {
scaleLabel: function(label){return '$' + label.value}
};
var ctx = document.getElementById("myChart").getContext("2d");
var chart = new Chart(ctx).Line(monthsData, options);<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.min.js"></script>
<canvas id="myChart" width="300" height="300"></canvas>answered Dec 28 at 1:56
Ana Liza Pandac
1,042619
If you are using version 1.x of Chart.js, you can customize the ticks using the scaleLabel key.
var options = {
scaleLabel: function(label){return '$' + label.value}
};
Note that when creating the chart, you should pass the options object as the second argument instead of including it in your monthsData.
const labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];
const initialData = [{'x':'Apr', 'y':40},{'x':'July', 'y':70},{'x':'Dec', 'y':120}];
const filledMonths = initialData.map((month) => month.x);
const dataSet = labels.map(month => {
const indexOfFilledData = filledMonths.indexOf(month);
if( indexOfFilledData !== -1) return initialData[indexOfFilledData].y;
return 0;
});
var monthsData = {
labels: labels,
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: dataSet
}
]
};
var options = {
scaleLabel: function(label){return '$' + label.value}
};
var ctx = document.getElementById("myChart").getContext("2d");
var chart = new Chart(ctx).Line(monthsData, options);<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.min.js"></script>
<canvas id="myChart" width="300" height="300"></canvas>const labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];
const initialData = [{'x':'Apr', 'y':40},{'x':'July', 'y':70},{'x':'Dec', 'y':120}];
const filledMonths = initialData.map((month) => month.x);
const dataSet = labels.map(month => {
const indexOfFilledData = filledMonths.indexOf(month);
if( indexOfFilledData !== -1) return initialData[indexOfFilledData].y;
return 0;
});
var monthsData = {
labels: labels,
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: dataSet
}
]
};
var options = {
scaleLabel: function(label){return '$' + label.value}
};
var ctx = document.getElementById("myChart").getContext("2d");
var chart = new Chart(ctx).Line(monthsData, options);<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.min.js"></script>
<canvas id="myChart" width="300" height="300"></canvas>const labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];
const initialData = [{'x':'Apr', 'y':40},{'x':'July', 'y':70},{'x':'Dec', 'y':120}];
const filledMonths = initialData.map((month) => month.x);
const dataSet = labels.map(month => {
const indexOfFilledData = filledMonths.indexOf(month);
if( indexOfFilledData !== -1) return initialData[indexOfFilledData].y;
return 0;
});
var monthsData = {
labels: labels,
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: dataSet
}
]
};
var options = {
scaleLabel: function(label){return '$' + label.value}
};
var ctx = document.getElementById("myChart").getContext("2d");
var chart = new Chart(ctx).Line(monthsData, options);<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.min.js"></script>
<canvas id="myChart" width="300" height="300"></canvas>answered Dec 28 at 1:56
Ana Liza Pandac
1,042619
answered Dec 28 at 1:56
Ana Liza Pandac
1,042619
answered Dec 28 at 1:56
Ana Liza Pandac
1,042619
answered Dec 28 at 1:56
Ana Liza Pandac
1,042619
1,042619
You're welcome.
– Ana Liza Pandac
Dec 28 at 6:55
add a comment |
You're welcome.
– Ana Liza Pandac
Dec 28 at 6:55
You're welcome.
– Ana Liza Pandac
Dec 28 at 6:55
You're welcome.
– Ana Liza Pandac
Dec 28 at 6:55
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53946380%2fhow-to-apply-dollar-sign-in-y-axis-in-chart-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
