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 dynamically add/change yAxis plotLines
- Highcharts - Tooltip width in styled mode
- Which one is better to represent an API fetched data in react js and please explain how to do that?
- Dynamically update tooltip date format highchart
- Is there any possible way to make Bar of Pie in Highcharts?
- Highcharts update grouped data point color
- Highcharts exporting button id
- Highcharts: add custom text bottom left, like credits?
- highcharts datalabel dynamic rotation as column height
- How do I know if currently displayed chart data is grouped?
- Highcharts stacked bar with datetime, not able to set start date
- Multiple plotLines using options in HighCharts
- Highchart map does not support IRS country code
- Rails can't find javascript file from gem
- Highcharts xAxis date issue on Safari or Chrome for Ipad
- LINQ that groups data and returns series for chart
- odd spacing between bars in Highcharts
- how to format flot char yaxis by value seconds in highcharts?
- Locking the zoom in on Mapview?
- how to show one more array in the tooltip using highchart?
- How to store highcharts compatible json array data in mongodb
- Combining Column charts and line charts with the same same data in the same container(Highcharts)
- Want Stacked column highchart to represent data in two column
- Highcharts: Maintain series visibility after chart reload
- Highstock Highcharts dates don't lineup
- unable to Add display data values on top of bar high chart
- Add data to a legend, with different format? Or should I use a label?
- Highchart/Highstock OHLC not showing previous Candlestick with live data
- Highcharts dim unselected bars color on hover
- How to plot the X axis data point for uneven tick interval at in Highcharts