I am looking into using Apexcharts and would like to know if there is an option to have the data labels generated outside the slices with lines pointing to the associated slice? I have cases where the slice is small and prevents the application from generating the slice percent. This is a sample of what I am currently generating:
As you can see, there are 3 slices that do not show a percentage, I assume because the area of slice is to small to generate the percentage. If the percentages could be rendered outside the slice with a line or arrow pointing to its associated slice, that would be great. Is that option available?
Any ideas?
Thank you.
If you want to show the percentage values outside the slices, if yes then you do this:
dataLabels: {
enabled: true,
style: {
offsetX: -6,
colors: ['#333'],
fontSize: '11px',
fontFamily: 'Helvetica, Arial, sans-serif',
fontWeight: 'bold',
},
},
Read more
Example of Stacked Y-Axes
I can't figure out a way in Chart.js to get the Y-Axes to stack like I have in the example picture.
When I keep the scales object simple like this:
scales: {
y: {
stacked: true,
title: {
display: true,
text: "Temperature (°C)",
}
},
x: {
type: "time",
time: {
tooltipFormat: "LTS",
unit: "hour",
},
title: {
display: true,
text: "Datetime",
},
}
},
I obviously get a single Y-Axis, but instead of scaling to the maximum of any of the datasets, it seems to add each dataset up (ex: Say max Temp from any set is 40 °C, if I have 6 datasets the Y Scale goes from 0 - 250)
Additive Y-Axis example
It does stack all of the lines nicely though so I'm really hoping there is a decent solution as the Y-Axis right now is not helpful to a viewer. Thanks for any help!
With help from the Chart.js Slack channel, the easiest and actually great looking solution was just to separate each dataset into their own chart with only the top most chart showing a legend, and only the bottom chart showing an X-Axis. All middle charts have the X-Axis and legend turned off.
I am using a ColumnChart of google charts
and using DataView i am displaying values for the bar and line
Bar and line chart on same graph i am displaying using
series: {
0: { targetAxisIndex: 0 , type: "bars"},
1: { targetAxisIndex: 1, type: "line"},
},
Also i am getting the data from service : using json
The annotations are overlapping in my case due to high numbers. Searching for a solution.
Please suggest.
Thanks!
I have created a Google Chart Line Chart. There are data points at the bottom that do not show up because the upper points are large.
Here's my visualization function:
function drawVisualization() {
var data = google.visualization.arrayToDataTable(#table#);
var ac = new google.visualization.LineChart(document.getElementById('visualization'));
ac.draw(data, {
title : 'Billing Trend for this Month: #date#',
isStacked: true,
width: 1200,
height: 1000,
vAxis: {title: "Amount"},
hAxis: {title: "Date"}
});
}
I've looked through the param list but cannot find the proper one to set.
I would like the lower data points to be discernible.
Has anyone had luck with trying to do that?
Thanks
You can set the vAxis.logScale option to true, which will change the axis scale from linear to logarithmic. Your smaller values should then be discernible. There are a few other methods you could try as well (changing the value used to draw the data while keeping the tooltips the same; using a panel chart that zooms in on lower values); see some examples here: http://jsfiddle.net/asgallant/b4yCL/
I want following Google Chart (Column Chart) to show its first label on horizontal axis. Also I want each column to have same width; first and last column need a change. How is it possible?
var chartDataRaw = [{
"month": "201211",
"articles": 41467
}, {
"month": "201212",
"articles": 31820
}, {
"month": "201301",
"articles": 43817
}, {
"month": "201302",
"articles": 42773
}, {
"month": "201303",
"articles": 38695
}, {
"month": "201304",
"articles": 41257
}];
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('date', 'Month');
dataTable.addColumn('number', 'Articles');
var i = 1;
//chartDataRaw is array of objects, requested from server. looped through jquery each to fill dataTable
$.each(chartDataRaw, function () {
var year = this.month.substring(0, 4);
var month = this.month.substring(4);
var dataItem = [new Date(year, month), this.articles];
dataTable.addRow(dataItem);
});
var options = {
title: 'Company Coverage',
hAxis: {
title: 'Last Six Months',
titleTextStyle: {
color: 'red'
},
format: 'MMM, yyyy',
fontSize: '8px'
},
vAxis: {
textPosition: 'none'
},
trendlines: {
0: {
color: 'black',
lineWidth: 3,
opacity: 0.4
}
},
legend: 'none'
};
var monthYearFormatter = new google.visualization.DateFormat({
pattern: "MMM, yyyy"
});
monthYearFormatter.format(dataTable, 0); //change date format to render on chart
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(dataTable, options);
http://jsfiddle.net/YyYsN/2/
Edit: Added chart data
Executive Summary
You are committing several mortal sins:
You are not defining dates right
You have no y axis values distorting your data
You are using columns to describe a continuous series
You are predicting based on only 6 data points
You are not defining dates right
Look at the value for January 2013. It says 31,820 articles. The issue is your data says there were 43,817 articles in January. What the heck is going on?
Javascript Date Objects use month values from 0-11, not 1-12. That means when you convert the dates, you need to change your function.
Old:
var dataItem = [new Date(year, month), this.articles];
New:
var dataItem = [new Date(year, month - 1), this.articles];
You have no y axis values distorting your data
Compare the second bar to the third bar. What is the ratio between the two? It looks like the second bar is around .5 gridlines, and the third bar is around 3.5 gridlines. That is a 700% increase in articles!
Only if you look at the data, it's actually going from 31,820 to 43,817, and increase of only 37%.
Bar charts should always start from zero, otherwise you get incredibly distorted perspective of the data, especially when there are no labels to boot.
Old:
vAxis: {
textPosition: 'none',
},
New:
vAxis: {
textPosition: 'none',
minValue: 0
},
You are using columns to describe a continuous series
Columns show discrete items. If I want to poll how many kids in a class like dogs, cats, and iguanas, a column chart is great since it allows me to compare the popularity (height) across unrelated categories (horizontal). Columns are okay for showing sales per month (or articles per month), but by making them columns you are implying that the columns should be compared as individual items, not as a progressing series.
If you want to show that these data items are connected (as implied by the trendline) it would make much more sense to show an area chart.
(Ideally, the area chart would show articles over the last 30 days, and have daily data, rather than a monthly compilation since months are arbitrary cutoffs, and things like weekends and holidays probably have a significant impact on your data which further distorts what you're trying to show).
Old
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
New
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
You are predicting based on only 6 data point
Six points does not a trend make. Your data's highest value is the second point, yet you are showing the trend increasing over time. Perhaps the trendline suggests an upward trend (since the later values are higher than the first value), but as soon as you move 1 month forward you will have a descending trendline (barring a massive increase in articles).
This makes no rational sense. 5 months of data are the same. How can changing 1 month of a 6-month series change the direction of the trendline? Forecasting is iffy-enough as it is (see the Black Swan theory), but doing it on a minimal 6-month series likely isn't the best. This means the trendline should probably be removed altogether since it not only doesn't convey useful information, it potentially conveys incorrect information.
Summary
That said, if you just want your left and right columns not to be cut off, you can change the following code:
Old
hAxis: {
title: 'Last Six Months',
titleTextStyle: {
color: 'red'
},
format: 'MMM, yyyy',
fontSize: '8px',
},
New
hAxis: {
title: 'Last Six Months',
titleTextStyle: {
color: 'red'
},
format: 'MMM, yyyy',
fontSize: '8px',
minValue: new Date(2012,9),
maxValue: new Date(2013,4)
},
fixed it myself by changing corechart visualization version to 1.1
google.load("visualization", "1.1", {packages:["corechart"]});