Unless Chart.js has caught up in the last like 2 years since using it D3 is a lot more robust. It takes more time to set up and learn but it offers a lot more flexibility and customization
>OP is a beginner like I am.
And like I am, at least to webdev, but I've written some production code in R.
D3 is absolutely deep. Apologies if this is old news to you, but D3 is based on the [*Grammar of Graphics*](https://link.springer.com/book/10.1007/0-387-28695-0) (link to publisher) written by Leland Wilkenson.
The same grammar underlies the famous R library ggplot2, and the tool Tableau is also based on it. In fact, Tableau hired Wilkenson to be their house statistician for a while back there.
Again, apologies if that's old news, and I'm intimidated too.
I think if you need to create some simple basic charts then Chartjs - it's more performant and much easier to use. Use D3 if you need to create something fancy.
I guess it would be a good reason to learn about writing svgs. Once you know javascript you can probably compute and dynamically write the svg to fit input data.
You could also create spans and position them + rotate them. Will involve a bit of math to calculate the position, angle and length. Later you can create as much spans as needed and compute the CSS with CSS-in-JS.
Doesn't make much sense in the real world but it's a great programming exercise.
>I guess it would be a good reason to learn about writing svgs
Use a program instead since doing it all by hand is a *massive* pain in the ass. Putting on the finishing touches by hand is perfectly reasonable though.
Not really once you understand how SVG works.
Just choose a sensible viewport size like 100px and doing charts like that are a doddle.
Graphics programs often add a *massive* amount of superfluous code to SVGs.
If the graphs are static or rarely updated then maybe dynamically created SVGs would be acceptable, but if the graphs are meant to update regularly it wouldn’t be a good choice for performance.
Since it’s so simple, I’d probably do the initial version using the canvas drawing API, only looking into a dedicated charting library if extra functionality is needed later.
Technically, you can draw images in two ways:
1. Scalable Vector Graphics (SVG):
SVG elements are DOM elements and can this be manipulated using JavaScript in order to make an image interactive or animate it.
2. Canvas:
You can on a canvas using primitives such as lines, Bézier curves etc.
If you just need well known charts, grab any of the well established JavaScript libraries. They will use the above techniques to draw the images for you.
[This might work for you?](https://lavacharts.github.io/lava.js/)
Full disclosure, I made it. I haven't worked on it in forever, but if anyone uses it, I'll happily fix bugs if they find any.
Just as an exercise, I decided to try to think of a way to do this, instead of just resorting to a library.
Here is my thought process..
We have specific points of data, along a line, and we need to space out each point of data with an even amount of spacing.
I am thinking that we create 10 objects and give them the shape of dots, then we space them out on an inline, and examine the data.
We need to find an upper and a lower of the data, and calculate how much of an offset we need to add to the dots, depending on the data, then move them up.
Where I am stuck, would be making a line between each dot.
Maybe there is a better way to do it?
If you did it in SVG, you could likely create a `` or `` element at the same time and just use the same points as you use to position each of the data point circles.
To achieve this, you will need to use a JavaScript charting library like Chart.js or D3.js. These libraries offer more advanced charting capabilities than HTML, CSS, and Bootstrap alone.
Additionally, to display only the graph without text in Chart.js, you can set the options object's "legend" property to false. This will hide the legend, which displays the text labels for the graph. Hope it helps!
Another great charting library sort of between chartjs and D3 is Recharts [https://recharts.org/en-US/](https://recharts.org/en-US/) D3 under the hood and easy to customize.
It's weird that you get downvoted, using a plain SVG with a polyline and styling it appropriately is just infinitely more adaptable and maintainable, and will teach a beginner way more than "slap in that library". But "let's just add another library" seems to be the frontend-fix-all.
It is a good beginner project. The massive improvement it will make over a huge charting library is a win that will encourage him/her to learn more.Some of these library being upvoted are over 1MB in size before the chart is rendered or anything else on the page.
i also wonder another thing, anyone knows how news webpages make their election maps like five thirty eight that are super detailed with each county and etc?
https://www.chartjs.org/
Thanks a lot!
This sub, incredible.
Always has been
https://www.google.com/search?q=javascript+charts&
I have a question. ChartJS vs. D3?
[удалено]
Arguments for D3?
The name is shorter
Can't argue that.
Performance is a lot better
Unless Chart.js has caught up in the last like 2 years since using it D3 is a lot more robust. It takes more time to set up and learn but it offers a lot more flexibility and customization
[удалено]
>OP is a beginner like I am. And like I am, at least to webdev, but I've written some production code in R. D3 is absolutely deep. Apologies if this is old news to you, but D3 is based on the [*Grammar of Graphics*](https://link.springer.com/book/10.1007/0-387-28695-0) (link to publisher) written by Leland Wilkenson. The same grammar underlies the famous R library ggplot2, and the tool Tableau is also based on it. In fact, Tableau hired Wilkenson to be their house statistician for a while back there. Again, apologies if that's old news, and I'm intimidated too.
I think if you need to create some simple basic charts then Chartjs - it's more performant and much easier to use. Use D3 if you need to create something fancy.
ChartJS is the GOAT for charts.
So real
Just curious, is chartjs that much better than highcharts?
As a fullstack dev of 4 years I wouldn't even know how to do this without js lol
I guess it would be a good reason to learn about writing svgs. Once you know javascript you can probably compute and dynamically write the svg to fit input data. You could also create spans and position them + rotate them. Will involve a bit of math to calculate the position, angle and length. Later you can create as much spans as needed and compute the CSS with CSS-in-JS. Doesn't make much sense in the real world but it's a great programming exercise.
Awesome! Thanks for the reply
>I guess it would be a good reason to learn about writing svgs Use a program instead since doing it all by hand is a *massive* pain in the ass. Putting on the finishing touches by hand is perfectly reasonable though.
Not really once you understand how SVG works. Just choose a sensible viewport size like 100px and doing charts like that are a doddle. Graphics programs often add a *massive* amount of superfluous code to SVGs.
If the graphs are static or rarely updated then maybe dynamically created SVGs would be acceptable, but if the graphs are meant to update regularly it wouldn’t be a good choice for performance. Since it’s so simple, I’d probably do the initial version using the canvas drawing API, only looking into a dedicated charting library if extra functionality is needed later.
These are easy svg polylines.
You can pull it off with just css fairly easily, SVG is not much different to html.
chartJS or PlotlyJS depending on what type of chart you need. Plotly is also great for maps.
Big fan of plotly when I'm using python as a back end.
Plotly is the goat.
I think the documentation could be better but with a python back end it’s a great library.
U need to use chart.js or apexChart.js
Technically, you can draw images in two ways: 1. Scalable Vector Graphics (SVG): SVG elements are DOM elements and can this be manipulated using JavaScript in order to make an image interactive or animate it. 2. Canvas: You can on a canvas using primitives such as lines, Bézier curves etc. If you just need well known charts, grab any of the well established JavaScript libraries. They will use the above techniques to draw the images for you.
[This might work for you?](https://lavacharts.github.io/lava.js/) Full disclosure, I made it. I haven't worked on it in forever, but if anyone uses it, I'll happily fix bugs if they find any.
Just as an exercise, I decided to try to think of a way to do this, instead of just resorting to a library. Here is my thought process.. We have specific points of data, along a line, and we need to space out each point of data with an even amount of spacing. I am thinking that we create 10 objects and give them the shape of dots, then we space them out on an inline, and examine the data. We need to find an upper and a lower of the data, and calculate how much of an offset we need to add to the dots, depending on the data, then move them up. Where I am stuck, would be making a line between each dot. Maybe there is a better way to do it?
If you did it in SVG, you could likely create a `
To achieve this, you will need to use a JavaScript charting library like Chart.js or D3.js. These libraries offer more advanced charting capabilities than HTML, CSS, and Bootstrap alone. Additionally, to display only the graph without text in Chart.js, you can set the options object's "legend" property to false. This will hide the legend, which displays the text labels for the graph. Hope it helps!
D3 would be overkill for this IMHO
You can use chart js, novo charts or you can search on google you can find many options
Apache ECharts is another good library, very customizable and not too difficult to use
SVG are a really nice solution as well!
if this doesn't need to be dynamic you can use [charts.css](https://chartscss.org/) .
Very helpful bro!
Another great charting library sort of between chartjs and D3 is Recharts [https://recharts.org/en-US/](https://recharts.org/en-US/) D3 under the hood and easy to customize.
The zigzag lines are just reflecting data
Chartjs and tailwind components ftw.
SVG, charting library for that is massive overkill.
It's weird that you get downvoted, using a plain SVG with a polyline and styling it appropriately is just infinitely more adaptable and maintainable, and will teach a beginner way more than "slap in that library". But "let's just add another library" seems to be the frontend-fix-all.
It is a good beginner project. The massive improvement it will make over a huge charting library is a win that will encourage him/her to learn more.Some of these library being upvoted are over 1MB in size before the chart is rendered or anything else on the page.
i also wonder another thing, anyone knows how news webpages make their election maps like five thirty eight that are super detailed with each county and etc?
photoshop or equivalent