Develop Reference

How can I hide bars with null values in C3.js?

I have a C3 chart with data as given in columns.
Notice that there are null values in data1 and in between data 3. C3 is trying to display my bar chart in groupings of 5, creating a separate bar for null values. I'm trying to hide these null values.
var chart = c3.generate({
data: {
x : 'x',
line:{connect_null: true},
columns: [
['x','x1' ,'x2', 'x3', 'x4', 'x5', 'x6', 'x7'],
['data1',null ,30, 200, 100, 400, 150, 250],
['data2',null ,130, 100, 140, 200, 150, 50],
['data3',null ,130, null, 200, 300, -200, 100],
['data4',null ,20, -90, 200, 130, -20, 90],
['data5',-90, 20, -90, 200, 130, -20, 90]
],
type: 'bar'
},
axis: {
x: {
type: 'category', // this needed to load string x value
}
},
bar: {
width: {
ratio: 0.7 // this makes bar width 50% of length between ticks
},
space:0.05
// or
//width: 100 // this makes bar width 100px
}
});
output(https://i.stack.imgur.com/PVei1.png)
How can I hide the bars with null values?

Do not displaying first chart point chartjs

I'm using chartjs lib to draw charts.
And I want to draw some simple, linear chart, but when do it some how the first point of the chart isn't shown correctly :
https://scr.hu/ALkPXP
It happends when the lowest data point x value have the same value as the minimum xAxes.
When I decrease minimum ax value it works correcty:
https://scr.hu/Gw4Lpy
My whole chart looks like :
const scatterChart2 = new Chart(this.canvas.nativeElement,
{
'type': 'line',
'data':
{
'datasets': [
{
'label': 'Scatter Dataset',
'data': [
{
x: 1,
y: 0,
}, {
x: 65,
y: 20,
}, {
x: 30,
y: 22,
}, {
x: 44,
y: 55,
}],
'fill': false,
'borderColor': 'rgb(75, 192, 192)'
}]
},
'options': {
scales: {
xAxes: [{
ticks: {
min: 1,
stepSize: 1
},
offset: true,
type: 'linear',
position: 'bottom'
}]
},
'showLines': true
}
});
}
And in HTML my Canvas looks like :
<div style="max-width: 1000px;max-height: 1000px;">
<canvas #canvas id="myChart" ></canvas>
</div>
How should I show first point correctly ?

Plotly.js adding linegraph to barchart makes bars disappear

I have created a barchart that works properly the way I want. Right now, I'm trying to add a linegraph to overlap the bars, but when I run the code, the linegraph appears, but the bars disappear. It seems pretty simple to add the linegraph, but for some reason it's not working. I'm not getting any mistakes in console either.
var x_text = ["Comodities","Consumer Discretionary","Utilities",
"Health & Biotech","Global Real Estate","Financials",
"Emerging Market Bonds","Technologies","Industrials",
"Oil & Gas","China Equities","S&P500"];
//
var trace1 = [{
x: x_text, // X axis (names)
y: zValues, // Values (y axis)
hoverinfo: zValues,
type: 'bar',
orientation:"v",
marker: {
color: color_list, // Color of bars
line: {
color: 'rbg(8,48,107)',
width: 1
}},
yauto: false,
showscale: true,
}];
var trace2 = {
x: x_text,
y: [-0.1,-0.1,2.3,3.3,1.0,0.4,0.9,3.0,-0.1,-1.4,3.0,0.2],
mode: 'lines',
line:{
color:'black'
},
type: 'scatter'
};
var layout = {
font:{
// Text size and color
size:16,
family:'helvetica',
color: "white"
},
annotations: arrow(),
xaxis: {
side: 'bottom',
orientation: "right"
},
yaxis: {
autosize: true,
tickfont: "white",
ticksuffix: "%",
// Y axis scale
autorange: false,
range :[-20,20]
},
// Graph position
margin: {
l: 90,
r: 90,
b: 120,
t: 20,
pad: 10
},
// Graph background colors
paper_bgcolor: "transparent",
plot_bgcolor:"transparent",
};
var data = [trace1, trace2];
Plotly.newPlot('myDiv',data,layout);

Oh dam, my trace1 had braces+curly braces around the values, which worked for only the bar, but made it dissappear when the linegraph was called.

How to Plot x,y coordinates in c3.js chart library?

How can i pass x,y values to generate a chart where the x values are not automatically sorted? if i use this example the x starts on 2 because its the lowest value.
var chart = c3.generate({
data: {
x: 'x',
columns: [
['x', 50, 80, 2,100, 230, 300],
['data1',400, 200, 100, 50, 25, 12]
]
}
});

If you want to not sort the x values, then you need to treat it as a category axis
var chart = c3.generate({
data: {
columns: [
['data1',400, 200, 100, 50, 25, 12]
],
type: "bar",
},
axis: {
x: {
type: 'category',
categories: [50, 80, 2,100, 230, 300],
}
}
});
See http://c3js.org/samples/categorized.html

HighChart how set dataLabel position dynamically in formatter base on its value

I try drawing a polar chart by 'HighChart' that each series have 2 data category between 0 to 100 that have overlap on other.
My problem is when data value is greater than 90, dataLabel of 2 category have overlap.
I want set dataLabel position dynamically by formatter function.
All my try to do this was failed.
Is there solution to solve this problem?
In below is my simplified code. And in this JSFiddle.net you can see result and edit it
var chart;
var options={
chart:
{
renderTo: 'container',
type: 'column',
polar: true
},
xAxis:
{
categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
},
yAxis:
{
gridLineWidth: 0,
labels:
{
enabled: false
}
},
colors: ['#F47414', '#A8CBFF'],
plotOptions:
{
column:
{
grouping: false,
shadow: false
},
series:
{
dataLabels:
{
enabled: true /// for use My solution, comment this line
/* ------------------------------------------------------------
/// My solution is using formatter to set y align based on value. But I don't know why this don't work.
enabled: true,
formatter: function ()
{
if (this.y>=90 && this.y<100)
{
console.log(this.series.options.dataLabels.y);
this.series.options.dataLabels.y =+ 20;
}
}
---------------------------------------------------------------*/
}
}
},
series:
[
{name: 'GoalPerecent', data:[100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100]},
{name: 'ActualPerecent', data:[95, 20, 23, 45, 98, 10, 35, 73, 33, 85, 64, 10]}
]
}
$(document).ready(function()
{
chart = new Highcharts.Chart(options);
});