Develop Reference

How to change the background color the chart area in high charts?

I'm using Highcharts JS. I want to change the colors of the line, the dots and background color of the area underneath the line.
I tried many ways but none of them worked. I've create a project on JsFiddle so that you can see
the code and change it if you have the solution to help me solve this problem.
Sample on JSFiddle:
line Chart using highcharts
My code:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'charts',
type: 'area',
backgroundColor: '#4b0e26',
style: {
fontFamily: 'CairoFont',
color: "#ffffff",
}
},
xAxis: {
categories: [
'يناير',
'فبراير',
'مارس',
'إبريل',
'مايو',
'يوليو',
'يونيو',
'أغسطس',
'سبتمبر',
'أكتوبر',
'نوفمبر',
'ديسمبر',
],
reversed: true,
lineColor: '#fff',
tickColor: '#fff',
labels: {
style: {
color: '#fff',
fontFamily: 'CairoFont'
}
},
},
yAxis: {
title: {
text: false,
useHTML: Highcharts.hasBidiBug,
},
opposite: true,
lineColor: '#fff',
tickColor: '#fff',
labels: {
style: {
color: '#fff',
fontFamily: 'CairoFont'
}
},
},
title: {
text: 'الطلاب الجدد',
useHTML: Highcharts.hasBidiBug,
style:{
color: '#fff',
}
},
legend: {
enabled: false
},
tooltip: {
useHTML: true,
backgroundColor: '#FCFFC5',
borderColor: 'black',
borderRadius: 10,
borderWidth: 3,
},
credits: {
enabled: false
},
series: [{
showInLegend: false,
data: [
[0, 29.9],
[1, 71.5],
[3, 106.4],
[4, 300.4],
[5, 400.4],
[6, 20.4],
[7, 40.4],
[8, 120.4],
[9, 50.4],
[10, 230.4],
[11, 110.4],
[12, 500.4],
],
}]
});

If you want to adjust the color for this series, you can use https://api.highcharts.com/highcharts/plotOptions.series.color. So you would just set your series like:
series: [{
showInLegend: false,
data: [
[0, 29.9],
[1, 71.5],
[3, 106.4],
[4, 300.4],
[5, 400.4],
[6, 20.4],
[7, 40.4],
[8, 120.4],
[9, 50.4],
[10, 230.4],
[11, 110.4],
[12, 500.4],
],
color: '#ff0000'
}]
See a working demo at https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-color-specific/ from their documentation or https://jsfiddle.net/pkcrt5q2/ for your specific example.
Additionally, you can set this as a global option as described at https://api.highcharts.com/highcharts/colors.
Highcharts.setOptions({
colors: ['#ff0000']
});
Working demo: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/chart/colors/

Google Charts how do I hide the value = 0

Is it possible to hide null values on hAxis?
or better to set pointSize: 0 when the point is on the hAxis
if yes, which Option?
I tried a ComboChart
function drawChart() {
var jsonData = $.ajax({
url: "getData.php",
dataType: "json",
async: false
}).responseText;
var options = {
width: 2500,
height: 1080,
legend: { position: 'top', maxLines: 10 },
bar: { groupWidth: '75%' },
isStacked: true,
title: '15-tägiger Wettbewerb, 17.01.2018 - 06.02.2018',
titlePosition: 'out',
colors: ['green', '#e6693e', 'blue'],
backgroundColor: 'white',
tooltip: { trigger: 'selection' },
legend: { position: 'none' },
vAxis: { viewWindowMode:'explicit', viewWindow: { max: 130}},
seriesType: 'bars',
series: { 3: {type: 'scatter', pointSize: 30, color: 'black'},
4: {type: 'scatter', pointSize: 30, color: 'black'},
5: {type: 'scatter', pointSize: 30, color: 'black'},
6: {type: 'scatter', pointSize: 30, color: 'black'},
},
pointShape: 'star',
};
var data = new google.visualization.DataTable(jsonData);
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}

