Develop Reference

how to draw Line chart using chart.js and datalabels should be shown

In the above image I will not able to show the datalabels on my dots where tooltips are shown. Instead of tooltips I want only values shown there and my code is in this. I will not get any idea for how to show datalabels on my line chart dots.
This is my script by which I make the line chart accordingly to the database values.
$('canvas.LineChart').each(function(cnvindx, cnvobj) {
var proc_id = $(cnvobj).data('proc_id');
var dcharry = [];
var labelChartArr = [];
var ctxs = cnvobj;
var dataChart = {
datasets: [],
labels: []
};
var optionsChart = {
title: {
display: true,
text: "Offered Call's Hourly",
position: 'top'
},
legend: {
display: true,
position: 'top',
align: 'start',
},
tooltips: {
enabled: false
},
plugins: {
datalabels: {
anchor: 'end',
align: 'end',
labels: {
value: {
color: 'blue'
}
}
}
}
};
var myLineChart = new Chart(ctxs, {
type: 'line',
data: dataChart,
options: optionsChart
});
myLineChart.data.datasets[0] = { };
myLineChart.data.labels = [];
myLineChart.update();
if(msg.myLineChart != undefined) {
myLineChart.data.datasets[0].data = [];
myLineChart.data.datasets[0].label = ["Offered Call's"];
myLineChart.data.datasets[0].fill = [false];
myLineChart.data.datasets[0].borderColor = [Offered_Call_COLOR];
myLineChart.data.datasets[0].backgroundColor = [];
$.each(msg.multiplebarchart, function(indx, hourData) {
//setting line data
myLineChart.data.datasets[0].data.push(
hourData['Offered_Call']);
//setting X axis label
myLineChart.data.labels.push(hourData['HOUR1']);
//setting background color
myLineChart.data.datasets[0].backgroundColor.push(
Offered_Call_COLOR);
});
myLineChart.update();
myLineChart.render({
duration: 500,
lazy: false,
});
}
});

Since your config aint working I assume you are using chart.js V3 in which case you put the options in the wrong spot, you are placing them in the V2 spots.
If you put it like this it will work:
options: {
plugins: {
tooltip: {
enabled: false
}
}
}
For all changes between V2 and V3 you can read the migration guide

Apexcharts cursor pointer

I used apexcharts.js for making chartbar on js. So i want to change cursor to pointer. help please! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
my-code!
var options = {
series: [{
name: 'series1',
data: [60, 85, 75, 120, 100, 109, 97]
}],
toolbar: {
show: false,
},
chart: {
height: 350,
type: 'area',
fontFamily: 'Proxima Nova',
toolbar: {
show: false
},
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth'
},
xaxis: {
categories: ["Янв", "Фев", "Март", "Апр", "Май", "Июнь", "Июль", "Авг", "Сен", "Окт", "Ноя", "Дек"]
},
tooltip: {
x: {
format: 'dd/MM/yy HH:mm'
},
},
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

I had encountered the same problem. I will present you two solutions:
1st method : Found on Github
You can set the cursor to point with:
chart: {
...
events: {
dataPointMouseEnter: function(event) {
event.path[0].style.cursor = "pointer";
}
}
}
See more details in this github link : https://github.com/apexcharts/apexcharts.js/issues/1466
2nd method : My own method
You can target the class name of the apexchart component via Inspector, then at the code level add the following property to this class :
cursor: pointer
Example :
// Change cursor on hover
.apexcharts-pie {
cursor: pointer;
}

I had same problem. Here is two solutions:
chart: {
width: 320,
type: ...,
events: {
dataPointMouseEnter: function(event) {
event.target.style.cursor = "pointer";
// or
event.fromElement.style.cursor = "pointer";
}
},
}

How to display different tooltip based on data values in ChartJS v2?

I’m using ChartJs, to display a Line chart and I’m trying to do 2 things :
The first one is to display different colors based on the tooltip’s value. Highest value vs Medium value
The second one is to display a different tooltip if the tooltips value is the lowest. Minimun value
I’ve tried to use a custom plugins to do this, but It didn’t work
This is the code I've managed to do so far :
Chart.plugins.register({
beforeRender: function(chart) {
if (chart.config.options.showAllTooltips) {
chart.pluginTooltips = [];
chart.config.data.datasets.forEach(function(dataset, i) {
chart.getDatasetMeta(i).data.forEach(function(sector, j) {
console.log(j, sector);
chart.pluginTooltips.push(
new Chart.Tooltip(
{
_chart: chart.chart,
_chartInstance: chart,
_data: chart.data,
_options: chart.options.tooltips,
_active: [sector],
},
chart
)
);
});
});
// turn off normal tooltips
chart.options.tooltips.enabled = false;
}
},
afterDraw: function(chart, easing) {
if (chart.config.options.showAllTooltips) {
if (!chart.allTooltipsOnce) {
if (easing !== 1) return;
chart.allTooltipsOnce = true;
}
// turn on tooltips
chart.options.tooltips.enabled = true;
Chart.helpers.each(chart.pluginTooltips, function(tooltip) {
tooltip.initialize();
tooltip._options.bodyFontFamily = "Visby";
// Change color based on value
tooltip._options.bodyFontColor = '#FEB122';
// Change tooltip's html if minimun value of dataset
// Values .datapoints[0].value
// console.log(tooltip._model);
tooltip._options.displayColors = false;
tooltip._options.bodyFontSize = tooltip._chart.height * 0.05;
tooltip._options.yPadding = 0;
tooltip._options.xPadding = 0;
tooltip.update();
tooltip.pivot();
tooltip.transition(easing).draw();
});
chart.options.tooltips.enabled = false;
}
}
});
let canvas = document.getElementById("myLineChart");
Chart.defaults.global.defaultFontFamily = "Visby";
const ctx = canvas.getContext('2d');
const labels = JSON.parse(ctx.canvas.dataset.dates);
const prices = JSON.parse(ctx.canvas.dataset.prices);
const myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: "Prix du billet",
data: prices,
backgroundColor: [
'rgba(0, 0, 0, 0)',
],
borderColor: [
'#F2F2F2',
],
pointBackgroundColor:
'#FEB122',
pointBorderColor:
'#FEB122',
borderWidth: 3,
}]
},
options: {
showAllTooltips: true, // call plugin we created
responsive: true,
cutoutPercentage: 60,
legend: {
position: "bottom"
},
animation: {
animateScale: true,
animateRotate: true
},
tooltips: {
enabled: false,
backgroundColor:"rgba(0,0,0,0)",
callbacks: {
title: function(tooltipItems, data) {
return "";
},
label: function(tooltipItem, data) {
var datasetLabel = "";
var label = data.labels[tooltipItem.index];
return data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] + '€';
},
labelColor: function(tooltipItem, data) {
// console.log(data);
}
}
},
legend: {
display: false
},
layout: {
padding: {
left: 32,
right: 32,
top: 32,
bottom: 32
}
},
scales: {
xAxes: [{
gridLines: {
display: false,
drawBorder: false,
},
}],
yAxes: [{
display: false
}]
}
}
});
How could I make this work ?

