I am implementing charts in our sites, Here using chartkick plugin. But some customization is not supported by chartkick, But we can use chartjs, highchart and google chart by using import options indirectly. chartkick is support the above charts in its configuration.
So we choose chartjs, Here we are customizing legend and tooltip. Found the options in chartjs but unable to implement in chartkick helper.
Need your help guys, here i am facing issue like unable to mention the customization options in rails tag. Because found customization options by using javascript, but i need to add this options inside rails tag<%= %>
These are things have used for implementation. chart js version 2.9.4 added chartkick by added gem 'chartkick' to gemfile added chartkick, require Chart.bundle
using chartjs inside chartkick by use adapter option to the chartkick helper
<%= area_chart data, library: {
legend: {
position: 'right',
labels: {
boxWidth: 15,
boxHeight: 15
}
}
}, id: 'consult-chart', adapter: 'chartjs' %>
Found the options for customizing legend and tooltip. Added customization in legend is -> added few extra label to normal label Added customization in tooltip is -> changed background color and added extra text. The below one is the options for above customization by use of direct chart js implementaion.
<script>
var ctx = document.getElementById("myChart-total");
var myLegendContainer = document.getElementById("legends");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["0", "5", "10", "15", "20", "25"],
datasets: [
{
label: "Revenue",
lineTension: 0,
backgroundColor : "#e969e5",
borderColor : "#d93da9",
//backgroundColor: "#d93da9",
data: [0, 10, 23, 25, 60, 70]
}
]
},
options: {
layout: {
padding: {
bottom: 100
}
},
legend: {
position: 'right',
labels : {
generateLabels: function(chart){
var data = chart.data;
var legends = Array.isArray(data.datasets) ? data.datasets.map(function(dataset, i) {
return {
text: dataset.label,
fillStyle: (!Array.isArray(dataset.backgroundColor) ? dataset.backgroundColor : dataset.backgroundColor[0]),
hidden: !chart.isDatasetVisible(i),
lineCap: dataset.borderCapStyle,
lineDash: dataset.borderDash,
lineDashOffset: dataset.borderDashOffset,
lineJoin: dataset.borderJoinStyle,
lineWidth: dataset.borderWidth,
strokeStyle: dataset.borderColor,
pointStyle: dataset.pointStyle,
// Below is extra data used for toggling the datasets
datasetIndex: i
};
}, this) : [];
var title_o = {
text: 'Past 6 months: $826.53',
strokeStyle: 'transparent',
fillStyle: 'transparent',
lineWidth: 0
};
var title_tw = {
text: 'Month-to-date: $67.91',
strokeStyle: 'transparent',
fillStyle: 'transparent',
lineWidth: 0
};
var title_th = {
text: 'Past 7 days: $26.53',
strokeStyle: 'transparent',
fillStyle: 'transparent',
lineWidth: 0
};
legends.push(title_o);
legends.push(title_tw);
legends.push(title_th);
return legends;
},
boxWidth: 15,
boxHeight: 20
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true
},
}],
xAxes: [{
gridLines: {
color: "rgba(0, 0, 0, 0)",
}
}]
},
tooltips: {
yAlign: 'bottom',
callbacks: {
title: function(tooltipItem, data) {
return "September "+data['labels'][tooltipItem[0]['index']];
},
label: function(tooltipItem, data) {
return "$"+data['datasets'][0]['data'][tooltipItem['index']];
},
},
backgroundColor: 'grey'
}
}
});
Here how can add the options for legend and tooltip
For legend customization, this option should be mention inside rails tag =>
legend: {
position: 'right',
labels : {
generateLabels: function(chart){
var data = chart.data;
var legends = Array.isArray(data.datasets) ? data.datasets.map(function(dataset, i) {
return {
text: dataset.label,
fillStyle: (!Array.isArray(dataset.backgroundColor) ? dataset.backgroundColor : dataset.backgroundColor[0]),
hidden: !chart.isDatasetVisible(i),
lineCap: dataset.borderCapStyle,
lineDash: dataset.borderDash,
lineDashOffset: dataset.borderDashOffset,
lineJoin: dataset.borderJoinStyle,
lineWidth: dataset.borderWidth,
strokeStyle: dataset.borderColor,
pointStyle: dataset.pointStyle,
datasetIndex: i
};
}, this) : [];
var title_o = {
text: 'Past 6 months: $826.53',
strokeStyle: 'transparent',
fillStyle: 'transparent',
lineWidth: 0
};
legends.push(title_o);
return legends;
},
boxWidth: 15,
boxHeight: 20
}
},
For tooltip customization, this option should be mention inside rails tag =>
tooltips: {
yAlign: 'bottom',
callbacks: {
title: function(tooltipItem, data) {
return "September "+data['labels'][tooltipItem[0]['index']];
},
label: function(tooltipItem, data) {
return "$"+data['datasets'][0]['data'][tooltipItem['index']];
},
},
backgroundColor: 'grey'
}
==========================================-------------------=========================
But how i need to mention the above options in rails tag, because rails tag no supporting javascript function.
I added inside the quotes, but its not working, added like as below
<%= area_chart data, library: {
layout: {
padding: {
bottom: 1
}
},
legend: {
position: 'right',
labels: {
boxWidth: 15,
boxHeight: 15,
generateLabels: 'function(chart){
var data = chart.data;
var legends = Array.isArray(data.datasets) ? data.datasets.map(function(dataset, i) {
return {
text: dataset.label,
fillStyle: (!Array.isArray(dataset.backgroundColor) ? dataset.backgroundColor : dataset.backgroundColor[0]),
hidden: !chart.isDatasetVisible(i),
lineCap: dataset.borderCapStyle,
lineDash: dataset.borderDash,
lineDashOffset: dataset.borderDashOffset,
lineJoin: dataset.borderJoinStyle,
lineWidth: dataset.borderWidth,
strokeStyle: dataset.borderColor,
pointStyle: dataset.pointStyle,
// Below is extra data used for toggling the datasets
datasetIndex: i
};
}, this) : [];
var title_o = {
text: "Past 6 months: $826.53",
strokeStyle: "transparent",
fillStyle: "transparent",
lineWidth: 0
};
legends.push(title_o);
return legends;
}',
}
},
tooltips: {
yAlign: 'bottom',
callbacks: "{
title: function(tooltipItem, data) {
return data['labels'][tooltipItem[0]['index']];
},
label: function(tooltipItem, data) {
return data['datasets'][0]['data'][tooltipItem['index']];
},
}",
backgroundColor: 'grey'
}
}, id: 'consult-chart', adapter: 'chartjs', width: "500px", height: "341px" %>
Please help me here, how to implement these customization options?