I have scoured the amcharts4 docs to find this answer but could not. I have a PieChart with a legend. On slice clicks I apply a 'selected' state to the slice. However when the user hovers on the legend and mouse out from the legend that state is removed. I do not want this.
I want hoveringOut of the legend to have no effect on my PieChart slice state.
function createLegend({ chart, config }) {
const legend = new am4charts.Legend();
legend.position = 'right';
const markerTemplate = legend.markers.template;
markerTemplate.width = 10;
markerTemplate.height = 12;
legend.hoverable = false;
legend.labels.template.fontSize = 12;
legend.valueLabels.template.disabled = true;
legend.itemContainers.template.togglable = false;
chart.legend = legend;
}
Related
I have an XYChart but unfortunately the values vary a lot and the ratio of the bars is not good.
I thought it shouldn't be a problem to set a minimum height for the bars to make it look better, but after over an hour I still haven't found what I was looking for.
Does this function really not exist or am I just too stupid to find it?
Here's my code:
chart.data = data;
// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "ch";
categoryAxis.renderer.minGridDistance = 1; // lable size
categoryAxis.renderer.labels.template.rotation = 360;
categoryAxis.tooltip.disabled = true;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.minWidth = 50;
// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.sequencedInterpolation = true;
series.dataFields.valueY = "pu";
series.dataFields.categoryX = "ch";
series.tooltipText = "[{categoryX}: bold]{valueY}[/]";
series.columns.template.strokeWidth = 0;
series.tooltip.pointerOrientation = "vertical";
series.columns.template.column.cornerRadiusTopLeft = 10;
series.columns.template.column.cornerRadiusTopRight = 10;
series.columns.template.column.fillOpacity = 1;
var hoverState = series.columns.template.column.states.create("hover");
hoverState.properties.fillOpacity = 1;
series.columns.template.adapter.add("fill", function(fill, target) {
return chart.colors.getIndex(target.dataItem.index);
});
chart.cursor = new am4charts.XYCursor();
And the chart:
Thanks for your help!
You can't specify a minimum height for a column as that would change its value. You can try using an axis break to remove a portion of the axis range to make smaller values look a little bigger:
axisBreak = valueAxis.axisBreaks.create();
axisBreak.startValue = 20;
axisBreak.endValue = 40;
axisBreak.breakSize = 0.05;
Adjust the values as needed. There's also a demo of this with a mouseover effect to remove the break on the demos page here.
I need to figure out this bug, my dc.js chart works just fine, except when I add negative values to the stacked bar-chart. Instead of starting from y=0 it starts from the top of the stacked one and messes up the chart.
function grid (selector,data) {
var ndx = crossfilter(data),
all = ndx.groupAll();
var bar_bank = dc.barChart(selector + " .bank");
var bank = ndx.dimension(function(d) {
if (typeof d.bank == "undefined") return "";
return d.bank;
});
var bankGroupBuy = bank.group().reduceSum(function(d) {
return d.buy; });
var bankGroup = bank.group().reduceSum(function(d) {
return d.sell); });
bar_bank
.width(444)
.height(300)
.outerPadding(22)
.gap(1)
.x(d3.scaleBand())
.y(d3.scaleLinear())
.xUnits(dc.units.ordinal)
.brushOn(false)
.elasticY(true)
.yAxisLabel("#BARCHART")
.dimension(bank)
.group(bankGroupBuy)
.stack(bankGroupSell)
;
dc.renderAll();
}
This renders:
but when i
return -d.sell
This happens:
Any ideas how I can fix it? So the stacked negative one starts from 0 and goes down, and does not start from the top of the first one?
Thanks in advance!
This is my csv:
time,bank,buy,sell,AVG_vol_price
2019-02-11,AVA,26378,138177,1.688
2019-02-11,NON,19340,13500,1.683
2019-02-11,SFK,0,43,1.74
2019-02-11,SHB,11300,498,1.692
2019-02-11,SWB,101200,6000,1.689
2019-02-12,AVA,125612,138612,1.683
2019-02-12,ENS,5000,0,1.702
I have many axes in the chart.
How to highlight the axis when hovering on a line(axis-value)?
It is necessary to highlight the axis to which the line(axis-value) belongs (when hovering on a line(axis-value))
(Highlight = make bold or change color)
Sorry for the bad english :)
You could use the seriesHover event:
seriesHover: function(e) {
var axis = e.sender.getAxis( e.series.axis);
for (var i=0; i<e.sender.options.valueAxis.length; i++){
if (i ==axis._axis.axisIndex){
e.sender.options.valueAxis[i].line.width = 3;
} else {
e.sender.options.valueAxis[i].line.width = 1;
}
}
e.sender.refresh();
}
From the series you can get theassociated axis, then set the axis line width and refresh the chart.
DEMO
I have a very simple line chart in dimple. I want to change the x and y axis colour to white.
var svg = dimple.newSvg(".line_chart_container", 400, 300),dataset;
var chart = new dimple.chart(svg, dataset);
var x = chart.addCategoryAxis("x", "Attempts");
//x.style ("fill","red")
var y = chart.addMeasureAxis("y", "Value");
y.showGridlines = true;
x.showGridlines = true;
var s = chart.addSeries(["Metric", "Value"], dimple.plot.bubble);
var lines = chart.addSeries("Metric", dimple.plot.line);
lines.lineWeight = 2;
lines.lineMarkers = true;
chart.assignColor("Metric", "#30D630");
chart.draw();
s.shapes.style("opacity", function (d) {
return (d.yValue === 0 ? 0 : 0.8);
});
I've checked dimple.axis documentation in GitHub but couldn't find any thing. There is a dimple.axis.colors attribute, but it changes the color of the data and not the axis. Does dimple even support this?
I've also tried to add style attribute(like in D3):
x.style ("fill","red")
but caught an error: Uncaught TypeError: x.style is not a function
Any idea?
x is not a d3 selection, it is a dimple.axis. You can access the inner d3 selection with the shapes property (which is standard for any dimple object). There is an example of that here.
Depending on if you want to change the line color, text color, or everything, you would do
x.shapes.selectAll("*").style("fill", "white")
where * could also be "text" or "line".
One note : the individual tick marks are <line> nodes, and to change their color you need to use 'stroke', not 'fill'.
Also, the actual axis line itself is not a <line> element, it's a <path> element. So to change that color would be :
x.shapes.select("path.dimple-custom-axis-line").style("stroke", "white");
You can also just manually write a css rule to override the style for a chart :
g.dimple-axis > g.tick > line, g.dimple-axis path.dimple-custom-axis-line {
stroke:white;
}
For X-axis
d3.selectAll("path.domain")[0][0].style.stroke = "red";
For Y-axis
d3.selectAll("path.domain")[0][1].style.stroke = "yellow";
How do I remove the side scale axis in am-charts.
For eg. in this fiddle I want to remove the top scales and left scales.
what are the properties or methods that I need to manipulate.
A demo chart.
http://jsfiddle.net/JSTQW/
Currently, I am using this code for plotting the chart:
chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData1; //data provider for chart
chart.categoryField = "year"; //this is the side category year field
chart.startDuration = 1; //this is the chart plotting time
chart.plotAreaBorderColor = "#ffffff"; //side div rectangular border
chart.plotAreaBorderAlpha = 15;
// this single line makes the chart a bar chart
chart.rotate = true;
chart.columnWidth=0.2;
// AXES
// Category
var categoryAxis = chart.categoryAxis;
categoryAxis.gridPosition = "start";
categoryAxis.gridAlpha = 0.1;
categoryAxis.axisAlpha = 0;
// Value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.axisAlpha = 0;
valueAxis.gridAlpha = 0.1;
valueAxis.position = "top";
valueAxis.maximum = 100;
chart.addValueAxis(valueAxis);
// GRAPHS
// first graph
var graph1 = new AmCharts.AmGraph();
graph1.type = "column";
graph1.title = "Income";
graph1.valueField = "income";
graph1.balloonText = "Income:[[value]]";
graph1.lineAlpha = 0;
graph1.fillColors = "#7fb5b7";
graph1.fillAlphas = 1;
chart.addGraph(graph1);
// second graph
var graph2 = new AmCharts.AmGraph();
graph2.type = "column";
graph2.title = "Expenses";
graph2.valueField = "expenses";
graph2.balloonText = "Expenses:[[value]]";
graph2.lineAlpha = 0;
graph2.fillColors = "#999999";
graph2.fillAlphas = 1;
chart.addGraph(graph2);
// LEGEND
//var legend = new AmCharts.AmLegend();
// chart.addLegend(legend);
chart.creditsPosition = "top-right";
// WRITE
chart.write("chartdiv1");
The accepted answer is no longer valid for amcharts4, now you can do this with:
valueAxis.renderer.labels.template.disabled = true;
And you might also want to disable the tooltip:
valueAxis.tooltip.disabled = true;
By setting valueAxis.labelsEnabled value you can get this.
Just try :
valueAxis.labelsEnabled = false;