just a little confused, title says hide 0, but question says hide null...
but if you use null instead of 0, then the star will not appear...
['', 2, 4, null, null, null, null, null], // <-- star will NOT appear
['', 2, 4, 0, 0, 0, 0, 0], // <-- star will appear at the bottom
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var jsonData = [
['', 2, 4, null, null, null, null, null],
['', 2, 4, 0, 0, 0, 0, 0],
];
var options = {
//width: 2500,
//height: 1080,
legend: { position: 'top', maxLines: 10 },
bar: { groupWidth: '75%' },
isStacked: true,
title: '15-tägiger Wettbewerb, 17.01.2018 - 06.02.2018',
titlePosition: 'out',
colors: ['green', '#e6693e', 'blue'],
backgroundColor: 'white',
tooltip: { trigger: 'selection' },
legend: { position: 'none' },
vAxis: { viewWindowMode:'explicit', viewWindow: { max: 130}},
seriesType: 'bars',
series: {
3: {type: 'scatter', pointSize: 30, color: 'black'},
4: {type: 'scatter', pointSize: 30, color: 'black'},
5: {type: 'scatter', pointSize: 30, color: 'black'},
6: {type: 'scatter', pointSize: 30, color: 'black'},
},
pointShape: 'star',
};
var data = google.visualization.arrayToDataTable(jsonData, true);
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
EDIT
you can use a data view with calculated columns to change zero to null,
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var jsonData = [
['', 2, 4, null, null, null, null, null],
['', 2, 4, 0, 0, 0, 0, 0],
];
var options = {
//width: 2500,
//height: 1080,
legend: { position: 'top', maxLines: 10 },
bar: { groupWidth: '75%' },
isStacked: true,
title: '15-tägiger Wettbewerb, 17.01.2018 - 06.02.2018',
titlePosition: 'out',
colors: ['green', '#e6693e', 'blue'],
backgroundColor: 'white',
tooltip: { trigger: 'selection' },
legend: { position: 'none' },
vAxis: { viewWindowMode:'explicit', viewWindow: { max: 130}},
seriesType: 'bars',
series: {
3: {type: 'scatter', pointSize: 30, color: 'black'},
4: {type: 'scatter', pointSize: 30, color: 'black'},
5: {type: 'scatter', pointSize: 30, color: 'black'},
6: {type: 'scatter', pointSize: 30, color: 'black'},
},
pointShape: 'star',
};
var data = google.visualization.arrayToDataTable(jsonData, true);
// build view
var view = new google.visualization.DataView(data);
var viewColumns = [];
$.each(new Array(data.getNumberOfColumns()), function (col) {
viewColumns.push({
calc: function (dt, row) {
var value = dt.getValue(row, col);
if (value === 0) {
value = null;
}
return value;
},
label: data.getColumnLabel(col),
type: data.getColumnType(col)
});
});
view.setColumns(viewColumns);
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
// draw view
chart.draw(view, options);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

How to have different colors for different value range in simple Google Line Charts?

Here is my JS Fiddle. From the values I have specified in the Y-Axis, 0, 10, 23, 17, 18 etc, I want the line from 0-10 to have a different color, 10-23 to have a different color, 23-17 a different color.
https://jsfiddle.net/pyvqcbou/
Here is my JS. I tried adding colors to various places but I was unable to do so. How do I go about it?
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', '');
data.addColumn('number', '');
data.addRows([
[0, 0], [1, 10], [2, 23], [3, 17], [4, 18], [5, 9],
]);
var options = {
height: 152,
legend: 'none',
baselineColor: '#fff',
gridlineColor: '#fff',
textPosition: 'none',
colors: ['#ff926c'],
dataOpacity: 0.7,
hAxis: {
textPosition: 'none'
},
vAxis: {
textPosition: 'none',
},
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}