I've managed to do that by using the plugin Chartjs Datalabels.
And using the scriptable colors options.

how to remove tooltip and dataset in CanvasJS?

I use CanvasJS. Whenever the chart contains multiple dataSeries, it is recommended to represent each dataSeries in a legend(in jsfiddel ANS1,ANS2 is legend name) and hovers on a dataPoint or dataSeries, a toolTip appears with information about the dataPoint and dataSeries. when i click legend each then hide the data set and remove graph bar but not on hover tooltip.
1. 1st Image is correct because 2 tooltip and 2 dataset
when i click ANC1 it hide but tooltip still show.
2. 2nd Image is incorrect because still 2 tooltip and 1 dataset
My Code in
jsfiddle
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "title"
},
axisX:{
title: "xxxxxxxxxx",
labelAngle: 135,
labelFontSize: 23
},
axisY:{
title:"Number of Services"
},
axisY2: {
title: "Number of Eligible Couple",
titleFontSize: 25,
},
toolTip: {
enabled: true,
shared: true },
animationEnabled: true,
legend:{
horizontalAlign: "center", // left, center ,right
verticalAlign: "top", // top, center, bottom
cursor:"pointer",
itemclick: function(e) {
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
}
else
{
e.dataSeries.visible = true;
}
chart.render();
}
},
data: [
{
type: "column",
name: "ANC1",
showInLegend: "true",
visible: true,
dataPoints: [{label:"ROY2",x:0,y:36},{label:"ROY3",x:1,y:36}]
},
{
type: "column",
name: "ANC2",
showInLegend: "true",
visible: true,
dataPoints: [{label:"ROY2",x:0,y:56},{label:"ROY3",x:1,y:36}]
}
]
});
chart.render();

You can set up a custom tooltip https://canvasjs.com/docs/charts/chart-options/tooltip/content-formatter/
Code for your case:
var chart = new CanvasJS.Chart("chartContainer",
{
toolTip: {
enabled: true,
shared: true,
contentFormatter: function(e){
var str = "";
for (var i = 0; i < e.entries.length; i++){
if(e.entries[i].dataSeries.visible){
var temp = (e.entries[i].dataSeries.name + ': '+ e.entries[i].dataPoint.y);
str = str.concat(temp, '<br>');
}
};
return (str);
}
},
...

How to show and hide legends in google chart

Could anyone let me know which is the best method to show/hide line legends (If using a checkbox for changing the visibility).
I should be having maximum 7 legends in line chart.
My code is below:
function DrawGraph(chartsdata, title, charttype) {
//debugger;
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(DrawChart);
function DrawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', '');
data.addColumn('number', '');
try {
var data = google.visualization.arrayToDataTable(chartsdata);
}
catch (e) {
//debugger;
//document.writeln(e);
}
var optionsBar = {
title: title,
isStacked: true,
hAxis: {
type: "datetime",
showTextEvery: 1,
ticks: [2016,2017,2018,2019,2020,2021,2022,2023]
},
legend: {
position: 'bottom',
textStyle: { fontSize: 12 }
}
};
var optionsLine = {
title: title,
//width: 500,
seriesType: 'line',
legend: {
position: 'bottom',
textStyle: { fontSize: 11 }
}
};
if (charttype == "line") {
var chart = new google.visualization.LineChart(document.getElementById('chartdiv'));
chart.draw(data, optionsLine);
}
else {
var chart = new google.visualization.ColumnChart(document.getElementById('chartdiv'));
chart.draw(data, optionsBar);
}
}
}

Toggle the legend by using none/bottom as the position:
legend: {position: 'none'} //to hide