We Keep Coding

Chartjs - destroy() does nothing

I've got a problem with chartJS. I'm calling a function to create a new chart. The creation works, but I would like to destroy any previous charts, so that I get a new one when calling a function.
This is my code at the moment:
var chartID;
function addData(chartType,data) {
for (var i = 0; i < data.length; i++) {
dataLabels.push(data[i][0]);
dataPoints.push(data[i][1]);
//console.log(data[i][1]);
}
if(chartID){
console.log('destroy');
chartID.destroy();
}
var ctx = document.getElementById('chart01').getContext('2d');
chartID = new Chart(ctx, {
type: chartType,
data: {
labels: dataLabels,
datasets: [{
label: 'Labels',
data: dataPoints,
backgroundColor: '#333'
}]
},
options: {
maintainAspectRatio: false,
aspectRatio: 1
}
});
}

Even I had the same issue earlier. I simply added a condition to check the chart variable is empty or not.
if(chartID != null){
chartID.destroy();
}
Include this at the top of the function. It'll work fine as you are declaring chartID globally. This way you don't need to redeclare the chart again.

Try this:
const chartCanvas = document.getElementById('myChart');
if( window.lineChart != undefined){
window.lineChart.destroy();
}
window.lineChart = new Chart(chartCanvas,{
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [
{
label: 'Cases',
data: [23,42,22,45,56,77,33,22,46,77,32,44],
fill: false,
// backgroundColor: 'red',
borderColor: ['rgb(255, 255, 0)'],
lineTension: 0.2,
borderWidth: 1.5
}
]
},
options:{
title: {
display: true,
text: "Temperature variation",
fontFamily: 'Arial',
fontSize: 16
},
legend: {
display: true,
position: "right",
labels: {
boxWidth:10
}
},
//stacked - start with 0 as minimum value for y-axis
scales:{
yAxes: [{
stacked: true,
gridLines:{
display: true,
color: '#FFFFFF',
lineWidth: 1,
zeroLineColor: 'blue',
zeroLineWidth: 2,
drawBorder: false // this to remove the ghost line that appears
// when you add zeroLine x-axis
}
}],
xAxes: [{
gridLines:{
display: true,
zeroLineColor: 'blue',
zeroLineWidth: 1,
color: 'transparent'
}
}]
}
}
});
----------------- Added code sample above ------------------
I had some issues with ChartJs. Somehow, it created a new chart with the previous chart still in the canvas which shows up when you hover.
This worked for me:
if( window.chartID!= undefined){
window.chartID.destroy();
}
chartID = new Chart(ctx, {...});

I am creating multiple charts on click.
but before creating chart I just destroy any previous charts
so , thats how it looks
var chartStatus
// on one onclick
if (chartStatus) { chartStatus.destroy(); }
chartStatus = new Chart(document.getElementById("co2Chart"), co2Config);
// on another onclick
if (chartStatus) { chartStatus.destroy(); }
chartStatus = new Chart(document.getElementById("tempChart"), tempConfig);

Set chart options when printing and add a footer

So I'm relatively new to highcharts, but I'd like to be able to take a chart and when we set it to print, which i've made the only available option, have the graphic be resized larger, increase the spacingBottom or maybe change the plot size, essentially i need to make space on the bottom and then add a label in this space.
I've figured out how to do the resize, and add the label with the events beforePrint() and afterPrint(), but the changing of the spacing on the bottom still eludes me. I've searched through the questions here, but all seem to be targeted at exporting, which I also tried, believing they were related, and they might be? I tried using the exporting.chartOptions, but that only seems to affect exporting and does nothing when we choose to print.
Thanks for any direction or help you can give.
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
events: {
beforePrint: function() {
this.resetParms = [this.chartWidth, this.chartHeight, false];
this.setSize(600,400,false);
/*eventually if I ever get this to work this is how I'd add the text.*/
//this.myText = this.renderer.text('this is a test',10,350 ).add();
},
afterPrint: function() {
this.setSize.apply(this,this.resetParms);
/*if(this.myText) {
this.myText.destroy();
}*/
Highcharts.charts.forEach(function (chart) {
if (chart !== undefined) {
chart.reflow();
}
});
}
}
},
title: {
text: 'Hours'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of Hours'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
exporting:{
buttons: {
contextButton:{
menuItems: null,
onclick: function () {
this.print();
}
}
}
},
series: [{
name: 'PY Admin',
data: [5, 3, 4, 7, 2,3,4,5,6,7,8,12],
color: '#85C1E9',
stack:'lyear'
}]
});
});
http://jsfiddle.net/cajmrn/jkv6jbh0/3/

