We Keep Coding

ChartJS different border color for legend

I need to set a different border color for the legend than the actual chart; whenever I add border color to the chart data, it gets applied to both legend and chart. And I couldn't find any options for setting different border colors for the legend in documentation
Here's a screenshot of what I'm trying to achieve, any idea?:

The only way I have found to do this and some other customisation on the legend is to implement the legend item interface.
The accepted answer here in combination with the legend item interface should be a good start.
Here's a jsfiddle that I made from that answer, but updated for chartjs 3.7.1. The main part to focus on is this:
options: {
plugins: {
legend: {
labels: {
usePointStyle: true,
generateLabels: function(chart) {
var data = chart.data;
if (data.labels.length && data.datasets.length) {
return data.labels.map(function(label, i) {
var meta = chart.getDatasetMeta(0);
var ds = data.datasets[0];
return {
text: label,
fillStyle: ds.backgroundColor[i],
strokeStyle: ds.legendOutline[i],
lineWidth: ds.borderWidth,
hidden: isNaN(ds.data[i]) || meta.data[i].hidden,
index: i
};
});
} else {
return [];
}
}
}
}
}
strokeStyle is the outline property, and I've made a field in the dataset called legendOutline. legendOutline and the data from the dataset are both referenced with i, so the legendOutline[i] points to the label representing data[i]

Chart.js - doughnut show active segment tooltip (on click of external button)

// ignore this comment - required to post the following jsfiddle.net link!
Please see https://jsfiddle.net/68bf25vh/
If you click a doughnut segment, the corresponding tooltip displays, which is the correct functionality.
The problem is triggering this desired functionality when a user clicks one of the buttons below the doughnut. E.g. when a user clicks the 'Trigger Segment 1 Click' button. The tooltip should display above segment 1 (just as if the user had clicked segment 1).
A bonus would be having the tooltip displaying above segment 1 initially too, but not essential.
Any help much appreciated :)
Please note
Using Chart.js v 2.5.0. I've read a few articles suggesting to use a showTooltip() method, e.g. chart.showTooltip([chart.segments[0]], true); Unfortunately this method does not exist in this version.
Found this https://stackoverflow.com/a/37989832, but this displays all tooltips. Just want the tooltip of the active (current) segment to display.

