score:1
changing tooltip template by label
you can use the label
property of the valuesobject to figure out the index and use that to pick your symbol, like so
chart.mysymbols = ['!', '@', '#', '$', '%', '^', '&'];
var ctx = document.getelementbyid("mychart").getcontext("2d");
var mychart = new chart(ctx).line(window.data, {
multitooltiptemplate: "<%=datasetlabel%> : <%= value %><%= chart.mysymbols[window.data.labels.indexof(label)] %>"
});
notice that both data
and mysymbols
collection are properties of globally referencible objects (window
and chart
in this case, but it could be any global object). this is because only the valuesobject is injected into the template
function. unless you want to change the library code, using global objects would be the way to do it (however, do note that its not good design).
fiddle - http://jsfiddle.net/z1nfqhfn/
changing tooltip template by dataset
if you want to do a similar thing by dataset, it would be
chart.mysymbols = ['°c', '%'];
var ctx = document.getelementbyid("mychart").getcontext("2d");
var mychart = new chart(ctx).line(window.data, {
multitooltiptemplate: "<%=datasetlabel%> : <%= value %><%= chart.mysymbols[window.data.datasets.map(function(e) { return e.label }).indexof(datasetlabel)] %>"
});
fiddle - http://jsfiddle.net/fnu0dyd2/
Source: stackoverflow.com
Related Query
- Chartjs display multiple info with different units in label
- Chartjs display label & units when mouse is hover stats
- Chartjs with multiple y axes and different scales
- How can I load multiple Chartjs charts with different data on the same page?
- Is there a way in chartjs to display different Boolean values with an offset in Y over a common timeline?
- chartjs display data in one bar line with 3 different data sets in 3 different colors
- How to display multiple graphs in real time with chartjs
- Insert value into a ChartJS with different data label
- multiple chartjs charts with the same configuration but different data
- Beginner in JS,Stuck with ChartJS and multiple filters and ways to display
- ChartJS - Draw chart with label by month, data by day
- how to plot multiple time series in chartjs where each time series has different times
- Display line chart with connected dots using chartJS
- ChartJS - Donut charts with multiple rings
- Chartjs v2 xAxes label overlap with scaleLabel
- ChartJS with AngularJS - Canvas won't display anything
- ChartJS - Line Chart with different size datasets
- Horizontal bar with multiple sections in ChartJs
- ChartJs line chart - display permanent icon above some data points with text on hover
- Chartjs drill down issue with multiple Y-Axis Bar/Line graph
- Display multiple datasets from array with chart.js
- Chartjs Nested Doughnut Layers With Different Thickness
- ChartJS - how to display line chart with single element as a line? (not as a dot)
- How to Change the Label Strike-Through with light gray on a ChartJS Doughnut?
- Display image on bar chart.js along with label (chartjs-plugin-datalabels)
- label too long in yAxis with chartJs
- Display two line graphs with data starting at different points
- how to display chart.js legend with different bar color
- Group Chart with multiple layers in ChartJS
- Chartjs multiple barcharts corresponding to one label
More Query from same tag
- chart.js add second line in a Line chart that starts from end of first line
- Weather graph using Angular 2, chart.js and json data
- How to Reverse Chart.js Label Order?
- Fetch more data for line chart onZoom/onPan issues
- chartjs-plugin-streaming + chartjs-plugin-zoom
- How do I import Chart.js Helper Functions in Django?
- How can I merge multiple HTTP calls to one entity model in Angular
- Redraw Chart.js with PHP JSON
- Multiple dynamic vertical lines on a chart with Chart.js
- Chart.js canvas is empty / white in node.js
- label too long in yAxis with chartJs
- How can I set different colours for each bar in angular-chart.js v1.0.0?
- Construct a bar chart using chart.js
- Meteor and ChartJS dynamically create a chart
- Hover over chart shows multiple datapoints
- In Chart.js I want to show dotted gridLines like in below image
- Chart.js - draw horizontal line
- Laravel query builder for Charts.js
- How to disable converting decimal number to exponential?
- ChartsJS get value of Data/Dataset Label for Tooltip
- How to load page containing Chart.js using jQuery
- ReactJS - Loading data using Axios + chartjs
- How to get data from JSON for chart.js, using vue.js
- chartjs create scrolling on the x axis
- Chartjs - resize an image positioned in a column
- Can we have number value on the top of charts bars.?
- Uncaught Error: Can't resolve all parameters for Chart: (?, ?) in Ionic2
- Angular chart from Chart.js
- Chartjs 2 scaling lots of data points
- Display multiple chart.js charts using for loop in Django template