score:38
Accepted answer
you could achieve that using the following tooltips callback function ...
callbacks: {
label: function (t, d) {
if (t.datasetindex === 0) {
return '$' + t.ylabel.tofixed(2)
} else if (t.datasetindex === 1) {
return math.round(+t.ylabel.tostring().replace(/(\d{2})(.*)/, '$1.$2')) + 'm';
}
}
}
ᴅᴇᴍᴏ
var ctx = document.getelementbyid("canvas").getcontext("2d");
var mychart = new chart(ctx, {
type: 'bar',
data: {
labels: ["january", "february", "march", "april", "may"],
datasets: [{
type: 'line',
label: "sales",
data: [144.36534, 146.42534, 145.23534, 147.19534, 145],
fill: false,
bordercolor: '#ec932f',
backgroundcolor: '#ec932f',
tension: 0,
yaxisid: 'y-axis-2'
}, {
type: 'bar',
label: "visitor",
data: [22345343, 23345343, 24345343, 25345343, 230245343],
backgroundcolor: '#71b37c',
yaxisid: 'y-axis-1'
}]
},
options: {
responsive: false,
tooltips: {
mode: 'index',
intersect: false,
callbacks: {
label: function (t, d) {
if (t.datasetindex === 0) {
return '$' + t.ylabel.tofixed(2);
} else if (t.datasetindex === 1) {
if (t.ylabel.tostring().length === 9) {
return math.round(+t.ylabel.tostring().replace(/(\d{3})(.*)/, '$1.$2')) + 'm';
} else return math.round(+t.ylabel.tostring().replace(/(\d{2})(.*)/, '$1.$2')) + 'm';
}
}
}
},
scales: {
yaxes: [{
id: "y-axis-1",
position: "left"
}, {
id: "y-axis-2",
position: "right"
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.5.0/chart.min.js"></script>
<canvas id="canvas" width="400" height="190"></canvas>
score:0
thanks, grunt! but since my datasets could me mixed it's better to use the yaxisid to check for the correct dataset.
tooltips: {
callbacks: {
label: function (tooltipitem, details) {
if (details.datasets[tooltipitem.datasetindex].yaxisid == "$") {
let dataset = details.datasets[tooltipitem.datasetindex];
let currentvalue = dataset.data[tooltipitem.index];
return dataset.label + ": " + currentvalue.tofixed(2) + " $";
} else {
let dataset = details.datasets[tooltipitem.datasetindex];
let currentvalue = dataset.data[tooltipitem.index];
return dataset.label + ": " + currentvalue +" pieces";
}
}
}
}
score:2
try using below code!
let doughnutforsavingcount = {
labels: [
intl.formatmessage({ id: 'guarantee' }),
intl.formatmessage({ id: 'ilas' }),
intl.formatmessage({ id: 'no idea' })
],
datasets: [
/* outer doughnut data starts*/
{
label: 'graph1',
data: [
_.get(getclientsavingilaspolicydata[0], 'countwithguaranttee') >
0 &&
_.get(getclientsavingilaspolicydata[0], 'totalwithguarantee') ===
0
? 0.1
: _.get(getclientsavingilaspolicydata[0], 'totalwithguarantee'),
_.get(getclientsavingilaspolicydata[0], 'countwithilas', 0) > 0 &&
_.get(getclientsavingilaspolicydata[0], 'totalwithilas') === 0
? 0.1
: _.get(getclientsavingilaspolicydata[0], 'totalwithilas'),
_.get(getclientsavingilaspolicydata[0], 'countnoidea', 0) > 0 &&
_.get(getclientsavingilaspolicydata[0], 'totalwithnoidea') === 0
? 0.1
: _.get(getclientsavingilaspolicydata[0], 'totalwithnoidea')
],
backgroundcolor: ['#8c1aff', '#bf80ff', '#e9e9e9'],
hoverbackgroundcolor: ['#8c1aff', '#bf80ff', '#e9e9e9']
},
/* outer doughnut data ends*/
/* inner doughnut data starts*/
{
label: 'graph2',
data: [
_.get(getclientsavingilaspolicydata[0], 'countwithguaranttee'),
_.get(getclientsavingilaspolicydata[0], 'countwithilas'),
_.get(getclientsavingilaspolicydata[0], 'countnoidea')
],
backgroundcolor: ['#8c1aff', '#bf80ff', '#e9e9e9'],
hoverbackgroundcolor: ['#8c1aff', '#bf80ff', '#e9e9e9']
}
/* inner doughnut data ends*/
],
borderwidth: [1]
};
let doughnutforsavingcountconfig = {
cutoutpercentage: 70,
legend: {
display: true,
position: 'bottom',
labels: {
fontcolor: '#34a0dc',
fontsize: 10,
fontfamily: 'helvetica',
boxwidth: 10,
usepointstyle: true
}
},
responsive: true,
plugins: {
datalabels: {
display: false
}
},
tooltips: {
enabled: true,
//*****add for reference********** */
callbacks: {
label: function(tooltipitems, data) {
if (tooltipitems.datasetindex) {
var label = data.labels[tooltipitems.index] || '';
var currentvalue =
data.datasets[tooltipitems.datasetindex].data[
tooltipitems.index
];
if (label) {
label += ': ';
}
label += currentvalue == '0.1' ? '0' : currentvalue;
return label;
} else {
var label = data.labels[tooltipitems.index] || '';
var currentvalue =
data.datasets[tooltipitems.datasetindex].data[
tooltipitems.index
];
if (label) {
label += ': ';
}
label += intl.formatmessage({ id: 'hkd' }) + ' ';
label +=
currentvalue == '0.1'
? '0'
: currentvalue
.tostring()
.replace(/\b(?=(\d{3})+(?!\d))/g, ',');
return label;
}
}
}
}
};
Source: stackoverflow.com
Related Query
- Chartjs v2 - format tooltip for multiple data sets (bar and line)
- Chartjs - data format for bar chart with multi-level x-axes
- ChartJS bar chart fixed width for dynamic data sets
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- chartjs display data in one bar line with 3 different data sets in 3 different colors
- Line chart plotting multiple points for duplicate data on x and y axis using chart.js
- Line chart: align x axis (timestamps) for multiple data sets
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- show label in tooltip but not in x axis for chartjs line chart
- ChartJS Line Graph - Multiple Lines, Show one Value on Tooltip
- How to add second Y-axis for Bar and Line chart in Chart.js?
- ng2-charts customize data and whole html content of tooltip displayed when hovering on bar chart
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- ChartJS bar not showing up for simple data points
- How to show data values in top of bar chart and line chart in chart.js 3
- Chart.js: Combined Line and Bar Data
- Missing Tooltip for some data points using chartjs
- Chartjs stacked bar separate tooltip for all stacked
- How to draw multiple line on y axis for same x axis in chartjs v2?
- react-chartjs-2 line chart with time on X-axes with multiple data sets plotted wrong
- ChartJS getting an unwanted line between first data point and last data point
- ChartJS Version 3 - common legend for multiple line charts
- How to create a custom tooltip for chartJS graph with data in JSON array in JavaScript?
- ChartJS 2.9.4 can't overlay line data on Horizontal Bar chart
- Multiple data sets not working when using ChartJS
- How to get fixed legend and tooltip for dynamically generated data vue-chartjs
- ChartJS not showing data for time series bar chart
- How to set min max for x axis depend on data with Chartjs and Spring Boot?
- Charts JS: Doughnut chart and hiding tooltip for specific data index within each dataset
- Chart.js combined line and bar chart with differing data points
More Query from same tag
- chart.js - problem with label on the right hand
- Chart.js : how I can adjust Pie chart radius?
- Add beforeDraw callback on chart JS v3
- how to display chart data as html table chartjs
- Adding data to charts.js dynamically from tables
- Angular ASP.NET Core Chart.js bug on chart rebuild when filtering the list of values
- ChartJS - Override Attributes (AngularJS)
- How to add left/right padding in Chart.js bar chart?
- How to add variable-pie chart to react project?
- Chart.js x axis date-time formatting fails
- Why isn't my X axes on my bar chart starting from zero?
- Line chart is not being displayed in Chart.js
- I can't display the vue-chart.js on the page
- Angular 4:PrimeNg DoughnutChart dynamic data issue.
- Am I missing a chart.js component or helper?
- Chart JS - How to output JSON objects into PIE variant
- Chart.js get array of currently visible points on graph
- How use data dynamically in LineChart.js
- Adding a label to a doughnut chart in Chart.js shows all values in each chart
- Chartjs for Line chart, values on y-axis
- How to create chart.js vertical bar chat with rounded corners in angular 6?
- Add a second Y-axis for Linechart in Chart.js?
- Chart.js Chart does not start at
- what is wrong with my code ? java script chart position
- how do I render PyChart.JS charts in web2py?
- problems with ChartJS refresh in angular component
- Space between start and end of axis
- Update Chart.js plugin
- How to add an image to a slice of a donut chart in chart.js?
- Need Clarity on Chartjs - Asp.NetMVC or Vue-ChartJS -Asp.Net MVC