I am using Chart JS 2.6.0. I am using a blue background for the chart with labels in white colour. However, when chart gets rendered on the screen, there is a black border across the labels, as shown here:
Is there a way to get rid of this border or if I can style the border itself and make it transparent or white somehow?
Update:
Adding the code for reference. I am setting font color and size within 'ticks' object of xAxes and yAxes:
const TYPE = 'horizontalBar';
let data = {
labels: ['National', 'Banner Groups'],
datasets: [{
backgroundColor: '#fff',
data: [10, 20]
}]
};
let options = {
showDatapoints: true,
scales: {
maintainAspectRatio: false,
responsive: true,
xAxes: [{
ticks: {
fontColor: '#fff',
fontSize: 15,
beginAtZero: true
},
gridLines: {
display: false
}
}],
yAxes: [{
ticks: {
fontColor: '#fff',
fontSize: 15,
fontStyle: 'bold'
},
gridLines: {
display: false
}
}]
},
legend: {
display: false
}
};
let cf: any = {
type: TYPE,
data: data,
options: options
};
I tried the jsfiddle in the 2nd comment to the original question. I do not see the black border at any browser window size. Is this perhaps browser specific? Or maybe even the fonts available?
The environments I tried:
Windows 10 Home
Firefox 54.0 (32-bit)
Edge
IE 11
Google Chrome
Fedora 24 4.11.6-101.fc24.x86_64
Firefox 54.0 (64-bit)
Google Chrome 59.0 (64-bit)
Android (Samsung Galaxy Prime)
Google Chrome
It looked correct in all of those, at all screen sizes.
Related
I have a scatter plot as shown below with code. How do I make the title area not take up this much space? Just to be clear, I don't mean the font size of the title, but the empty space the title area occupies.
var rstTrace = {
x: x_data,
y: y_data,
mode: 'markers',
type: 'scatter',
marker: {
size: 3,
color: chartMarkerColor
}
};
var rstLayout = {
height: 400,
title: {
text: 'My Title',
font: {
family: 'Tahoma',
size: 15
}
},
xaxis: {
showline: true,
zeroline: false,
linecolor: '#D3D3D3', // light gray
tickcolor: '#D3D3D3'
},
yaxis: {
showline: true,
zeroline: false,
linecolor: '#D3D3D3',
tickcolor: '#D3D3D3'
},
backgroundcolor: '#D3D3D3'
};
Plotly.newPlot('resultDiv', [rstTrace], rstLayout);
You can change the graph's top margin
https://plot.ly/javascript/setting-graph-size/#adjusting-height-width-and-margins
Example
var rstLayout = {
margin:{
t: 10
}
};
The top margin however accounts for all the space above the chart, so if you wish to move the title up or down so that it isn't centered, you could also use this workaround:
document.querySelector('.gtitle').setAttribute('y', 100)
The position of the text element is controlled by the attributes x and y. You can change y to whatever value you see fit to move the title down. Note that you'd need to make sure this runs after the svg is loaded in the page.
Bottom of highcharts rendered chart in pdf
I am attempting to render a highcharts chart inside a blade template and then pass the resulting view/html to DocRaptor in order to turn it into a pdf. The view is rendered with Laravel's View::make and then the render() function. Everything is working as expected except the rendered bars do not match up to the tick marks on the yAxis (horizontal).
I've included an image of what I'm referring to. In the image 2 of the bars (Saturn and Lexus) should be past the 1M tick and I would expect Acura to be further right towards the 1M tick mark. The image only contains the last 3 bars in the graph, but the same holds true for the series as whole.
Less relevent is that I've essentially split up the series data into small enough chunks such that the chart would fit on a page (hence the jQuery $.each()).
The code that produces the chart is below. The code inside the load and render functions are both executed as the document.write debug statements. Any help/ideas would be appreciated.
$("div[id^='Chart_chunk_count_']").each(function() {
var myChart = Highcharts.chart($(this).attr("id"), {
chart: {
borderWidth: 0,
events: {
load: function(event) {
document.write('In load event');
},
render: function(event) {
document.write('In render event');
}
},
height: j_audience_chart_chunks['metadata']['page'][$(this).data("chart-page")]['height'],
type: 'bar',
width: 650
},
credits: {
enabled: false
},
legend: {
enabled: false
},
plotOptions: {
bar: {
borderRadius: 3,
borderWidth: 0,
color: j_audience_chart_chunks['metadata']['count_chart']['color'],
pointWidth: 30,
turboThreshold: 0
},
series: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
/* allowOverlap: true, */
/* backgroundColor: '#FA9005', */
color: '#606060',
crop: false,
defer: false,
enabled: true,
format: '{point.y:,.0f}',
inside: true,
/* overflow: 'none', */
style: {
fontSize: "11px",
fontWeight: "normal",
textOutline: 'none'
}
}
}
},
title: {
text: (type == "index") ? "Index Against Profiled Audience" : "Audience Count"
},
tooltip: {
enabled: false
},
xAxis: {
categories: j_audience_chart_chunks['audience_data'][$(this).data("chart-page")]['categories'],
minorTickInterval: null,
title: {
text: null
}
},
yAxis: {
min: (type == 'count') ? 0 : -100,
max: j_audience_chart_chunks['metadata']['count_chart']['max'],
title: {
text: null
},
labels: {
/* format: '{point.y:,.0f}', */
overflow: 'justify'
/*
style: {
color: '#fa9005'
}
*/
}
},
series: j_audience_chart_chunks['audience_data'][$(this).data("chart-page")]['series']
});
});
What's happening is that the JavaScript finishes and DocRaptor/Prince begins building the PDF, but the default Highcharts animations haven't finished running. Disabling animations chart wide fixes this.
You need set chart.animation to false like:
chart: {
animation: false
}
Help me, please.
How to change the labels to the image (icon) in bar chart.js ?
I mean, change from this
change labels: "LifeWall_files/logo.png","Bodily Functions","Sleep"
to this
bottom icons
The easiest way to do this would be to get a font that includes these icons and then set the font family for the ticks
...
options: {
scales: {
xAxes: [{
ticks: {
fontFamily: 'FontAwesome'
}
}]
}
}
};
and then specify the appropriate character codes in your labels
labels: ["\uf24e", "\uf1b9", "\uf242", "\uf0fc", "\uf236"],
With the FontAwesome CSS, the above would give you
The Plugin Core API offers a range of hooks that may be used for performing custom code. You can use the afterDraw hook to draw images (icons) instead of tick labels directly on the canvas using CanvasRenderingContext2D.
You'll also have to instruct Chart.js not to display the default tick labels. This can be done through the following definition inside the chart options.
scales: {
xAxes: [{
ticks: {
display: false
}
}],
Further you need to define some padding at the bottom of the chart, otherwise you'll see only part of the images.
layout: {
padding: {
bottom: 30
}
},
Please have a look at the runnable code snippet below.
const labels = ['red vans', 'blue vans', 'green vans', 'gray vans'];
const images = ['https://i.stack.imgur.com/2RAv2.png', 'https://i.stack.imgur.com/Tq5DA.png', 'https://i.stack.imgur.com/3KRtW.png', 'https://i.stack.imgur.com/iLyVi.png'];
const values = [48, 56, 33, 44];
new Chart(document.getElementById("myChart"), {
type: "bar",
plugins: [{
afterDraw: chart => {
var ctx = chart.chart.ctx;
var xAxis = chart.scales['x-axis-0'];
var yAxis = chart.scales['y-axis-0'];
xAxis.ticks.forEach((value, index) => {
var x = xAxis.getPixelForTick(index);
var image = new Image();
image.src = images[index],
ctx.drawImage(image, x - 12, yAxis.bottom + 10);
});
}
}],
data: {
labels: labels,
datasets: [{
label: 'My Dataset',
data: values,
backgroundColor: ['red', 'blue', 'green', 'lightgray']
}]
},
options: {
responsive: true,
layout: {
padding: {
bottom: 30
}
},
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
ticks: {
display: false
}
}],
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="90"></canvas>
I am using jqplot for plotting piechart,bar and line chart. It is work fine in IE9>=. But it is not working in IE8. It gives me above error when I am using both piechart and bar chart. and it is showing error at piechart plugin at e.jqplot.PieRenderer'. After blocking this plugin bar chart works fine but not piecharts. Below is my code. Please suggest on this.
var optionsObj = {
title: 'Item wise stock',
animate: !$.jqplot.use_excanvas,
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: dates,
label: 'Item'
},
yaxis: {
tickOptions: { showMark: true, formatString: "%d" },
padMin: 0,
label: 'Stock',
angle: -30,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
labelOptions: { fontSize: '11px' }
}
},
grid: {
drawGridLines: true, // wether to draw lines across the grid or not.
gridLineColor: '#cccccc', // *Color of the grid lines.
background: '#e6e6e6', // CSS color spec for background color of grid.
borderColor: '#999999', // CSS color spec for border around grid.
borderWidth: 2.0, // pixel width of border around grid.
shadow: true, // draw a shadow for grid.
shadowAngle: 45, // angle of the shadow. Clockwise from x axis.
shadowOffset: 1.5, // offset from the line of the shadow.
shadowWidth: 3, // width of the stroke for the shadow.
shadowDepth: 3, // Number of strokes to make when drawing shadow.
// Each stroke offset by shadowOffset from the last.
shadowAlpha: 0.07, // Opacity of the shadow
renderer: $.jqplot.CanvasGridRenderer, // renderer to use to draw the grid.
rendererOptions: {} // options to pass to the renderer. Note, the default
// CanvasGridRenderer takes no additional options.
},
series: [
{ label: 'Bar', renderer: $.jqplot.BarRenderer },
{ label: 'Line', renderer: $.jqplot.LineRenderer, color: '#ef8c08' },
],
legend: {
show: true,
location: 'ne'
},
seriesDefaults: {
shadow: false,
rendererOptions: {
barPadding: 0,
barMargin: 10,
barWidth: 25,
highlightMouseDown: true
}
},
highlighter: {
show: true,
sizeAdjust: 7.5,
tooltipContentEditor: function (str, seriesIndex, pointIndex, jqPlot) {
return '<table class="jqplot-highlighter"><tr><td>Item:</td><td>' + data[pointIndex][0].toString() + '</td></tr> \
<tr><td>Stock:</td><td>' + data[pointIndex][1].toString() + '</td></tr></table>'
}
}
};
var plot2 = $.jqplot(location, values, optionsObj);
Include this tag in your html page:
<script type='text/javascript' src="excanvas.js"></script>
IE8 requires excanvas library to create canvas elements because IE8 doen't support canvas elements.
You can download the js file from here: Excanvas library
I am using jqplot charting library to draw the bar chart in my application.
I have used following code to draw the horizontal bar chart.
var plot = $.jqplot('chart', [dataSlices], {
seriesDefaults: {
shadow: false,
renderer: $.jqplot.BarRenderer,
pointLabels: { show: true, location: 'e', edgeTolerance: -55 },
rendererOptions: {
barDirection: 'horizontal',
barMargin: 5,
highlightMouseOver: false,
fillToZero: true
}
},
axesDefaults: {
},
axes: {
grid: {
drawBorder: false
},
xaxis: {
pad: 0,
tickOptions: {
show: true,
mark: 'cross',
thousandsSeparator: ',',
formatString: "%d"
},
numberTicks: null,
min: null,
max: null,
showTickMarks: true
},
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: yAxisLabels,
tickOptions: {
showMark: false,
showGridline: false
}
}
},
grid: {
gridLineColor: '#ffffff', /**/
borderColor: '#509790',
background: 'rgba(0,0,0,0)',
shadowWidth: 0,
borderWidth: 0,
shadow: false
},
series: [{ color: '#f39f02' }]
});
$.jqplot.thousandsSeparator = ',';
//$.jqplot.formatString = "%'d";
gridCanvas = $($('.jqplot-grid-canvas')[0])
seriesCanvas = $($('.jqplot-series-canvas')[0])
gridCanvas.detach();
seriesCanvas.after(gridCanvas);
plot.replot({ resetAxes: true });
I am getting the chart without grid lines.
Is there any idea, how to do this?
Call the following lines after replot, you will get the expected result
gridCanvas = $($(item + ' .jqplot-grid-canvas')[0])
seriesCanvas = $($(item + ' .jqplot-series-canvas')[0])
gridCanvas.detach();
seriesCanvas.after(gridCanvas);
I tried its working fine for me,.
GridLineColor set to white (#FFFFFF) explains why you aren't wiewing vertical lines.
BorderWidth set to 0 explains why you aren't viewing borders of your plot (drawn with a size of 0px)
If you doesn't need particular color and/or size of your grid (vertical lines and border) remove the grid part of your code.
If you need particular color and/or size choose carefully your values (#FFFFFF if your background if already white - or a borderWidth of 0px) :
grid: {
gridLineColor: '#FF0000',
borderColor: '#509790',
background: 'rgba(0,0,0,0)',
shadowWidth: 0,
borderWidth: 2,
shadow: false
},
Please see working example here (I have delete yAxisLabels and add fictional data in order to draw a plot)