score:1
Accepted answer
you can use a custom label callback for this to get the correct data for the tooltip:
<!doctype html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.4/chart.js"></script>
<body>
<canvas id="mychart" style="width:100%;max-width:700px"></canvas>
<script>
var xyvalues = [{
x: "march",
y: 15
},
];
new chart("mychart", {
type: "scatter",
data: {
datasets: [{
pointradius: 4,
pointbackgroundcolor: "rgb(0,0,255)",
data: xyvalues
}]
},
options: {
tooltips: {
callbacks: {
label: (ttitem, data) => (`(${data.datasets[ttitem.datasetindex].data[ttitem.index].x}, ${data.datasets[ttitem.datasetindex].data[ttitem.index].y})`)
}
},
legend: {
display: false
},
scales: {
xaxes: [{
type: 'category',
labels: ['january', 'february', 'march', 'april', 'may', 'june']
}],
yaxes: [{
ticks: {
min: 6,
max: 16
}
}],
}
}
});
</script>
</body>
</html>
edit:
you can also choose to update to the latest major version of chart.js (version 3), there this behaviour seems to be fixed by default.
there are some major breaking changes in v3 like how scales are defined, now all scales are their own object for example with the scale id being the object key. for all changes you can read the migration guide
<!doctype html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.6.0/chart.js"></script>
<body>
<canvas id="mychart" style="width:100%;max-width:700px"></canvas>
<script>
var xyvalues = [{
x: "march",
y: 15
},
];
new chart("mychart", {
type: "scatter",
data: {
datasets: [{
pointradius: 4,
pointbackgroundcolor: "rgb(0,0,255)",
data: xyvalues
}]
},
options: {
plugins: {
legend: {
display: false
}
},
scales: {
x: {
type: 'category',
labels: ['january', 'february', 'march', 'april', 'may', 'june']
},
y: {
min: 6,
max: 16
},
}
}
});
</script>
</body>
</html>
score:0
just give january and february a null
value.
<!doctype html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.4/chart.js"></script>
<body>
<canvas id="mychart" style="width:100%;max-width:700px"></canvas>
<script>
var xyvalues = [
null, null,
{x:"march", y:15},
];
new chart("mychart", {
type: "scatter",
data: {
datasets: [{
pointradius: 4,
pointbackgroundcolor: "rgb(0,0,255)",
data: xyvalues
}]
},
options: {
legend: {display: false},
scales: {
xaxes: [{ type: 'category', labels: ['january', 'february', 'march', 'april', 'may', 'june'] }],
yaxes: [{ticks: {min: 6, max:16}}],
}
}
});
</script>
</body>
</html>
Source: stackoverflow.com
Related Query
- Chart Js change text label orientation on Ox axis
- chartjs datalabels change font and color of text displaying inside pie chart
- ChartJs line chart - display permanent icon above some data points with text on hover
- Chart.js change hover text
- How can I change the cursor on pie chart segment hover in ChartJS 3?
- How to change text colour of specific labels of axis in Chart JS?
- VueJS + Chartjs - Chart only renders after code change
- Line chart Change background color of shaded region on hover (Chartjs)
- how to change chart JS title text on change input field?
- how to display text information on hover in chart js?
- Chart JS - How to display Label over Slices instead of text on hover
- Angular PrimeNG Chart Module: Customize hover text
- How to add text inside the doughnut chart using Chart.js?
- How to clear a chart from a canvas so that hover events cannot be triggered?
- Chart Js Change Label orientation on x-Axis for Line Charts
- chartjs show dot point on hover over line chart
- Detecting hover events over parts of a chart using Chart.js
- How to add text in centre of the doughnut chart using Chart.js?
- Change point size and color on hover in chartjs
- Changing cursor to pointer on Chart.js bar chart when hover (mousemove) event is disabled?
- Chart js. How to change font styles for "labels" array?
- Chart js. How to align text by the center of the tooltip?
- How do I change the 'months' language displayed on the date axis in Chart JS?
- Chart.js tooltip hover customization for mixed chart
- Draw a horizontal and vertical line on mouse hover in chart js
- Can I specify a different font size for each row of text in Chart Title?
- How to change the cursor to a pointer when I hover over a bar in a ChartJS bar chart?
- Chartjs - show elements in all datasets on hover using bar chart
- Chart Js Show the old data on mouse hover
- Angular 2 chart - change point radius
More Query from same tag
- How to add labels on top of the chart bar with Chart.js 2
- How to write a query to get the number of times a choice is selected by users
- Chart.js line graph change x axis seperation
- Chart.js display x axis labels ON ticks in bar chart, not between
- Chart.js : straight lines and curves lines in the same graph
- ChartJS pie chart with simple parsing options doesn't render, only works when set as bar/line chart
- Handle X-axis label position in chart js
- Chart.js 2.0: How to change title of tooltip
- How to unregister chartjs-plugin-labels globally?
- How to set Custom tooltip event with Chartjs version 2.X
- ChartJS Draw grid line X-Axis and Y-Axis
- How to show data values in top of bar chart and line chart in chart.js 3
- I need a PHP query to grab data from the database and use in my bar charts for results
- Accessing data in an associative array in CodeIgniter 3
- Angular 6: chartjs value not updating with dynamic value update
- Displaying every nth label on the x-axis
- Is it possible to define data attributes for each dataset value in a Chart.js chart?
- How Can I Change the Y-axis labels to be shown as strings other than number in Chart.js?
- onAnimationComplete is executed before animation is done
- Can I set different fill color based on a given threshold in Chart.js?
- Chart.js render two charts on one page.
- Vue Chart.js -- can I give a line chart a default value for missing data?
- JavaScript critical error...Syntax Error (MVC 5) when passing array to Charts.js
- Example: Doughnut | Error: Uncaught ReferenceError: Utils is not defined
- Make Chart.js canvas responsive inside the resizeable div
- Styling problems with Chart.Js
- how to use chart.js in webpacker rails 6
- How to add gradient background to Line Chart [vue-chart.js]
- Loop datasets into chart.js?
- Print chart using chart js