I would like to customize the labels in chart.js, but don't seem to find the right way. Where do I need to put the styling options? What goes around it?
Is there a way to remove the Grid lines all together?
options: {
scale: {
gridLines: {
display: false
},
scaleLabel: {
fontColor: 'green',
fontSize: '24px',
fontFamily: "Montserrat"
},
ticks: {
maxTicksLimit: 1,
display: false,
},
}
},
I would expect the font color to change to green and get bigger, but it does not effect the font at all.
The same goes for the GridLines. I would expect that both vertical and horizontal lines would be removed, but the vertical Lines stay unaffected.
enter image description here
The radar chart uses a Linear Radial Axis. That documentation details all of the customization you have available for your chart axis.
Font
To configure your font as you have it above, you would want to have those settings on your options under the pointLabels property:
options: {
scale: {
pointLabels: {
fontColor: 'green',
fontSize: 24,
fontFamily: "Montserrat"
}
}
}
As a note, the fontSize property is supposed to be a number, not a string.
Angle Lines
There are two different settings for the axis lines (gridLines and angleLines). The angleLines are the lines that radiate out from the center of the chart and what you are wanting to additionally hide. To hide the angleLines, you would want to do the following:
options: {
scale: {
angleLines: {
display: false
}
}
}
Currently I have two graphs I'm rendering on a page, I'm using google's visualization Charts lib and due to page sizing issues the vAxes refuses to render some/most of the time.
If I give it enough space, it will render the axes fine, but if it's even slightly off, even when there's plenty of space for these bloody axes, they just refuse to render, I can't have that!
I looked into it and it seems to be rendering bunch of tags when it works and doesn't render when it doesn't work, which makes me think there ought to be some bull if-else "AI" that actively chooses to sabotage me! FS!
Has anyone had experience with Charts and managed to find a workaround on forcing the lib to render the vAxes regardless of what google "AI" wills? (Seriously, what happened to second law of robotics?! OBEY ME, SCUM!)
Sorry, I'm a bit irked atm.
Edit: Sorry, to provide the details, here's the js block rendering the charts:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the chart package.
google.charts.load('visualization', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var options = {
hAxis: {showTextEvery: 5},
vAxes: {
0: {textPosition: 'out',
viewWindowMode:'pretty',
viewWindow: {min:0},
gridlines: {color: 'transparent'},
},
1: { textPosition: 'out',
viewWindow: {min:0},
gridlines: {color: 'transparent'}
},
},
seriesType: 'bars',
series: {0: {targetAxisIndex:0, type: 'line'},
1:{targetAxisIndex:1},
2:{targetAxisIndex:1},
}
};
//Chart render
var data1 = new google.visualization.DataTable(<?=$jsonEventType?>);
var chart1 = new google.visualization.ComboChart(document.getElementById('chart_div1'));
chart1.draw(data1, options);
}
div element:< div id="chart_div1" style=" height: 100%;"> (it's within multiple other divs, but that's besides the point)
As you can tell it's a basic c-c-c-combo chart, the $jsonEventType doesn't matter i think but here it is:
string(661) "{"cols":[{"label":"Date","type":"string"},{"label":"To Audit","type":"number"},{"label":"Open","type":"number"},{"label":"Closed","type":"number"}],"rows":[{"c":[{"v":"05/07/2018"},{"v":437},{"v":0},{"v":8}]},{"c":[{"v":"12/07/2018"},{"v":419},{"v":0},{"v":21}]},{"c":[{"v":"19/07/2018"},{"v":401},{"v":56},{"v":36}]},{"c":[{"v":"26/07/2018"},{"v":385},{"v":0},{"v":20}]},{"c":[{"v":"02/08/2018"},{"v":369},{"v":0},{"v":12}]},{"c":[{"v":"09/08/2018"},{"v":357},{"v":0},{"v":25}]},{"c":[{"v":"16/08/2018"},{"v":348},{"v":0},{"v":18}]},{"c":[{"v":"23/08/2018"},{"v":336},{"v":0},{"v":14}]},{"c":[{"v":"30/08/2018"},{"v":316},{"v":0},{"v":13}]}]}"
you can use the chartArea config code to ensure there is enough room on either side of the chart.
by default, the chart will follow the size of the container,
but it does not entirely fill the container.
I like to use the chartArea option,
to stretch the chart to the height and width of the container,
and leave room on the edges for the axes and legend, etc...
chartArea: {
top: 32, // leave room on top for legend
left: 60, // for axis index 0
right: 60, // for axis index 1
bottom: 32, // for x-axis
height: '100%', // stretch height
width: '100%', // stretch width
},
height: '100%', // ensure fills height of container
width: '100%', // fills width of container
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable({"cols":[{"label":"Date","type":"string"},{"label":"To Audit","type":"number"},{"label":"Open","type":"number"},{"label":"Closed","type":"number"}],"rows":[{"c":[{"v":"05/07/2018"},{"v":437},{"v":0},{"v":8}]},{"c":[{"v":"12/07/2018"},{"v":419},{"v":0},{"v":21}]},{"c":[{"v":"19/07/2018"},{"v":401},{"v":56},{"v":36}]},{"c":[{"v":"26/07/2018"},{"v":385},{"v":0},{"v":20}]},{"c":[{"v":"02/08/2018"},{"v":369},{"v":0},{"v":12}]},{"c":[{"v":"09/08/2018"},{"v":357},{"v":0},{"v":25}]},{"c":[{"v":"16/08/2018"},{"v":348},{"v":0},{"v":18}]},{"c":[{"v":"23/08/2018"},{"v":336},{"v":0},{"v":14}]},{"c":[{"v":"30/08/2018"},{"v":316},{"v":0},{"v":13}]}]});
var options = {
chartArea: {
top: 32, // leave room on top for legend
left: 60, // for axis index 0
right: 60, // for axis index 1
bottom: 32, // for x-axis
height: '100%', // stretch height
width: '100%', // stretch width
},
height: '100%', // ensure fills height of container
width: '100%', // fills width of container
hAxis: {showTextEvery: 5},
vAxes: {
0: {
textPosition: 'out',
viewWindowMode:'pretty',
viewWindow: {min: 0},
gridlines: {color: 'transparent'},
},
1: {
textPosition: 'out',
viewWindow: {min: 0},
gridlines: {color: 'transparent'}
},
},
seriesType: 'bars',
series: {
0: {targetAxisIndex:0, type: 'line'},
1: {targetAxisIndex:1},
2: {targetAxisIndex:1},
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div1'));
chart.draw(data, options);
window.addEventListener('resize', function () {
chart.draw(data, options);
});
});
html, body {
height: 100%;
margin: 0px 0px 0px 0px;
overflow: hidden;
padding: 0px 0px 0px 0px;
}
#chart_div1 {
height: 100%;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div1"></div>
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/
I am using google bar chart and using following code.
var options = {
backgroundColor:'',
title: '',
chartArea: {width: '100%'},
bar: { groupWidth:15},
colors: ['#fff', '#fff'],
hAxis: {
title: '',
minValue: 0,
gridlines: {
color: '#fff'
},
baselineColor:'#fff',
textStyle:{
color:"#000"
}
},
legend: { position: 'none' },
vAxis: {
title: '',
textPosition:'none'
}
};
I am getting following output
First case:when number of bars are more.
Second case: when number of bars are less.
Third case: when there is only one bar, it is showing in center. I want to start bar from bottom means near x-axis. Following you can see screen shot.
I want to show constant space between 2 bars irrespective of number of bars.
any advice or suggestion in this case?
Using latest highcharts (3.0.7). We are trying to add text to the top of the chart on export. to do this I need to increase the spacingTop so that we do not overwrite any chart elements. This then causes the chart to become less high by that amount of spacingTop for a the same chart height. How can I get the current chart height and add X amount to it on export? I have tried:
exporting: {
sourceWidth: 400,
//sourceHeight: this.chartHeight,
//sourceHeight: this.chartHeight + 200,
scale: 1, //(default)
chartOptions: {
subtitle: null,
height: this.chartHeight + 200
}
}
This seems to be ignored. See this fiddle. This was just a test to see if I could do this at all. Seems like it should be straight forward. If I uncomment out the sourceHeight it still does not do what I expect - the chart is still 400px high. So it seems that this.chartHeight does not contain anything.
In the end this height change code is going to exist in a function we call:
chartMainLoc.exportChart({
type: 'image/jpeg',
sourceHeight: this.chartHeight + 200,
sourceWidth: this.chartWidth,
scale: 1
}, {
chart: {
events: {
load: function () {
this.renderer.text('Occupational Employment and Wage Rates (OES) for Multiple Occupations in Louisiana in 2012<br /> The graph below shows the annual occupational employment and annual wage data for Multiple Occupations in Louisiana in 2012.<br /> ', 5, 15).attr({
rotation: 0
}).css({
color: '#4572A7',
fontSize: '10px',
fontStyle: 'italic',
width: this.chartWidth
}).add();
this.renderer.rect(5, 5, this.chartWidth - 10, 60, 5).attr({
'stroke-width': 2,
stroke: 'black',
zIndex: 2
}).add();
}
},
spacingTop: 200,
shadow: false
}
})
Since I do not know the chart's height or width beforehand I have to get this value somehow.
You need to set chart optiosn with objects (chart / series etc) like in the example http://jsfiddle.net/GQUDJ/2/