Develop Reference

Removing legend from chart.js Radar chart

I am using the Radar chart from Chart.js and I want to hide the legend(label) I did this:
new Chart("myChart", {
type: "radar",
data: data,
options: {
legend:{
display: false,
},
}
});
But is not working for some reasons also checked those:
Removing legend on charts with chart.js v2
Removing legend on charts with chart.js v2
I'm doing the same but not working

As described in the migration guide (https://www.chartjs.org/docs/master/getting-started/v3-migration.html#specific-changes) the legend has been moved to the plugins namespace so you will need to put it like so:
new Chart("myChart", {
type: "radar",
data: data,
options: {
plugins: {
legend: {
display: false,
},
}
}
});

Chartjs - Changing legend as a line with pointsyle of circle?

const myLineChart = new Chart(viewsCount, {
type: 'line',
data: lineChartStats.data,
options: {
elements: {
line: {
tension: 0 // disables bezier curves
},
point: {
pointStyle: 'line'
}
},
legend: {
display: true,
position: "top",
align: "start",
labels: {
boxHeight: 3
usePointStyle : true,
}
}
}
Chartjs - Changing legend as a line with pointsyle of circle? What can I do to style the legend I'm using latest cdn of chartjs

Please read the migration guide to chart.js version 3, it has some.breaking changes for example legend config has been moved to the plugins section so you will have to do options: { plugins: { legend: {} } }
After that it should work, otherwise they have an example online where you can look at to see what's different https://www.chartjs.org/docs/latest/samples/legend/point-style.html

HighCharts: Bar columns don't reach x-Axis on drill up

I am struggling with a HighChart/HighStock problem. I have created a JSFiddle to explain my problem! When the user uses a drill down on one of the bar colums, the y-axis may shrink which causes the x-axis to get higher. This is no problem, but when the user goes back to the overview through a drill up, the previous x-axis length is implemented for the bar columns, while the x-axis gets lower. I can't find anything in the documentation to help my problem and I haven't found a similar problem.
The drilldown which I am using:
drilldown: {
drillUpButton: {
relativeTo: 'spacingBox',
position: {
y: 0,
x: 0
},
theme: {
fill: 'white',
'stroke-width': 1,
stroke: 'silver',
r: 0,
states: {
hover: {
fill: '#D2D2D2'
},
select: {
stroke: '#039',
fill: '#D2D2D2'
}
}
}
},
series: [{"data":......}]
}
Could someone please help me adjust the code so that on the drill-up event the bar columns are re-configured to reach the x-axis

It looks like it is a bug with drilldown animation which appears only when a navigator is enabled. Reported here.
Should work without the animation:
drilldown: {
animation: false,
example: http://jsfiddle.net/3e3xqv7e/47/
In general, I think a navigator was not meant to work with drilldowns, so making it work correctly might be tricky. An option series.showInLegend works, though, except the min/max of the navigator are changed after drillup - so you need to set it properly.
drillup: function (e) {
this.navigator.xAxis.setExtremes(0, 4, true, false);
/* this.navigator.xAxis.update({
min: 0,
max: 4
}, true);*/
}
example: http://jsfiddle.net/c1nqpz7d/2/

Highcharts: Only animate pie size with donut graph / prevent innersize animation

Fiddle: http://jsfiddle.net/jakelauer/ZENuS/
Highcharts JS call:
$(function () {
$('div').highcharts({
chart: {
backgroundColor: 'rgba(0,0,0,0)',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
width: 500,
height: 500,
margin: [0, 0, 0, 0]
},
title: {
text: null
},
plotOptions: {
pie: {
minSize: 0,
size: 500,
animation: {
duration: 5000,
easing: 'linear'
}
}
},
series: [{
type: 'pie',
innerSize: 486,
data: [1]
}]
});
});
As you can see in the fiddle, while the graph grows, the thickness of the line animates as well as the percentage of the circle it takes up. I'd like the line to stay the same thickness the whole time, and only change how much of the circle it fills. Is this possible?

The Highcharts API only provides options to calibrate the duration and easing of this animation, as you've already seen. The default "scaling" animation into the charts final height/width and thickness of its "donut" cannot be altered. You either have no animation (animation: false) or this "scaling" animation with control over the duration and easing. Like I said, these are the limitations that exist within the Highcharts API; I cannot speak to the feasibility of coming up with some magical workaround via the jQuery UI or any other framework.
In summary:
no?

Unfortunately this option is not possible, but you can request your proposition on http://highcharts.uservoice.com/

Highcharts bar and scatter series not lining up

I'm trying to create a chart using highcharts that includes both a column series and a scatter series with a custom point marker. The series will contain slightly different sets of data, but will overlap for the most part and will always have the same x-axis values.
I've set it up, but the problem is that it's not lining up perfectly. Some of the scatter series' points are shifted one or two pixels to the left of the corresponding bar.
Any ideas about how to fix this?
{
chart: {
animation: false
},
xAxis: {
tickInterval: 1
},
series: [{
type: "column",
borderWidth: 0,
pointWidth: 20,
name: "col"
},
{
type: "scatter",
states: { hover: { enabled: false } },
marker: { symbol: 'url(symbol.png)' }
}]
}
And here's a screenshot of what's happening:

Indeed it looks like a bug, also with standard markers, so I've decided to report it to our developers https://github.com/highslide-software/highcharts.com/issues/1843