Have you tried to update bottomSpacing property with the Chart.update() function on the beforePrint event? If yes, and it did not work, use update without redraw (second argument to false) and redraw chart without animation:
this.update({
chart: {
spacingBottom: 200
}
}, false);
this.redraw(false);
You could also, instead of setting spacing, set a new chart height minus the spacing you want to apply.
API Reference:
http://api.highcharts.com/highcharts/Chart.update
http://api.highcharts.com/highcharts/Chart.redraw
http://api.highcharts.com/highcharts/chart.spacingBottom
Examples:
http://jsfiddle.net/20r1z3kg/ - updating spacing
http://jsfiddle.net/xp0m4nbh/ - changing chart height with setSize()

How to show No Data Available Message in highcharts

Can we show a message using highcharts.When the data is not available? we have to show a message Example : No Data Available. If we have data hide : No Data Available message . in highcharts dynamically
Highcharts.chart('container', {
chart: {
type: 'bubble',
plotBorderWidth: 0,
zoomType: 'xy'
},
});

Include no-data-to-display.js file in your page. It comes bundled with highcharts. You can get it here otherwise: https://code.highcharts.com/modules/no-data-to-display.js
Default message is "No data to display". If you would like to modify it, you can do this:
Highcharts.setOptions({
lang: {
noData: 'Personalized no data message'
}
});

You can use Highcharts Chart Renderer
Here's an example in JSFiddle
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: []
}, function(chart) { // on complete
chart.renderer.text('No Data Available', 140, 120)
.css({
color: '#4572A7',
fontSize: '16px'
})
.add();
});

