Draw a Smith Chart in SVG with Vue.js is a graphical utility or introductory diagram designed for electrical and electronics engineers specializing in radio frequency (RF) engineering to help solve problems with transmission lines and matching circuits.

javascript ui components, js controls, essential js libraries for ui, smith chart examples

Simple Jquery Line/Area/Scattered Chart Plugin

How to make use of it:

1. Import and register the component.

new Vue({
    components: {
      smithChart
    }
})

2. Add the Smith Chart component to the template.

<smith-chart></smith-chart>

3. Draw points and arcs on Smith’s diagram.

<smith-chart>
  <sm-point :res="0" :react="0" fill="red"></sm-point>
  <sm-point :res="1" :react="0" fill="blue"></sm-point>
  <sm-point :res="2" :react="0" fill="green"></sm-point>
  <sm-point :res="3" :react="1" fill="purple"></sm-point>
  <sm-point :res="0.6" :react="0.6" fill="rgba(123,345,2,0.5)" r="10"></sm-point>
</smith-chart>

<smith-chart>
  <sm-res-circle
    :res="2"
    fill="rgba(0,0,255,0.5)"
  ></sm-res-circle>
  <sm-res-circle
    :res="0.5"
    :crop="1"
    fill="rgba(255,0,255,0.5)"
    stroke-width="2"
    stroke="black"
  ></sm-res-circle>
  <sm-res-circle
    :res="0.2"
    :crop="0.4"
    fill="none"
    stroke-width="5"
    stroke="#FF4136"
  ></sm-res-circle>
</smith-chart>

4. All options are default.

radius: {
  type: Number,
  default: 400
},
resistanceLabels: {
  type: Boolean,
  default: true
},
reactanceLabels: {
  type: Boolean,
  default: true
},
labelRings: {
  type: Boolean,
  default: true
},
translateX: {
  type: Number,
  default: 100
},
rotate: {
  type: Number,
  default: 0
},

Smith Chart Component With SVG, Smith Chart with Vue.js Plugin/Github

See Demo And Download

Official Website(germi): Click Here

This superior jQuery/javascript plugin is developed by germi. For extra advanced usage, please go to the official website.