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.
Related
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'm trying a line chart for several years with month names in the xaxis. xaxis seems to be an integer so I used the function from this answer: https://stackoverflow.com/a/30325918
The problem is that the chart is cut off by number 9 (which stands for "Okt") and I don't know why. So the 10 and 11 are missing. Also the tooltips are not shown, maybe that's a subsequent fault.
Style for the svg:
#chart svg {
height: 600px;
width: 1456px;
}
Code for the Chart:
nv.addGraph(function() {
var chart = nv.models.lineChart()
.margin({left: 50}) //Adjust chart margins to give the x-axis some breathing room.
.useInteractiveGuideline(true) //We want nice looking tooltips and a guideline!
.showLegend(true) //Show the legend, allowing users to turn on/off line series.
.showYAxis(true) //Show the y-axis
.showXAxis(true) //Show the x-axis
;
var Monate = ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez']
chart.xAxis //Chart x-axis settings
.axisLabel('Monat')
.tickValues([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]).tickFormat(function(d){
return Monate[d]
});
chart.forceY([0, 55000]);
d3.select('#chart svg').datum([{ values: [{ x:'0', y: '0'},{ x:'1', y: '0'},{ x:'2', y: '7147.75'},{ x:'3', y: '5567.75'},{ x:'4', y: '8307.75'},{ x:'5', y: '7680.75'},{ x:'6', y: '10416.75'},{ x:'7', y: '15119.25'},{ x:'8', y: '6654.75'},{ x:'9', y: '7670.75'},{ x:'10', y: '8535.75'},{ x:'11', y: '25978.5'}], key: '2012'},
{ values: [{ x:'0', y: '4397.5'},{ x:'1', y: '14542.5'},{ x:'2', y: '18652.5'},{ x:'3', y: '18027.5'},{ x:'4', y: '10123.5'},{ x:'5', y: '11686.25'},{ x:'6', y: '10451.5'},{ x:'7', y: '17918'},{ x:'8', y: '11013.25'},{ x:'9', y: '11598.25'},{ x:'10', y: '12179'},{ x:'11', y: '54450.75'}], key: '2013'},
{ values: [{ x:'0', y: '13257.75'},{ x:'1', y: '10050.25'},{ x:'2', y: '17530'},{ x:'3', y: '16684'},{ x:'4', y: '10437.25'},{ x:'5', y: '31956.5'},{ x:'6', y: '24343.75'},{ x:'7', y: '24026.5'},{ x:'8', y: '24754.5'},{ x:'9', y: '17423'},{ x:'10', y: '27284.75'},{ x:'11', y: '50121.25'}], key: '2014'},
...and so on...
{ values: [{ x:'0', y: '954'},{ x:'1', y: '0'},{ x:'2', y: '0'},{ x:'3', y: '0'},{ x:'4', y: '0'},{ x:'5', y: '0'},{ x:'6', y: '0'},{ x:'7', y: '0'},{ x:'8', y: '0'},{ x:'9', y: '0'},{ x:'10', y: '0'},{ x:'11', y: '0'}], key: '2019'}]).transition().duration(500).call(chart);
//Update the chart when window resizes.
nv.utils.windowResize(function() { chart.update() });
return chart;
});
All your x and y are strings.
Remove all the ' characters.
I have set the size style on the div#chart because nvd3.css has a style for the svg with width and height set to 100%.
I want to have an animation where the nodes get colored then the edges get colored. I looked at the other questions regarding animation in cytoscape.js and tried stacking promise statements to no avail.
I'm also unclear as to what it is the queue does, setting the boolean for both the edge and node to true, false or staggered seems to have no difference on the animation as they both animate at the same time.
This is the code I have so far:
var a = cy.edges().animate({
position: { x: 100, y: 100 },
style: { lineColor: '#a79' }}, {duration: 1000},
{queue: 1}
);
var b = cy.nodes().animate({
position: { x: 100, y: 100 },
style: { backgroundColor: 'blue' }},
{duration: 1000},
{queue: 1}
);
a.animation().play().promise().then(b.animation().play());
edit
So I wrapped the animate command in a function to get the desired result
cy.on('tap', 'node', function(evt){
cy.nodes().animate(
{
position: { x: 100, y: 100 },
style: { lineColor: 'pink' }
},
{
duration: 1000,
queue: true
}
);
Although hardcoding animations is not ideal, I would still like to know how to do it with the promise commands.
It looks ok, the only thing I see is:
var a = cy.edges().animate(
{
position: { x: 100, y: 100 },
style: { lineColor: '#a79' }
},
{
duration: 1000,
queue: true
}
);
var b = cy.nodes().animate(
{
position: { x: 100, y: 100 },
style: { backgroundColor: 'blue' }
},
{
duration: 1000, // This goes together in one brace
queue: true // Use a boolean maybe
}
);
a.animation().play().promise().then(function () {
b.animation().play());
}
The documentation does exactly that, maybe this solves the problem :)
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>
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>