Some of these other answers seem kind of crazy... here's a super basic solution I wanted to share:
Highcharts.setOptions({lang: {noData: "Your custom message"}})
var chart = Highcharts.chart('container', {
series: [{
data: []
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/no-data-to-display.js"></script>
<div id="container" style="height: 250px"></div>
Hope this helps someone

Based on your comment (if we have data still showing no data available message so,can we hide in highcharts if we have data).I think you are using fustaki's solution and don't want to use no-data-to-display.js module. Yes there is problem as mentioned .You can still use the same code by modifying it i.e add condition inside continuing function to check if series is empty or not, based on this render message.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: []
}, function(chart) { // on complete
if (chart.series.length < 1) { // check series is empty
chart.renderer.text('No Data Available', 140, 120)
.css({
color: '#4572A7',
fontSize: '16px'
})
.add();
}
});
Fiddle demo

For me with latest version it works like this:
const Highcharts = require('highcharts');
import NoDataToDisplay from 'highcharts/modules/no-data-to-display';
NoDataToDisplay(Highcharts);
Highcharts.setOptions({
lang: {
noData: 'No data is available in the chart'
}
});

With the current version (v7.1.2) and connected no-data-to-display module (v7.1.2) you can show your 'no data' message when you create a chart object as Patrik said by setting lang.noData option.
To be able to change this message after the chart is created you need to call method
yourChartObject.showNoData('you new message')

<script src="https://code.highcharts.com/modules/no-data-to-display.js"></script>
Highcharts.chart('container', {
lang: {
noData: "No data found"
},
noData: {
style: {
fontWeight: 'bold',
fontSize: '15px'
}
},
.
.
});

and then after series you should add:
lang: {
noData: 'Nessun dato presente'
},
noData: {
style: {
fontWeight: 'bold',
fontSize: '15px',
color: '#303030'
}
},
and it will work just fine

force Highcharts redraw animation when changing graph type

I have a bunch of graphs that by default, come out as line graphs. I've added buttons to the side of my graph to allow the user to change it to a pie, bar, areaspline, or back to line.
When the user clicks the button, it runs this function:
function change_graph_type(moduleNumber, type) {
graph_type = type;
var chart = $('#graph' + moduleNumber).highcharts();
for ( i=0;i<chart.series.length;i++ ) {
chart.series[i].update({
type : graph_type
});
//chart.redraw(); //I've tried adding this here to no avail...
}
}
The code changes each series from e.g. - line to bar, or bar to areaspline, but I cannot figure out how to get the "animation" when the user toggles over to that new graph type, so it only runs the very first time the user generates the chart.

i tried many ways but there is no such function which fires animation after redraw
so created this below quick and dirty method which might help
http://jsfiddle.net/msekpj8m/
$(function() {
var chartOptions = {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
showEmpty: false
},
chart: {
type: 'column'
},
yAxis: {
showEmpty: false
},
series: [{
allowPointSelect: true,
data: [ // use names for display in pie data labels
['January', 29.9],
['February', 71.5],
['March', 106.4],
['April', 129.2],
['May', 144.0],
['June', 176.0],
['July', 135.6],
['August', 148.5], {
name: 'September',
y: 216.4,
selected: true,
sliced: true
},
['October', 194.1],
['November', 95.6],
['December', 54.4]
],
marker: {
enabled: false
},
showInLegend: true
}]
};
var container = $('#container');
container.highcharts(chartOptions);
// Set type
$.each(['line', 'column', 'spline', 'area', 'areaspline', 'scatter', 'pie'], function(i, type) {
$('#' + type).click(function() {
container.highcharts().destroy();
chartOptions.chart.type = type;
container.highcharts(chartOptions);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
<button id="column" style="margin-left: 2em">Column</button>
<button id="line">Line</button>
<button id="spline">Spline</button>
<button id="area">Area</button>
<button id="areaspline">Areaspline</button>
<button id="scatter">Scatter</button>
<button id="pie">Pie</button>

Highcharts min y-axis value

Is it possible to set a min y-axis value when the series values are the same?
For example:
http://jsfiddle.net/6hyfk/1/
I would like to see 0.00019 as y-axis value.
If i change it to:
series: [{
data: [0.00019,0.00020,0.00019,0.00019]
}]
it looks a lot better.

So the answer largely depends on your data. If for example, you know your values are all positive, setting a yAxis min helps your data display a bit better. You know your data better than I, so I'd look at the yAxis settings and see what you can change to get a better result, but for example, this is a JSFiddle that sets a minimum value:
$(function () {
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
tickLength: 20
},
yAxis: {
min: 0
},
series: [{
data: [0.00019,0.00019,0.00019,0.00019]
}]
});
});
http://jsfiddle.net/gTG2z/

You can manually set the min and max on the X axis.
yAxis:{
min: 0,
max: .001
},
http://jsfiddle.net/6hyfk/2/

If you know what range is in your series, you can set accordingly minRange, so Highcharts will render more ticks as expected. For example: http://jsfiddle.net/Fusher/6hyfk/3/ Good thing about minRange is that it will work also for another values like that: http://jsfiddle.net/Fusher/6hyfk/5/

Probably,you don't need to hardcode min,max values.Do calculation for min and max and set to y Axis as shown below,
$(function () {
yMin = Math.min.apply(Math,data); // Find Min
yMax = Math.max.apply(Math,data); //Find Max
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
},
yAxis: {
min: yMin,
max: yMax
},
series: [{
data: data //Array of values
}]
});
});