I am using 2 chart of canvasjs plugin piechart and columnchart.
In piechart labels of the elements are so fine it uses all the spaces into content free but column chart if one label is length is big it skipped. But I dont want it to skip.
so this is my question, is there any way using labels(X-Axis only) in column chart(barchart) like just like in piechart ?
Thank you.
Note: I parse it, change it etc. everything comes up another problem if I interrupt the plugin itself so I need though solution.
Charts automatically skips label when they are too close to avoid overlapping. You can override this behavior by setting interval to 1.
Refer Axis X Interval for more detail.
Here is an example:
var chart = new CanvasJS.Chart("chartContainer",
{
axisX:{
title: "Axis X with interval 1",
interval: 1
},
data: [
{
type: "column",
dataPoints: [
{ x: 1, y: 71 },
{ x: 2, y: 55 },
{ x: 3, y: 50 },
{ x: 4, y: 65 },
{ x: 5, y: 95 },
{ x: 6, y: 68 },
{ x: 7, y: 28 },
{ x: 8, y: 34 },
{ x: 9, y: 14 },
{ x: 10, y: 14 },
{ x: 11, y: 71 },
{ x: 12, y: 55 },
{ x: 13, y: 50 },
{ x: 14, y: 65 },
{ x: 15, y: 95 },
{ x: 16, y: 68 },
{ x: 17, y: 28 },
{ x: 18, y: 34 },
{ x: 19, y: 14 }
]
}
]
});
chart.render();
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
Related
Is it possible in lightningchart js to rotate ticks text on axis? Ticks text does not fit or overlaps adjacent text.
As of LightningChart JS v3.1.0 it's possible to set tick label rotation.
You can use axis.setTickStyle to set style settings for current tick strategy. Alternatively this can be done through axis.setTickStrategy's styler parameter.
The VisibleTicks class has setLabelRotation method which can be used to define tick rotation in degrees. Positive angle rotates clockwise and negative angle counter-clockwise. So to rotate labels on X axis to be rotated vertically.
chart.getDefaultAxisX()
.setTickStyle((s) => s
.setMajorTickStyle((m) => m.setLabelRotation(-90))
.setMinorTickStyle(m => m.setLabelRotation(-90)),
)
See full example below.
const {
lightningChart,
PointShape,
} = lcjs
const pointSize = 10
const chart = lightningChart().ChartXY()
chart.addPointLineSeries()
.setPointSize(pointSize)
.add([{
x: 0,
y: 0
},
{
x: 50,
y: 10
},
{
x: 80,
y: 20
},
{
x: 100,
y: 30
},
{
x: 150,
y: 40
},
{
x: 180,
y: 50
},
{
x: 230,
y: 60
},
{
x: 290,
y: 70
}
])
chart.addPointLineSeries({
pointShape: PointShape.Circle
})
.setPointSize(pointSize)
.add([{
x: 0,
y: 0
},
{
x: 100,
y: 10
},
{
x: 230,
y: 20
},
{
x: 390,
y: 30
},
{
x: 470,
y: 40
},
{
x: 540,
y: 50
},
{
x: 600,
y: 60
},
{
x: 800,
y: 70
}
])
chart.getDefaultAxisX()
.setInterval(0, 1000, false, true)
.setTickStyle((s) =>
s.setMajorTickStyle((m) => m.setLabelRotation(-90)).setMinorTickStyle(m => m.setLabelRotation(-90)),
)
chart.getDefaultAxisY()
.setInterval(0, 100, false, true)
<script src="https://unpkg.com/#arction/lcjs#3.1.0/dist/lcjs.iife.js"></script>
As of current version (v3.0.1) there is no API for configuring text.
I see this as a very potential feature improvement. It would help us in introducing it to the library, if you would describe your usage case for rotated tick text.
Screenshots are gold.
How can I pass degree Celcius symbol for yAxis
I have tried all kinds
1. °
2. U+00B0 - unicode
3. ° - html code
but all of them get printed as given and do not print the degree symbol.
You can use suffix property to add suffix in axis labels to do this.
var chart = new CanvasJS.Chart("chartContainer", {
axisY: {
suffix: " °C"
},
data: [{
type: "spline",
yValueFormatString: "#0.## °C",
dataPoints: [
{ x: new Date(2017,6,24), y: 31 },
{ x: new Date(2017,6,25), y: 31 },
{ x: new Date(2017,6,26), y: 29 },
{ x: new Date(2017,6,27), y: 29 },
{ x: new Date(2017,6,28), y: 31 },
{ x: new Date(2017,6,29), y: 30 },
{ x: new Date(2017,6,30), y: 29 }
]
}]
});
chart.render();
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
I use canvasJS to make a line graph report, the issue now is it didn't show properly in tooltip using yValueFormatString.
my goal is to display the value:
{
type:"stepLine",
name: "title",
showInLegend: true,
connectNullData: true,
yValueFormatString: "##.## %",
dataPoints: [
{ x: new Date(2019, 1, 20), y: 12.78 },
{ x: new Date(2019, 1, 19), y: 12.79 },
{ x: new Date(2019, 1, 18), y: 12.80 },
]
}
in tooltip, it shows
1278 %
1279 %
1280 %
I think there's something wrong with it, I wanted to display like:
12.78 %
12.79 %
12.80 %
any idea?
According to documentation, "%" Multiplies a number by 100 i.e. 12.78("##.## %") => 1278%. Instead setting yValueFormatString to "##.#0 '%'" should work fine in this case.
Here is an example:
var chart = new CanvasJS.Chart("chartContainer", {
data: [{
type:"stepLine",
name: "title",
showInLegend: true,
connectNullData: true,
yValueFormatString: "##.#0 '%'",
dataPoints: [
{ x: new Date(2019, 1, 20), y: 12.78 },
{ x: new Date(2019, 1, 19), y: 12.79 },
{ x: new Date(2019, 1, 18), y: 12.80 },
]
}]
});
chart.render();
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="width: 100%; height: 260px"></div>
Here is my dataset
var dataset = [{ x: 0, y: 100 }, { x: 1, y: 833 }, { x: 2, y: 1312 },
{ x: 3, y: 1222 }, { x: 4, y: 1611 },
{ x: 0, y: 200 }, { x: 1, y: 933 }, { x: 2, y: 1412 },
{ x: 3, y: 1322 }, { x: 4, y: 1711 },]
I'm not sure where to specify the name of each dataset, How should this be modified to allow for a Group Name to be passed and what changes should be made in my D3.JS code ?
Fiddle https://jsfiddle.net/qvrL3ey5/
Using http://jsfiddle.net/2N2rt/15/ I was able to resolve this issue.
Example
var data = [
{name: 'John', values: [0,1,3,9, 8, 7]},
{name: 'Harry', values: [0, -100, 7, 1, 1, 111]},
{name: 'Steve', values: [3, 1, 4, 4, 4, 107]},
{name: 'Adam', values: [4, 77, 2, 13, 11, 130]}
];
Currently, it seems that CanvasJS only supports angling labels in one direction (with the baseline on the left), as shown in the image below. I would like to rotate the text in the opposite direction (With the baseline for the text being on the right), as shown by the arrows.
So far, I have tried setting the axisX labelAngle to 90, 270, -45, -90, and -270. None of these have resulted in shifting the baseline to the right like I want, and have all forced the text to a max of 90 degrees with the baseline on the left.
Is this possible in the current version? #Devs: If not available in current version, would it be possible to add in support for this?
You can set angle to negative value to make it rotated the other way-round, as shown in this screenshot.
Here is an example.
var chart = new CanvasJS.Chart("chartContainer",
{
axisX:{
title: "labels at -45 deg",
labelAngle: -45
},
data: [
{
type: "column",
dataPoints: [
{ x: 10, y: 71, label: "cat 1" },
{ x: 20, y: 55, label: "cat 2" },
{ x: 30, y: 50, label: "cat 3" },
{ x: 40, y: 65, label: "cat 4" },
{ x: 50, y: 95, label: "cat 5" },
{ x: 60, y: 68, label: "cat 6" },
{ x: 70, y: 28, label: "cat 7" },
{ x: 80, y: 34, label: "cat 8" },
{ x: 90, y: 14, label: "cat 9" }
]
}
]
});
chart.render();
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>