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.
Related
I am trying to add basic interactivity to my AMCHARTS 5 labels. Take this chart as an example:
I need to be able to click on the names at the left of the chart. That is actually yAxis because I use an inverted chart.
In the function that creates the series, I placed this code:
series.columns.template.events.once("click", function(ev) {
console.log("Clicked on a column", ev.target);
});
And it makes my bars to be clickable. I don't know how to refer to the labels on the left.
Labels as interactive elements in amCharts 5 are tricky. Basically, it's super hard to determine hover/click over just text because it's impossible to completely eradicate antialising, and the actual colored area is super tiny.
Therefore, if we need tooltip to be interactive - have a hover tooltip or handle click events - we need to add a background to it.
The background does not necessarily have to be visible: we can just set its fillOpacity: 0 to make it completely transparent.
Source: Labels – amCharts 5 Documentation
After the declaration and initialization of your yAxis, you can put this piece of code:
yAxis.get("renderer").labels.template.setup = target => {
target.setAll({
cursorOverStyle: "pointer",
background: am5.Rectangle.new(root, {
fill: am5.color(0x000000),
fillOpacity: 0
})
});
};
yAxis.get("renderer").labels.template.events.on("click", e => {
console.log(e.target.dataItem.dataContext.category);
});
Full example:
am5.ready(() => {
let root = am5.Root.new("chartdiv");
let chart = root.container.children.push(am5xy.XYChart.new(root, {}));
let data = [{
category: "Category 1",
value: 10
}, {
category: "Category 2",
value: 20
}, {
category: "Category 3",
value: 15
}];
let yAxis = chart.yAxes.push(am5xy.CategoryAxis.new(root, {
categoryField: "category",
renderer: am5xy.AxisRendererY.new(root, {
inversed: true,
cellStartLocation: 0.1,
cellEndLocation: 0.9
})
}));
yAxis.data.setAll(data);
yAxis.get("renderer").labels.template.setup = target => {
target.setAll({
cursorOverStyle: "pointer",
background: am5.Rectangle.new(root, {
fill: am5.color(0x000000),
fillOpacity: 0
})
});
};
yAxis.get("renderer").labels.template.events.on("click", e => {
console.log(e.target.dataItem.dataContext.category);
});
let xAxis = chart.xAxes.push(am5xy.ValueAxis.new(root, {
min: 0,
renderer: am5xy.AxisRendererX.new(root, {})
}));
let series = chart.series.push(am5xy.ColumnSeries.new(root, {
name: "Series",
xAxis: xAxis,
yAxis: yAxis,
valueXField: "value",
categoryYField: "category"
}));
series.data.setAll(data);
});
#chartdiv {
width: 100%;
height: 350px;
}
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<div id="chartdiv"></div>
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'm creating a pie chart using nvd3 and angular-nvd3. I've got my legend displayed but it's in a row across the top.
I'd like to display it in a column down the left side.
I found http://embed.plnkr.co/TJqjjkHaD2S0VjsGmN3c/preview but when I use the options found in the .js file then all that does is change the look of the legend, not the placement.
The css file is empty and there doesn't seem to be inline css in the html. So I'm unsure how they placed the position of the legend on the right in a column.
I do see legendPosition: 'right' but when I use legendPosition: 'left' then the entire pie chart disappears.
So at the least how do I display in a column, and it would be great if I could change it to the left.
Options object:
$scope.patientsChart = {
chart: {
type: 'pieChart',
height: 500,
x: function (d) {
var PatientStatuses = ["Unknown", "Green- Healthy", "Yellow - Fair", "Red - Unhealthy"];
return PatientStatuses[d.Key -1];
},
y: function (d) { return d.Value.length; },
showLabels: true,
duration: 500,
labelThreshold: 0.01,
labelSunbeamLayout: true,
showLegend: false,
legend: {
margin: {
top: 5,
right: 35,
bottom: 5,
left: 0
}
},
pie: {
dispatch: {
//elementClick: function (e) { console.log(e) }
}
},
color: function (d) {
var colors = ['#4066b9', '#009446', '#eba323', '#ee2726'];
return colors[d.Key - 1];
}
}
};
Directive for angular-nvd3:
<nvd3 options="FEV1Chart" data="patients"></nvd3>
If you want to rotateLabels in xAxis just add "rotateLabels: -45"
For example,
xAxis: {
axisLabel: 'Hours',
axisLabelDistance: 20,
showMaxMin: false,
rotateLabels: -45
},
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'm trying to generate a bar chart with jqplot. All of my values are floating numbers as below:
var s1 = [17.1, 18.2];
var s2 = [50.2, 53];
var s3 = [93.9, 93];
var s4 = [34.1, 34];
But it's rounding them to integers.
Here is the working example: http://jsfiddle.net/JkBKs/
How can I fix this?
try this,it works
axes:
{
xaxis:{
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
},
yaxis: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
min: 0 ,
tickOptions: {
formatString: '%.1f'
}
}
},
please see the ‘formatString’ content
seriesDefaults: {
renderer:$.jqplot.BarRenderer,
// Show point labels to the right ('e'ast) of each bar.
// edgeTolerance of -15 allows labels flow outside the grid
// up to 15 pixels. If they flow out more than that, they
// will be hidden.
pointLabels: { show: true, location: 'e', edgeTolerance: -15, formatString: '%.1f' },
// Rotate the bar shadow as if bar is lit from top right.
shadowAngle: 135,
// Here's where we tell the chart it is oriented horizontally.
rendererOptions: {
barDirection: 'horizontal'
}
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer
}
}