You can use the following function to display corresponding tooltip, when clicked on an external button :
function showTooltip(chart, index) {
var segment = chart.getDatasetMeta(0).data[index];
chart.tooltip._active = [segment];
chart.tooltip.update();
chart.draw();
}
When calling the function, pass chart-instance and button-index as the first and second argument respectively.
BONUS :
To initially show the tooltip of segment-1, add the following config in your chart options :
animation: {
onComplete: function() {
if (!isChartRendered) {
showTooltip(myChart, 0);
isChartRendered = true;
}
}
}
* declare a variable named isChartRendered in global-scope and set it to false
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩
var isChartRendered = false;
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['Segment 1', 'Segment 2', 'Segment 3'],
datasets: [{
data: [10, 10, 10]
}]
},
options: {
events: ['click'],
cutoutPercentage: 70,
legend: {
display: false
},
tooltips: {
displayColors: false
},
onClick: function(evt, elements) {},
// BONUS: show segment 1 tooltip initially
animation: {
onComplete: function() {
if (!isChartRendered) {
showTooltip(myChart, 0);
isChartRendered = true;
}
}
}
}
});
$(document).on('click', 'button', function() {
var $this = $(this),
index = $this.index();
showTooltip(myChart, index);
});
function showTooltip(chart, index) {
var segment = chart.getDatasetMeta(0).data[index];
chart.tooltip._active = [segment];
chart.tooltip.update();
chart.draw();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width:400px;height:400px;">
<canvas id="myChart"></canvas>
</div>
<div style="margin-top:50px;">
<button>Trigger Segment 1 Click</button>
<button>Trigger Segment 2 Click</button>
<button>Trigger Segment 3 Click</button>
</div>

For Chart.js 3 the GRUNT`s solution needs some modifications:
chart.tooltip.setActiveElements([{datasetIndex: 0, index: index}]);
chart.tooltip.update();
chart.render();
If you want to change also the segment style:
const activeSegment = chart.getDatasetMeta(0).data[index];
chart.updateHoverStyle([{element: activeSegment, datasetIndex: 0}], null, true);

Hide Highcharts labels on resize and enlarge the chart

I have a funnel chart that I need to extend through the whole container div when the page gets resized (and becomes thin)
I tried to programmatically hide the label on resize but the chart would still remain in a side of the div
https://jsfiddle.net/MicheleC/9oh3ttss/7/
function toogle_chart_label(chart, series, show){
var opt = chart.series[series].options;
if(typeof show == 'undefined') {
opt.dataLabels.enabled = !opt.dataLabels.enabled;
} else {
opt.dataLabels.enabled = show
}
}
function funnel_labels_adjust(){
if($('#container').width() < 300){
toogle_chart_label(funnel_chart, 0, false)
} else {
toogle_chart_label(funnel_chart, 0, true)
}
}
$( window ).resize(function() {
funnel_labels_adjust()
});

In Highcharts 5 there is a new property responsive. It allows you to specify the chart options which will be applied under some conditions.
In your case, you want to to disable data labels when the chart has width below 300.
responsive: {
rules: [{
condition: {
maxWidth: 300
},
chartOptions: {
plotOptions: {
funnel: {
dataLabels: {
enabled: false
}
}
}
}
}]
}
example: https://jsfiddle.net/9oh3ttss/8/
If you dont want to use that feature, you need to use dynamic methods like series.update()
series[0].update({
dataLabels: {enabled: false / true}
});

Bar chart looks bad before change data

Hi here I set the data to the bar chart:
setDatosBarra: function(data){ //
var self = this;
var horaEstim = 0;
var horaReal = 0;
var horaTotal = 0;
if(data[0].horas_estim != '-'){
horaEstim = data[0].horas_estim;
}
if(data[0].horas_real != '-'){
horaReal = data[0].horas_real;
}
if(data[0].total_horas != '-'){
horaTotal = data[0].total_horas;
}
var datosBarra =[{data: [[0,horaEstim]], color: "#691717"}, {data: [[1,horaReal]], color: "#173D69"},{data: [[2,horaTotal]], color: "#176469"}];
self.flotLinea(datosBarra);
},
When all is ready I send the data to self.flotBar;
This is the flotBar function:
flotBar: function(datos){
var self = this;
if(datos == 0){
var data = [["SIN REGISTROS",0]];
}else{
var data = datos;
}
function getTooltip(label, x, y) {
return "<strong style='font-size:18px;'> " + y + " </strong> horas";
}
var plot = $.plot("#placeholder",data, {
series: {
bars: {
show: true,
barWidth: 0.3,
align: "center",
lineWidth: 0,
fill:.75
}
},
xaxis: {
ticks: [[0,"Horas estimadas"],[1,"Horas reales"],[2,"Total horas"]],
mode: "categories",
tickLength: 0
},
grid: {
hoverable: true,
clickable: true
},
tooltip: true,
tooltipOpts : {
content : getTooltip,
defaultTheme : false
},
});
},
Ok , and this is my problem, example:
I select a option in an dropDown:
And the bar chart looks like this:
If I select other option in the dropDown:
The bar chart looks like this:
And if I select again the first option "Correcion de errores", the bar chart looks like this:
So.. always the first time that I show the bar chart looks like in the first image , with the numbers in the line, but If I select other option looks good.
I need see good the bar chart always and no just when I select other option.
I'm using flot javascript library.
How can I fix this? sorry by my english

The main issue with the question as stated is that we do not have all the code. In essence, you should either provide all the code, or shrink down the problem to something that shows the issue and then, well, provide all the code. As far as I can guess, you have some other code somewhere else that is drawing the initial chart. The second and subsequent times? Drawn properly. To support my assertion, notice that in your initial image the captions for the x-axis tick markers (ditto the bars themselves) are right aligned not centered.
For fun, I wrote a quick jsFiddle that showed how to switch datasets using a button (much as you want to do with the drop-down) and redraw the chart:
drawChart = function(index) {
var chartData = getDataForChart(rawData[index]);
if (chart) {
chart.setData(chartData);
chart.draw();
}
else {
chart = $.plot("#barchart", chartData, chartOptions);
}
},
switchDataset = function() {
datasetIndex = (datasetIndex + 1) % datasetCount;
drawChart(datasetIndex);
};
$("#switchButton").on("click", switchDataset);
Because I decided to load new data into the chart rather than redraw it all from scratch (to be honest I saw no real difference either way), it meant that I had to pre-calculate the maximum value for the y-axis:
calcValueMax = function() {
var max = 0;
rawData.forEach(function(values) {
values.forEach(function(value) {
if (value > max) {
max = value;
}
});
});
return max;
},
// other code
chartOptions.yaxis.max = calcValueMax();
Hope that helps.

External variable in the title of the chart

I'm working in a school project and i'm getting the data from a php file to show in the gauge.
I using this javascript code to update de chart every second:
function requestData() {
$.getJSON('values.php', function(data) {
var new_value = data;
var point = $('#ta').highcharts().series[0].points[0];
point.update(new_value);
setTimeout(requestData, 500)
}
)
}
With this code i'm able to update the chart, the problem is, i need to show the numeric value too, in another part of the chart. Here is what i try:
yAxis: {
title: {
text: '<div id="tav">'+new_value+'V</div>',
useHTML: true,
y: 80
}
When i put "new_value" the chart stop working and i can't see nothing. If a leave the "new_value" from this part of the chart it works perfectly.
Can someone help me?
Thanks

To update y-axis title you have to use the code like:
$('#container').highcharts().yAxis[0].update({
title:{
text:"My text"
}
});
I have created a wroking demo of how to dynamically update y-axis title on button click: DEMO
JS code section to dynamically update chart title on a button click:
var chart = $('#container').highcharts();
$('#my_btn').click(function(){
//alert('hey');
chart.yAxis[0].update({
title:{
text:"My text"
}
});
alert('Y-axis title changed to "My text" !');
});

The problem is that new_value is localy defined. You could define the variable as an object's property:
var obj = {};
function requestData() {
$.getJSON('values.php', function(data) {
obj.new_value = data;
var point = $('#ta').highcharts().series[0].points[0];
point.update(new_value);
setTimeout(requestData, 500)
}
)
}
and
yAxis: {
title: {
text: '<div id="tav">'+obj.new_value+'V</div>',
useHTML: true,
y: 80
}

Use indeed Axis.setTitle() method, see:
function requestData() {
$.getJSON('values.php', function (data) {
var new_value = data;
var chart = $('#ta').highcharts()
var point = chart.series[0].points[0];
var yAxis = chart.yAxis[0];
yAxis.setTitle({text: new_value });
point.update(new_value);
setTimeout(requestData, 500);
})
}