use a style column, see following working snippet...
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', '');
data.addColumn('number', '');
data.addColumn({type: 'string', role: 'style'});
data.addRows([
[0, 0, 'red'], [1, 10, 'blue'], [2, 23, 'green'], [3, 17, 'orange'], [4, 18, 'purple'], [5, 9, 'black'],
]);
var options = {
height: 152,
legend: 'none',
baselineColor: '#fff',
gridlineColor: '#fff',
textPosition: 'none',
colors: ['#ff926c'],
dataOpacity: 0.7,
hAxis: {
textPosition: 'none'
},
vAxis: {
textPosition: 'none',
},
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

highchart - display value in xaxis as the value I get from the chart data as is without conversion

I wanted to get data and display the x value of it as is what I get is what I want to display, somethimes I dont know the data when the chart uploading (I get it after a while from the server)
the problem highchart display the value in the xaxis as datetime,
attached jsfiddle that in the xaxis I dont want any conversion I want to display the values as "08:00" "09:00" and so on..
https://jsfiddle.net/4scqnpy5/
Highchart convert it to 00:00:00:001 00:00:00:002 00:00:00:003
Highcharts.stockChart('container', {
scrollbar: {
barBackgroundColor: 'gray',
barBorderRadius: 7,
barBorderWidth: 0,
buttonBackgroundColor: 'gray',
buttonBorderWidth: 0,
buttonArrowColor: 'yellow',
buttonBorderRadius: 7,
rifleColor: 'yellow',
trackBackgroundColor: 'white',
trackBorderWidth: 1,
trackBorderColor: 'silver',
trackBorderRadius: 7
},
navigation: {
buttonOptions: {
enabled: false
}
},
navigator: {
enabled: false
},
rangeSelector: {
selected: 1
},
series: [{
name: 'hours',
data: [
["New York", 100],
["09:00", 200],
["Pariz", 300],
["1100", 150]
]
}]
});

I assume that's supposed to represent time? If so, you need to format the data into a Date object with Date.UTC()
Highcharts.stockChart('container', {
scrollbar: {
barBackgroundColor: 'gray',
barBorderRadius: 7,
barBorderWidth: 0,
buttonBackgroundColor: 'gray',
buttonBorderWidth: 0,
buttonArrowColor: 'yellow',
buttonBorderRadius: 7,
rifleColor: 'yellow',
trackBackgroundColor: 'white',
trackBorderWidth: 1,
trackBorderColor: 'silver',
trackBorderRadius: 7
},
navigation: {
buttonOptions: {
enabled: false
}
},
navigator: {
enabled: false
},
rangeSelector: {
selected: 1
},
series: [{
name: 'hours',
data: [
[Date.UTC(0, 0, 0, 8, 00), 100],
[Date.UTC(0, 0, 0, 9, 00), 200],
[Date.UTC(0, 0, 0, 10, 00), 300],
[Date.UTC(0, 0, 0, 11, 00), 150]
]
}]
});
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 900px; min-width: 600px"></div>

the solution is to use : chart.xAxis[0].setCategories
as following:
var objData2 = [30, 40, 50, 60, 70, 80, 90, 148.5, 216.4, 194.1, 95.6, 54.4];
Highcharts.stockChart(wrappedResult[0], options, function(chart){
$scope._chart = chart;
$scope._chart.xAxis[0].setCategories(['One', 'Two', 'Three', 'four', 'five' , 'six', 'seven']);
//test
$scope._chart.addSeries({
color: 'red',
data: _.cloneDeep(objData2)
});
});

Google Charts Tooltips-Annotations

My google chart will have 3-4 data series, and when the user puts their mouse on the chart I would like the tooltip to show each series data point in the tooltip at the same time including the date (haxis).
Does anyone know how I might add the tooltips the way I described above?
var data = google.visualization.arrayToDataTable([
['Year', 'Data1', 'Data2', 'Data3'],
[new Date(2001, 01, 01), 30, 20, 1000],
[new Date(2002, 01, 01), 70, 20, 1000],
...
var options = {
colors: ['#ffffff', '#ffffff', '#ffffff'],
hAxis: {
slantedText: true,
slantedTextAngle: 45,
gridlines: {
color: 'f2f2f2'
}
},
vAxis: {
minValue: 0,
gridlines: {
color: 'f2f2f2'
}
},
series: {
0: {
type: 'area',
areaOpacity: 0.25,
lineWidth: 1.5
},
1: {
type: 'line',
lineWidth: 1.5
},
2: {
type: 'line',
lineWidth: 1.5,
targetAxisIndex: 1
},
},

Add the following configuration option...
aggregationTarget: 'category'