Smith Chart Component With SVG And Vue.js

Install & Download:

Description:

A Vue.js charting library to render a smith chart using SVG.

How to use 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 the Smith Chart.

<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 default options.

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
},

Preview: