I have an Doughnut chart with
chart.labels().position("outside");
It's showing the percentage fine for the fields with a lot of data.
Is it possible to "force" show all of them ?
Even when I go to full screen, it's not showing.
I attached image on my chart with missing labels
Looking for "Force show" or Min/Max settings for labels.
You have to tweak outsideLabelsCriticalAngle.
anychart.onDocumentLoad(() => {
let data = [
{ x: "A", value: 93.3 },
{ x: "B", value: 5.9 },
{ x: "C", value: 0.5 },
{ x: "D", value: 0.3 }
];
let chart = anychart.pie(data);
chart.container("container");
chart.innerRadius("80%");
chart.outsideLabelsCriticalAngle(100); // <--- HERE
chart.labels().position("outside");
chart.draw();
});
#container {
width: 350px;
height: 350px;
}
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-pie.min.js"></script>
<div id="container"></div>
Related
I'm trying to find the way how to show tooltip when user hovers the legend in Chart.js library. I have found several issues but none of them was solved.
https://github.com/chartjs/Chart.js/issues/4023
Chart.js - show tooltip when hovering on legend
Does anybody have any idea how to manage that? Thank you
This is quite straightforward using the onHover callback.
Below is a snippet with a crude implementation but it is illustrative of the technique required.
let hovering = false,
tooltip = document.getElementById("tooltip"),
tooltips = ["such tooltip", "blah blah"],
mychart = new Chart(document.getElementById("chart"), {
type: "bar",
data: {
labels: ['a', 'b', 'c'],
datasets: [{
label: "series 1",
data: [1, 2, 3]
}, {
label: "series 2",
data: [1, 2, 3]
}]
},
options: {
legend: {
onHover: function(event, legendItem) {
if (hovering) {
return;
}
hovering = true;
tooltip.innerHTML = tooltips[legendItem.datasetIndex];
tooltip.style.left = event.x + "px";
tooltip.style.top = event.y + "px";
},
onLeave: function() {
hovering = false;
tooltip.innerHTML = "";
}
}
}
});
#tooltip {
background-color: #000;
color: #fff;
position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="chart"></canvas>
<div id="tooltip"></div>
As you can see my bars are not covering the entire width of the label 'column'.
My tooltip only shows if I am exactly hovering the bar, or, if I remove the bars, exactly on the line point.
options: {
plugins: {
legend: { display: false },
title: { display: false },
tooltip: {
displayColors: false, backgroundColor: '#ffffff',
bodyColor: '#595f69', bodyFont: {size: 14},
borderColor: '#595f69', borderWidth: 1,
titleFont: {size: 0}
}
},
responsive: true, aspectRatio: 4,
scales: {
y: { display: true, suggestedMin: 0, suggestedMax: 80, ticks: { stepSize: 20 } },
y1: {display: false, suggestedMin: 0, suggestedMax: 80, ticks: { stepSize: 2 }},
x: { grid: { drawBorder: false, display: false } }
I tried plugins like chartjs crosshair, but don't manage to make it work with typescript.
How can I make it so that anywhere my mouse hover in the label 'column' area, the tooltip displays?
You can set the intersect property to false to always get the tooltip without needing to intersect the bar exactly:
var options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
plugins: {
tooltip: {
intersect: false
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"></script>
</body>
You can make your own tooltip by editing the callbacks, i had to get the nearest values around my cursor, from all datasets, on my line chart. this works for me on Chartjs 2.9.3:
tooltips: {
mode: "x",
position: "nearest",
intersect: false,
callbacks: {
beforeBody: function(tooltipItems, allData) {
let x = tooltipItems[0].x; // get x coordinate
let datasets = allData.datasets; // datasets
let values = [];
for (i in datasets) {
let dataset = datasets[i];
let meta = this._chart.getDatasetMeta(i); // dataset metadata
let xScale = this._chart.scales[meta.xAxisID]; // dataset's x axis
let xValue = xScale.getValueForPixel(x); // we get the x value on the x axis with x coordinate
let data = dataset.data // data
// search data for the first value with a bigger x value
let index = data.findIndex(function(o) {
return o.x >= xValue;
});
let value = data[index]; // this is our nearest value
// format label
if (isNaN(value.ymax)) {
values.push(`${dataset.label}: ${value.y}\n`);
} else {
values.push(`${dataset.label}: ${value.y}, min: ${value.ymin}, max: ${value.ymax}\n`)
}
}
return values.join(""); // return label
},
label: function() { // this needs to be empty
},
}
},
Hello Highstock Community,
How can I turn off zooming so a user can pan the graph again after zooming in using highstock tools?
Eg looking at this highstock sample we user likes to do the following:
Zoom in with the zoom buttons on the left
Pan again (no way to leave zooming again.)
Thx really appreciate your help!
Highcharts.getJSON('https://demo-live-data.highcharts.com/aapl-ohlcv.json', function (data) {
// split the data set into ohlc and volume
var ohlc = [],
volume = [],
dataLength = data.length,
i = 0;
for (i; i < dataLength; i += 1) {
ohlc.push([
data[i][0], // the date
data[i][1], // open
data[i][2], // high
data[i][3], // low
data[i][4] // close
]);
volume.push([
data[i][0], // the date
data[i][5] // the volume
]);
}
Highcharts.stockChart('container', {
yAxis: [{
labels: {
align: 'left'
},
height: '80%',
resize: {
enabled: true
}
}, {
labels: {
align: 'left'
},
top: '80%',
height: '20%',
offset: 0
}],
tooltip: {
shape: 'square',
headerShape: 'callout',
borderWidth: 0,
shadow: false,
positioner: function (width, height, point) {
var chart = this.chart,
position;
if (point.isHeader) {
position = {
x: Math.max(
// Left side limit
chart.plotLeft,
Math.min(
point.plotX + chart.plotLeft - width / 2,
// Right side limit
chart.chartWidth - width - chart.marginRight
)
),
y: point.plotY
};
} else {
position = {
x: point.series.chart.plotLeft,
y: point.series.yAxis.top - chart.plotTop
};
}
return position;
}
},
series: [{
type: 'ohlc',
id: 'aapl-ohlc',
name: 'AAPL Stock Price',
data: ohlc
}, {
type: 'column',
id: 'aapl-volume',
name: 'AAPL Volume',
data: volume,
yAxis: 1
}],
responsive: {
rules: [{
condition: {
maxWidth: 800
},
chartOptions: {
rangeSelector: {
inputEnabled: false
}
}
}]
}
});
});
#container {
max-height: 800px;
min-height: 75vh;
}
<link rel="stylesheet" type="text/css" href="https://code.highcharts.com/css/stocktools/gui.css">
<link rel="stylesheet" type="text/css" href="https://code.highcharts.com/css/annotations/popup.css">
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/indicators/indicators-all.js"></script>
<script src="https://code.highcharts.com/stock/modules/drag-panes.js"></script>
<script src="https://code.highcharts.com/modules/annotations-advanced.js"></script>
<script src="https://code.highcharts.com/modules/price-indicator.js"></script>
<script src="https://code.highcharts.com/modules/full-screen.js"></script>
<script src="https://code.highcharts.com/modules/stock-tools.js"></script>
<div id="container" class="chart"></div>
Update #1
I understood you better now I think.
Is this what you wanted?
Can use the zoom tool from the toolbar, then pan using 'alt' + mouse click & drag.
https://jsfiddle.net/marensiusb/rjs60a37/3/
If I understood you correctly, you want to:
Zoom in
Pan
Then zoom out
You can zoom in using the rangeSelector (1m, 3m, 6, YTD, 1y, all), then pan and zoom out using the rangeSelector ('ALL').
You can also disable the rangeSelector and enable chart.zoom and chart.pan
Then the user can pan using alt + mouse and reset using the 'Reset Zoom' button.
https://jsfiddle.net/marensiusb/z6tn28w4/4/
Is there any way to generate bar colours dynamically in ZingChart?
in screen-shot there is two colours generated in bar chart, i want to get list of colors used in bar chart.
html file
<zingchart id="timesheet-bar-chart" zc-values="barValues" zc- json="myObj"></zingchart>
controller
$scope.myObj = {
"type": "bar",
"plot":{
"stacked":true,
"stack-type":"normal" /* Optional specification */
},
"scale-x":{
"transform":{
"type":"date",
"all":"%d %M",
"item": {
"visible":false
}
},
"values":$scope.bar_x_axis,
},
};
and barValues is a list of integer values.
Since your question is asking how to get the bar colors, not set the bar colors. I thought my answer would be appropriate as well.
You can use the API to getobjectinfo from the chart.
demo here
$scope.myRender = {
events : {
complete : function(p) {
var info1 = zingchart.exec(p.id, 'getobjectinfo', {
object : 'plot',
plotindex: 0
});
var info2 = zingchart.exec(p.id, 'getobjectinfo', {
object : 'plot',
plotindex: 1
});
console.log(info1, info2);
}
}
}
If youre confused on the $scope.myRender variable you can read up more on the angular directive here.
You can set the colors like this,
$scope.myJson = {
'plot': {
'styles': ['#yellow', 'red', 'blue']
},
'scale-x': {
'values': ['white', 'red', 'pink']
},
'type': 'bar',
'series': [{
'text': 'Product History Color',
'values': [2, 6, 8]
}]
}
DEMO
You can specify the colors, fonts etc by yourself.
e.g.
scaleX: {
labels: ['Facebook','Apple', 'Microsoft', 'Intel','Google', 'Amazon'],
item: {
fontFamily: "Roboto",
fontSize: 14
},
lineColor: "#DDD",
tick:{
visible: false
}
},
Is it possible to add a custom point shape to a line chart?
Google's Customizing Points Documentation doesn't mention anything about adding shapes they don't already offer.
I did find this similar question with a good answer, but I don't think I can do that using angular-google-chart. Even if it is possible, I'm hoping there is a more strait forward solution.
I don't need to add a complex shape, I just need a hollow circle and an X.
I tried adding the hollow circle using stroke-color and stroke-width as a column style, but I can't even get that to work.
Here is a jsFiddle with a working hollow circle but I'm using the Javascript Literal way of adding data and can't get the following code to work:
chartData.data.cols = [
{
id: "someid",
label: "Some Label",
type: "number",
p: {
style: 'point {stroke-width: 4; stroke-color: #000000',
},
},
];
I'd rather add it to to options.series[0].strokeWidth but it doesn't look like that is an option.
So, if you can help with either hollow circle points or Xs that be awesome!
Basically: when you want to apply a custom style you must use a style-column, the style will be set via the value of the column.
Example using the object-literal:
google.setOnLoadCallback(drawChart);
function drawChart() {
var chartData = {
data: {
cols: [{
label: "X",
type: "number"
}, {
label: 'Y',
type: "number"
}, {
role: 'style',
type: "string"
}
],
rows: [{
c: [{
v: 1
}, {
v: 5
}, {
v: 'point { stroke-width: 4; fill-color: transparent; stroke-color: red;}'
}]
}, {
c: [{
v: 2
}, {
v: 1
}, {
v: 'point { stroke-width: 4; fill-color: transparent; stroke-color: red;}'
}]
}, {
c: [{
v: 3
}, {
v: 3
}, {
v: 'point { stroke-width: 4; fill-color: transparent; stroke-color: red;}'
}]
}]
}
};
var options = {
legend: 'none',
curveType: 'function',
pointSize: 7
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(new google.visualization.DataTable(chartData.data), options);
}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
<div id="chart_div"></div>
If you're using multiple vaxes then add the column with role: 'style' immediately after the column you want to style.
Another solution:
set the style of the circles via CSS:
google.setOnLoadCallback(drawChart);
function drawChart() {
var chartData = {
data: {
cols: [{
label: "X",
type: "number"
}, {
label: 'Y',
type: "number"
}, {
label: 'Y',
type: "number"
}
],
rows: [
{c:[{v:1}, {v:5}, {v:4}]},
{c:[{v:2}, {v:1}, {v:2}]},
{c:[{v:3}, {v:3}, {v:5}]}
]
}
};
var options = {
curveType: 'function',
pointSize: 7,
series: {
//set unique colors for the series when you must set
//different points for mmultiple series
0: {
color: 'ff0000'
},
1: {
color: '#0000ff'
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(new google.visualization.DataTable(chartData.data), options);
}
#chart_div circle {
stroke-width: 4px !important;
fill: none !important;
}
#chart_div circle[fill="#ff0000"] {
stroke: #ff0000 !important;
}
#chart_div circle[fill="#0000ff"] {
stroke: #0000ff !important;
}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
<div id="chart_div" ></div>
Dr. Molle's answer seemed to work for getting a hollow circle, although the point doesn't match the legend.
I figured out a workaround for an X shapped point. I used options.pointshape to give a star 4 sides, rotated it by 45 degrees and decreased the dent:
pointShape: {
type: 'star',
sides: 4,
dent: 0.1,
rotation: 45,
},
Hopefully there is a better way, but Dr. Molle's and this answer work for now.
For whoever is using Dr.Molle's brilliant CSS solution and is experiencing an issue where the second data series points disappear just make the second color the default color:
#chart_div circle {
stroke-width: 4px !important;
fill: #ffffff !important; // note that i'm not using transparent
stroke: #0000ff !important; // second color moved to be default
}
#chart_div circle[fill="#ff0000"] {
stroke: #ff0000 !important;
}
#chart_div circle[fill="#0000ff"] {
/*stroke: #0000ff !important;*/
}
**note: couldn't write this as a comment to Dr.Molle's answer due to not having enough reputation at the time.