We Keep Coding

Multiple line labels for chart js

I have this radar chart in chart.js which has 5 labels. The labels are quite long so I want to show them in two lines in HTML but when I use "\n" it doesn't make a new line!
These are my labels:
labels: ["COMMUNICATION \n SKILL ", "PRODUCT AND PROCESS \n KNOWLEDGE "]
As you can see I'm trying to have "communication skill" and "product and process knowledge" both in two lines but it shows them in one line!
What's the correct way to do it?
UPDATE
The labels is in script tag:
var myChart = new Chart(ctx, {
type: 'radar',
data: {
labels: ["COMMUNICATION SKILL ", "PRODUCT AND PROCESS KNOWLEDGE "],
datasets: [{
label: labs,
data: dps,
backgroundColor: [
'rgba(255, 99, 132, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
],
borderWidth: 1
},
options: {
maintainAspectRatio: true,
scale: {
ticks:{
beginAtZero: true,
max: 4
}
}
}
});

I believe what you are looking for is answered here:
ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
The solution is to pass a nested array as an input to 'labels' - with each element in the nested array representing a new line of text in your label. So in your case the following should work:
labels: [["COMMUNICATION","SKILL"], ["PRODUCT AND PROCESS","KNOWLEDGE"]]

Just read the docs https://www.chartjs.org/docs/latest/charts/radar.html
you need your dataset to have the property data and that should be an array. The values in the array will correspond with the values in the labels by their index number.
data: {
labels: ['Running', 'Swimming', 'Eating', 'Cycling'],
datasets: [{
data: [20, 10, 4, 2]
}]
}

Group Categories in columnrange highcharts with custom view

I am using highcharts with angular 4.
I want to create a chart to show the result something like this:
Where:
GHRM and HR Scanner are application name.
We are showing some data groupwise (application wise here)
To achieve the above result I have tried using columnrange chart type in highcharts.
But the result of above link differs from my requirement. As you can see the result of above link:
Can any one help me to know how I can customize the categories view in this case to achieve the result as shown in first screen shot.

Getting that kind of look with grouped categories plugin would be a rather a hard task to accomplish.
Another approach is using a separate x axis for each set of categories (GHRM and HR Scanner in your case).
Axes can be positioned via left & top properties and sized via height properties. These options are not documented yet but they work. They accept relative values in percents (e.g. 30%) and absolute values in pixels (e.g. 200px).
xAxis: [{
categories: ['Category 1'],
tickWidth: 0,
height: '30%',
offset: 0,
title: {
text: 'First x axis',
rotation: 0,
align: 'high'
}
}, {
categories: ['Category 2', 'Category 3'],
tickWidth: 0,
height: '60%',
top: '40%',
offset: 0,
title: {
align: 'high',
text: 'Second x axis',
rotation: 0
}
}],
plotOptions: {
series: {
grouping: false,
groupPadding: 0,
pointPadding: 0,
borderWidth: 0
}
},
series: [{
data: [
[1, 7]
],
}, {
data: [
[2, 4],
[3, 8]
],
xAxis: 1
}]
Live demo: http://jsfiddle.net/BlackLabel/s3k3s944/
grouping has to be disabled so that columns are always centered. pointPadding, groupPadding and borederWidth force columns to occupy maximum vertical range.
All other options of axes configuration can be found in the Highcharts API: https://api.highcharts.com/highcharts/

Non-static values for chart using CanvasJS?

I'm trying to figure out how to make a dynamic bar chart using CanvasJs.
The basic set up for the chart is as follows:
var chart = new CanvasJS.Chart("chartContainer", {
theme: "theme2",//theme1
title:{
text: "Basic Column Chart - CanvasJS"
},
animationEnabled: false, // change to true
data: [
{
// Change type to "bar", "area", "spline", "pie",etc.
type: "column",
dataPoints: [
{ label: "apple", y: 10 },
{ label: "orange", y: 15 },
{ label: "banana", y: 25 },
{ label: "mango", y: 30 },
{ label: "grape", y: 28 }
]
}
]
});
chart.render();
}
My goal is to use a simple variable to update the dataPoints instead of static numbers such as 10,15, 25.
User's will input numbers and the chart should update based on their input.
Is this possible to do? Setting "Y" to a variable breaks the chart thus far. I'm unsure how to make this work.
I've also tried setting var input = $('input').html
and setting y as input but it does not work.
Thanks!

If anyone else is trying to figure this out here is how this is handled:
Use variable to assign data points in creating CanvasJS graph?.
This also works with Charts.JS.

Highchart Color Issue for series with single data with multiple colors

I was working on my chart,But it gives only single color for a name:vengadesh ,
Here is my Chart code in Fiddle..
My Example Chart in FIDDLE
But i want to get multiple colors for a single person dynamically...
My Actual Chart
MY EXPECTED CHART

Another solution is to set array of colors for series, then set colorByPoint: true, see: http://jsfiddle.net/7VNwk/2/
series: [{
type: 'column',
name: 'Vengadesh',
data: [2, 2, 2],
colors: ['blue', 'red', 'green'],
colorByPoint: true
}]

series: [{
type: 'column',
name: 'Member Average Packer Price',
data: [{y: 110.20, color: 'red'}, // this point is red
// default blue
{y: 110.20, color: '#aaff99'}, // this will be greenish
],
FIDDLE

Highstock Column Chart - data grouping causes data to scroll independently of axis

I am attempting to make a stacked column chart representing events on a timeline. I need evenly-spaced bars, that scroll left/right with their respective ticks. Currently upon scrolling, the columns remain in place and their data is updated to reflect the new timespan they represent (I assume).
For example: when scrolling one "step" to the right, I note these differences:
The column remains in place with updated data and the axis tick moves to the left. This results in a 'graphic equalizer'-like effect when scrolling. (See fiddle)
What I need is to have the column represent the same data for the life of the chart, and to scroll left/right with its tick mark.
I suspect I'm misunderstanding something in the configuration. Any help/direction would be very much appreciated.
(As a side note: is there any easy way to style/color data from the past (with an xAxis datetime value of < today) differently to normal data?)
chart: {
alignTicks: false,
backgroundColor: '#eeeeee',
events: {
load: function (e) {
this.xAxis[0].setExtremes(1390943153305, 1400015153305);
}
},
ignoreHiddenSeries: true,
renderTo: $('#chart')[0]
},
colors: ['#89f1a4','#68d9f7','#9eb9ef','#c49eef'],
credits: {enabled: false},
legend: {
enabled: true,
shadow: true
},
rangeSelector: {selected: 1},
title: {text: 'Global Events'},
navigator: {
height: 40,
xAxis: {
gridLineWidth: 1
},
series: {type: 'column'}
},
plotOptions: {
series: {
showInLegend: true,
stacking: 'normal',
dataGrouping: {
enabled: true,
forced: true,
units: [
['millisecond', [604800000]], // Attempting to force data into weekly groups, throws error if this is null
['second', [604800]],
['minute', [10080]],
['hour', [168]],
['day', [7]],
['week', [1]], // Expected this to be the only required option if I only want weekly grouping...
['month', null],
['year', null]
]
}
}
},
xAxis: {ordinal: false},
series: data

If you want just weekly grouping, then only that one set, see: http://jsfiddle.net/s6BmC/2/
I think that resolves your issue, right?
plotOptions: {
series: {
showInLegend: true,
stacking: 'normal',
dataGrouping: {
enabled: true,
forced: true,
units: [ [ 'week', [1] ]]
}
}
},
Regarding additional question:
- yes you can set specific color for each point, but you need to determine on your own what color should be set:
data: [{ x: timestamp, y: value, color: color }, { x: timestamp, y: value, color: color }... ]
Another solution is to wrap setting color for column. Something similar I have done for candlestick: http://jsfiddle.net/79WZM/ (this solution requires much more knowledge of Highcharts).