score:15
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();
});
score:0
<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'
}
},
.
.
});
score:0
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
score:2
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')
score:4
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'
}
});
score:8
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
score:11
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
score:18
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'
}
});
Source: stackoverflow.com
Related Query
- How to show No Data Available Message in highcharts
- How to display No Data Available Message in highcharts
- Highcharts How to Show Loading Animation At Set Data
- How To Show All Data Labels For Datetime Axis In Highcharts
- How can I show all Timeline Highcharts data without any overlapping?
- Highcharts legend how to show multiple charts data category?
- How to show values in Highcharts tooltip other than x and y when data points are too high?
- How to show a custom message box at last point, Highcharts
- How can i load external json data in highcharts to show the bar chart
- How to show horizontal line instead of a dot for a single value data in highcharts
- React: How to show correct date and plot data as Months in Highcharts
- How to have multiple highcharts with different series data in vuejs without repeating code
- how to show mutipal dynamic highcharts based on json data
- how do i link my sqlite(PDO) databse data to highcharts code
- How to show data point in Box Plot highcharts
- How to show real time HighCharts Line Graph data which is receiving by an API?
- I want show NO DATA AVAILABLE with backside grid lines in highcharts
- How to show equally spaced axis for datetime for billing cycle related data on highcharts
- If series data array is null show message no data available
- Show message "Loading..." in Highcharts on loading data from array
- How to make highcharts default to 0 for missing data
- How do I dynamically change a data point in Highcharts using JavaScript
- How to make stacked column graph to show total data value on top
- how to set dynamic data in highcharts
- How to pass json data to highcharts series?
- Using Highcharts and displaying a message over or on the chart when there is no data
- Highcharts : Venn Diagram how to show total and union numbers?
- Highcharts how to use JavaScript variable as series data source?
- How to get multiple data series into Highcharts
- How to pass custom data into Highcharts graph click event
More Query from same tag
- Highcharts: show stack total in shared tooltip, via footerFormat property
- HighCharts yAxis too much space around big numbers
- Parsing to milliseconds changes date
- how can I make highstock flags stay put
- SpagoBI: create a dynamic chart using SpagoBI
- Highcharts - column chart with drilldown to waterfall
- Disable legend item click in a Highchart defined as JSON
- Update High Charts every Minute?
- Highstock/Highchart scatter points in combined graph
- Overlap datalabels line chart highcharts
- Properly align columns in highcharts
- a better way to color many individual markers in a scatter chart?
- Change color of different points in same series Highcharts
- Highcharts 3D scatter points not showing names in tooltips
- Putting the Z-Coordinate in the Highcharts Tooltip
- How to select right chart for your data
- Highchart is not working on Google chrome
- Highcharts - change default opacity for series, without using RGBA?
- highMaps map disappears when options are updated in react
- Highcharts - Show tooltip on points click instead mouseover
- highcharts transform json data with Date.UTC
- Higstock add all series dynamically
- Adding Total Column to Highcharts column range
- Highcharts :: Codeigniter
- Highcharts Redrawing images based off of chart width
- Fixed bar width, tick interval in Highstock
- Synchronize multiple chart's x-axis
- highcharts-ng: Equivalent of $('#container').highcharts()
- Initialising npm Highcharts 7 heatmaps in Angular 6
- HIghcharts, button text undefined