Chart.js - How to place text outside of radar chart - javascript

I'm using Chart.js to build a radar chart. I have seven datasets grouped by color as seen in the image below:
I would like to place the dataset labels outside of the chart, in the center of each dataset sector (at the crosses in the image). Does anyone know if this is possible?

You could probably basically accomplish this by doing roughly the following:
Specify a non-empty label only where you'd like the group label to appear (e.g. for every sixth datapoint or something similar)
Then set the tooltips.callbacks.label option to return the label for each point so that they still appear in the tooltip as they originally would

Related

Change fill color of selected point in Google Charts API scatter plot

I have a Google Charts scatter plot with various points specified on it. I also have a side bar with a list of values corresponding to the points on the scatter graph and when I select a side bar value, it highlights the corresponding point in the graph.
I would like to change the fill-color of the selected item when it is selected. Currently, my working selection code is:
$("#select").on('click', function() {
scatterChart.setSelection([{row: 1, column: 1}]);
});
I have tried using setValue() and setProperty on the data and have redrawn the chart but it has no affect.
Any help much appreciated.

Spline chart drawn on the xaxis in case of single value or constant values - highchart

while using the older version of highchart - 2.1.6, if a plot had only one value or a series of same values, it would plot at the middle of the screen as below.
But, ever since i have upgraded the version of the highchart to 4.1.5, the line sticks to the bottom, on the xaxis. like this.
I am looking for the option to set it back to normal but, didn't find it yet. Help me out with this please.
I have tried pointPadding on the series and even maxPadding on the yAxis, but no use.
Here is the fiddle where it is replicated -
http://jsfiddle.net/ka4p4sym/2/
var chart = $('#container').highcharts();
I would set yAxis.minRange option, demo. It won't place line exactly in the middle, but will make some extra space on top and bottom.

Highchart - spline chart - Single value or horizontal line series draws ON the x axis [duplicate]

while using the older version of highchart - 2.1.6, if a plot had only one value or a series of same values, it would plot at the middle of the screen as below.
But, ever since i have upgraded the version of the highchart to 4.1.5, the line sticks to the bottom, on the xaxis. like this.
I am looking for the option to set it back to normal but, didn't find it yet. Help me out with this please.
I have tried pointPadding on the series and even maxPadding on the yAxis, but no use.
Here is the fiddle where it is replicated -
http://jsfiddle.net/ka4p4sym/2/
var chart = $('#container').highcharts();
I would set yAxis.minRange option, demo. It won't place line exactly in the middle, but will make some extra space on top and bottom.

Assigning colors to a d3.js bar chart?

I'm trying to create a color-coded bar chart using d3. I am SO CLOSE. Here's my bl.ocks chart:
http://bl.ocks.org/sconnors37/b99070b055f125c9dff1/1cb53954be3f20e3c4492066eccd749b5cf04bbe
What I'm trying to do is assign color values based on the "teams" field in my .tsv file. So grey for Mercedes, red for Ferrari, etc. I have the teams in the var color domain and the colors in the var color range, and I'm pulling var color into the bar attrib.
For some reason though, the entire chart is just taking on the first item in the range - I changed it from grey to red just to see if that was what was going on, and it is.
So! How do I get the rest of my colors to pull through onto the bar chart? Help me, stackoverflow, you're my only hope.
In your .tsv file the last column team is not separated from the previous column by a tab, but rather through two spaces. If you look at the data passed to the d3.tsv callback I think you will find that you have one date team column instead of a date and team column.
This means that the field d.team is undefined and ordinal(undefined) will just return the first value from the range.

Highcharts.js combined bar/line chart with timespan bars

What I am trying to achieve is to develop a graph that combines line series with bars. The x axis should be a simple timeline (dates) and the 2 y axes should be linear or logarithmic values. I have no problem creating the line series and the timeline axis.
My problem is when I am trying to implement the "time span bars". It's sort of a gantt chart combined with a line chart I guess. The bars represent data where each bar has a start date, and optionally an end date. I want each bar to start at the start date (aligned with the x axis) and end at the end date if available. If no end date is available, the bar should fill the entire chart until the right edge. I cannot figure out how to combine these time span bars with the line series. I have checked out the jsfiddle /8JhXv/1/ which is pretty close to what I am trying to achieve, except in that example, they are not on top of each other. Anyone who could give me some hints on how to put these on top of each other?
Look at some of the options here:
http://highcharts.uservoice.com/forums/55896-general/suggestions/804783-gantt-chart
Best option is not to use actual bars, but to use line series with lineWidth set to a high enough value to mimic bars visually.
You can try to use line series and columnrange (http://www.highcharts.com/demo/columnrange)

Categories